/* ══════════════════════════════════════════════════════════════════════════
   FULL-VIEW CARD — a CSS replica of logic/cardRenderingLogic.js
   renderNativeCard(), the 312×600 card players already see in drops and on
   card inspect. Every offset below is that renderer's pixel value restated
   in container units so the card is identical at any size:

     art     {Name}+.png, scaled to fill the width, anchored top
     shade   linear gradient from 45% of the height down to rgba(8,5,2,.97)
     frame   frUnc/frRare.png where they exist, else a 3px rarity stroke, r8
     sigil   left 13, top 11, inside a band = dps sigil height × 1.5 (=108)
     gem     centred at y = H-240, a 45° square (see drawRarityShape)
     name    y = H-180, 48px Cinzel Decorative, white on a black stroke
     rule    35 below the name, 60% of the width
     code    y = H-55, 13px monospace

   1cqw = 1% of the card's own width, so 312px there == 100cqw here.
   Swapping a sigil or frame PNG re-fits everything automatically.

   THIS FILE IS THE CARD. It was lifted out of /game/collection.html so every
   surface that shows a full card — the collection, the champion page, the
   post-champ-select loading screen — prints the same one. Do not restate any
   of it locally: a second copy is how the two drift apart. Pair it with
   /game/bncard.js, which builds the markup these rules expect.
   ══════════════════════════════════════════════════════════════════════════ */
.bn-card{
  container-type:inline-size;
  position:relative;width:100%;aspect-ratio:312/600;overflow:hidden;
  border-radius:2.56cqw;background:#050d16;isolation:isolate;
}
.bn-card .bc-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.bn-card .bc-shade{position:absolute;left:0;right:0;top:45%;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(8,5,2,.97));}
.bn-card .ch-noart{position:absolute;inset:0;}

/* Frame: the two PNGs that exist, then a stroke for every other rarity. */
.bn-card .bc-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.bn-card.c-common   .bc-edge{box-shadow:inset 0 0 0 .96cqw rgba(140,154,168,.4);}
.bn-card.c-epic     .bc-edge{box-shadow:inset 0 0 0 .96cqw rgba(155,89,182,.65);}
.bn-card.c-legendary .bc-edge{box-shadow:inset 0 0 0 .96cqw rgba(200,170,110,.7);}
.bn-card .bc-edge{position:absolute;inset:0;border-radius:2.56cqw;pointer-events:none;}

/* The sigil band. dps sets the height; support is 90% of it and centred —
   the same rule as CLASS_ICON_BAND_FILL in the renderer. */
.bc-class{position:absolute;left:4.17cqw;top:3.53cqw;height:34.6cqw;display:flex;align-items:center;}
.bc-class img{height:100%;width:auto;display:block;filter:drop-shadow(0 .6cqw 2.5cqw rgba(0,0,0,.6));}
.bc-class.is-support img{height:90%;}

.bn-card .bc-gem{position:absolute;left:50%;top:60%;width:12.8cqw;height:12.8cqw;transform:translate(-50%,-50%);}
.bn-card .bc-name{
  position:absolute;left:5cqw;right:5cqw;top:70%;transform:translateY(-50%);
  text-align:center;white-space:nowrap;font-family:var(--fd);font-weight:700;
  font-size:calc(var(--bc-name,15.4) * 1cqw);line-height:1;color:#fff;
  -webkit-text-stroke:1.92cqw rgba(0,0,0,.9);paint-order:stroke fill;
}
.bn-card .bc-rule{
  position:absolute;left:20cqw;right:20cqw;top:75.83%;height:.96cqw;
  background:rgba(255,255,255,.7);filter:drop-shadow(.96cqw .96cqw 2.5cqw rgba(0,0,0,.8));
}
.bn-card .bc-code{
  position:absolute;left:0;right:0;top:90.83%;transform:translateY(-50%);
  text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:4.17cqw;letter-spacing:.3cqw;color:rgba(200,190,170,.88);
  text-shadow:0 0 1.3cqw rgba(0,0,0,.95);
}