*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#111;
  font-family:Georgia,serif;
  color:#fff;
  display:flex;
  min-height:100vh;
}

/* ===== CARTES ===== */
.card{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 24px #000;
  cursor:pointer;
  transform-origin:top left;
  flex-shrink:0;
}
.bg,.illu,.frame{position:absolute;inset:0}
.bg{background-size:cover;background-position:center}
.illu{top:48px;left:8px;right:60px;bottom:0;background-size:cover;background-position:center top;background-repeat:no-repeat}
.frame{background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;z-index:5}

.left-icons{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center}
.name{position:absolute;text-align:center;color:#fff;font-weight:bold;text-shadow:0 1px 3px #000;z-index:6}
.rarity{position:absolute;z-index:6}
.stat{position:absolute;z-index:6}
.stat img{width:100%;height:100%}
.stat span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;text-shadow:0 1px 3px #000}

.spec{position:absolute;color:#c9a227;z-index:6}
.desc{position:absolute;color:#e8e8e8;line-height:1.3;z-index:6}
.legend{position:absolute;color:#9ab;font-style:italic;z-index:6}

.card-legendary .name,
.card-legendary .spec,
.card-legendary .desc,
.card-legendary .legend {
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.zoom{box-shadow:0 25px 80px rgba(0,0,0,.85)}