/* equip.css — "Usable Equipment" grid for the character detail page.
 * Each item is a fixed 100×100 square footprint: the equip art centered, with the rarity frame
 * overlaid (and an optional event backer). Sizes are chosen so the frame stays INSIDE the grid
 * cell — the old 118px frame over a 98px thumb overflowed and made rows overlap. Frame/backer art
 * is at /assets/icon_elements/, equip art at /assets/equips/. */

.equip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:12px 8px; justify-items:center; align-items:start;
}
.equip-list{ display:block; text-decoration:none !important; line-height:0; }

.equip-thumb{ position:relative; width:100px; height:100px; }
.equip-thumb > .art,
.equip-thumb > .backer,
.equip-thumb > .frame{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background-repeat:no-repeat;
}
.equip-thumb > .art   { width:83px; height:81px; border-radius:5px; z-index:1; }   /* the equipment image */
.equip-thumb > .backer{ width:90px; height:88px; background-size:90px 88px; z-index:0; }   /* event ribbon */
.equip-thumb > .backer.event{ background-image:url('/assets/icon_elements/EqIco_pltEvent.webp'); }
.equip-thumb > .frame { width:100px; height:100px; background-size:100px 100px; z-index:2; pointer-events:none; }  /* rarity ornament */

.equip-thumb > .frame.iron           { background-image:url('/assets/icon_elements/EqIco_frmIron.webp'); }
.equip-thumb > .frame.bronze         { background-image:url('/assets/icon_elements/EqIco_frmBronze.webp'); }
.equip-thumb > .frame.silver         { background-image:url('/assets/icon_elements/EqIco_frmSilver.webp'); }
.equip-thumb > .frame.gold           { background-image:url('/assets/icon_elements/EqIco_frmGold.webp'); }
.equip-thumb > .frame.unique         { background-image:url('/assets/icon_elements/EqIco_frmUnique.webp'); }
.equip-thumb > .frame.platinum       { background-image:url('/assets/icon_elements/EqIco_frmPlatinum.webp'); }
.equip-thumb > .frame.awakenediron   { background-image:url('/assets/icon_elements/EqIco_frmSpIron.webp'); }
.equip-thumb > .frame.awakenedbronze { background-image:url('/assets/icon_elements/EqIco_frmSpBronze.webp'); }
.equip-thumb > .frame.awakenedsilver { background-image:url('/assets/icon_elements/EqIco_frmSpSilver.webp'); }
.equip-thumb > .frame.awakenedgold   { background-image:url('/assets/icon_elements/EqIco_frmSpGold.webp'); }
.equip-thumb > .frame.awakenedunique { background-image:url('/assets/icon_elements/EqIco_frmSpUnique.webp'); }
.equip-thumb > .frame.awakenedplatinum{ background-image:url('/assets/icon_elements/EqIco_frmSpPlatinum.webp'); }

.equip-list .equip-thumb{ transition:transform .15s ease; }
.equip-list:hover{ position:relative; z-index:3; }
.equip-list:hover .equip-thumb{ transform:scale(1.12); }