<style>

/* Fonts */

@font-face {
    font-family: 'Champions';
    src: url('https://www.moddingway.com/fonts/Champions.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'CruyffCM';
    src: url('https://www.moddingway.com/fonts/CruyffSansCondensed-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CruyffCR';
    src: url('https://www.moddingway.com/fonts/CruyffSansCondensed-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CruyffR';
    src: url('https://www.moddingway.com/fonts/CruyffSans-Regular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'CruyffM';
    src: url('https://www.moddingway.com/fonts/CruyffSans-Medium.woff') format('woff');
    font-display: swap;
}

a.cardlink:link {
color: inherit;
text-decoration: none;
}
a.cardlink:visited {
color: inherit;
text-decoration: none;
}
a.cardlink:hover {
color: inherit;
text-decoration: none;
}
a.cardlink:active {
color: inherit;
text-decoration: none;
}


.futcard-wrapper-a {
  width: calc(196px * var(--scale));
  height: calc(262px * var(--scale));
  margin: 0 auto;
  max-width: 100%;
  position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.futcard-wrapper-b {
  width: calc(196px * var(--scale));
  height: calc(262px * var(--scale));
  display: inline-block;
  position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}


/* base card */
.futcardl {
  width: 196px;
  height: 272px;
  position: relative;
  margin-top:-20px;
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* player image */
.futcardplayer {
  position: absolute;
  width: 175px;
  height: 145px;
  top: 49px;
  left: -10px;
  z-index: 90;
}

.futcardplayerpor {
  position: absolute;
  width: 196px;
  height: 274px;
  top: 0px;
  left: 3px;
  z-index: 90;
}

/* rating + position */
.futcard-ov {
  font-size: 27px;
  opacity: 1;
  top: 58px;
  left: 23px;
  position: absolute;
  z-index: 100;
  font-weight:700;
  width: 39px;
  text-align: center;
}

.futcard-pos {
  padding: 0;
  margin: 0;
  opacity: 0.9;
  font-size: 15px;
  top: 85px;
  left: 28px;
  position: absolute;
  font-weight:700;
  z-index: 100;
  width: 30px;
  text-align: center;
}

/* flags / badges */
.futcard-natl,
.futcard-leal,
.futcard-teaml {
  position: absolute;
  top: 210px;
  z-index: 100;
}

.futcard-natl { left: 61px; }
.futcard-leal { left: 89px; }
.futcard-teaml { left: 115px; }

.futcard-natl-img {
  width: 21px;
  height: 21px;
}

.futcard-leal-img {
  width: 19px;
  height: 19px;
}

.futcard-teaml-img {
  width: 19px;
  height: 19px;
}

.futcard-badge{
    position:absolute;
    z-index:100;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    min-width:35px;
    height:20px;

    padding:0 4px;

    background:var(--sm-bg);
    border:1px solid var(--sm-border);
    border-radius:7px;

    font-family:inherit;
    font-size:12px;
    font-weight:700;
    color:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.futcard-badge .sm-boot{
    font-size:9px;
    line-height:1;
    transform:translateY(-2px);
}

.futcard-badge .sm-star{
    font-size:9px;
    line-height:1;
    transform:translateY(-1px);
}

.futcard-badge .sm-value{
    font-size:11px;
    line-height:1;
}

/* Skill Moves */
.futcard-skillmove-weakfoot{
    top:167px;
    left:162px;
}

/* Foot */
.futcard-foot{
    top:145px;
    left:162px;
}


/* Price */
.futcard-price{
    top:249px;
    position:absolute;
    white-space:nowrap; 
    font-size:9px;   
}

/* Score */
.futcard-score{
    top:15px;
    position:absolute;
    white-space:nowrap; 
    font-size:9px;   
}

/* Token */
.futcard-token{
    top:249px;
    position:absolute;
    white-space:nowrap; 
    font-size:9px;   
}

.futcard-totw{
    top:249px;
    position:absolute;
    white-space:nowrap; 
    font-size:9px;   
}

/* AcceleRate */
.futcard-accelerate{
    top:249px;
    position:absolute;
    white-space:nowrap; 
    font-size:9px;   
}

/* Positions2 */
.futcard-position2{
    line-height:1;
    font-size:9px;
    padding:2px;
    top:65px;
    left:162px;
    height:auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.updated-stat {
    color: #3AB03E;
    font-weight: bold;
}

.normal-stat {
    font-weight: 800;
}

/* card body */
.futcardd {
  color: #EAEAEA;
  width: 148px;
  height: 237px;
}

/* name */
.futcard-name {
  position: absolute;
  width: 190px;
  height: 27px;
  top: 169px;
  left: 2px;
  font-size: 16px;
  text-align: center;
  z-index: 100;
}

/* lower text */
.futcard-low-tit {
  position: absolute;
  width: 145px;
  top: 158px;
  left: 25px;
  font-size: 11px;
  text-align: center;
  opacity: 0.9;
  z-index: 100;
}

.futcard-low-stats {
  position: absolute;
  width: 145px;
  top: 168px;
  left: 25px;
  font-size: 15px;
  text-align: center;
  opacity: 0.9;
  z-index: 100;
  font-family: Numbers2324Medium.ttf;
}

/* stats columns */
.futcard-stat-coll,
.futcard-stat-colr {
  width: 65px;
  float: left;
}

.futcard-stat-colr {
  padding-left: 10px;
}

/* stat numbers */
.futcard-statl,
.futcard-statr {
  margin: 0;
  padding: 0;
  padding-left: 8px;
  margin-top: -5px;
  font-size: 16px;
  text-align: left;
}

/* positions PS */
.futcard-psp {
  opacity: 1;
  position: absolute;
  left: 4px;
  z-index: 100;
  text-align: center;
}

.futcard-psp img {
  width: 25px;
}

.futcard-psp1 { top: 75px; }
.futcard-psp2 { top: 99px; }
.futcard-psp3 { top: 123px; }
.futcard-psp4 { top: 147px; }
.futcard-psp5 { top: 171px; }



/* positions PS */
.futcard-ps {
  opacity: 1;
  position: absolute;
  left: 4px;
  z-index: 100;
  text-align: center;
}

.futcard-ps img {
  width: 25px;
}

.futcard-ps1 { top: 75px; }
.futcard-ps2 { top: 99px; }
.futcard-ps3 { top: 123px; }
.futcard-ps4 { top: 147px; }
.futcard-ps5 { top: 171px; }

.futcard-ps6 { left:168px;top: 75px; }
.futcard-ps7 { left:168px;top: 99px; }
.futcard-ps8 { left:168px;top: 123px; }
.futcard-ps9 { left:168px;top: 147px; }
.futcard-ps10 { left:168px;top: 171px; }

.futcardplayer-sm {
position:absolute;
right:12px;
width: 60%;
top:-21px;
}

.futcardplayerpor-sm {
position:absolute;
width: 85%;
top:-45px;
left:30px;
bottom:0px;
clip: rect(0px,150px,150px,0px);
}

#imagefutcardplsm { /*small card player pic*/
position:absolute;
right:12px;
width: 70%;
bottom:14px;
}

#imagefutcardplsmp { /*small card player portrait*/
position:absolute;
right:12px;
width: 100%;
bottom:-50px;
clip: rect(0px,150px,130px,0px);
}

.futcard-ov-sm {
font-size:27px;
opacity:1.0;
top:55px;
position:absolute;
left:20px;
z-index:100;
width:39px;
text-align:center;
}

.futcard-pos-sm {
padding:0px;
margin:0px;
opacity:0.9;
font-size:14px;
top:62px;
position:absolute;
left:24px;
z-index:100;
text-align:center;
width:30px;
}

.futcard-natl-sm {
position:absolute;
left:52px;
z-index:100;
top:158px;
}

.futcard-leal-sm {
position:absolute;
left:80px;
z-index:100;
top:158px;
}

.futcard-teaml-sm {
position:absolute;
left:106px;
z-index:100;
top:158px;
}

.futcard-name-sm {
position:absolute;
height:27px;
text-align:center;
font-size:20px;
width:190px;
margin-bottom:1px;
float:none;
top:136px;
left:-6px;
padding-top:1px;
padding-bottom:5px;
z-index:100;
opacity:1.0;
}

.player-card {
    position: relative;
}

.card-alternative {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

@media (hover: hover) {
    .player-card:hover .card-normal { opacity: 0; }
    .player-card:hover .card-alternative { opacity: 1; visibility: visible; }
}
.player-card.active .card-normal { opacity: 0 !important; }
.player-card.active .card-alternative { opacity: 1 !important; visibility: visible !important; }
</style>