/* FUT 21 style player card. Shared by the React FUTCard (src/fut-card) and card() in js/app.js:
 * the markup is the same in both, so a change here shows up everywhere.
 *
 * Everything inside .fut-in is sized in em, and 1em is 1% of the card width (1cqw). That is what
 * keeps a 44px squad slot and a 420px detail view in exact proportion. Card space is 100em x 160em.
 * The artwork in public/cards/ bleeds past the box, so frames and shards can leave the silhouette. */
.fut-card {
  --w: 168px;
  --fut-ink: #3d2b04;
  --fut-label: var(--fut-ink);
  --fut-rule: color-mix(in srgb, var(--fut-ink) 42%, transparent);
  --fut-shadow: none;
  --fut-photo-mask: linear-gradient(#000, #000);
  --fut-sheen: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  position: relative; display: block; flex: none;
  width: var(--w); aspect-ratio: 1000 / 1600;
  container-type: inline-size;
  padding: 0; border: 0; background: none;
  color: var(--fut-ink); font-family: 'Barlow Condensed', 'DIN Condensed', 'Arial Narrow', sans-serif;
  text-align: left; text-decoration: none; user-select: none;
  transition: transform .18s ease, filter .18s ease;
}
a.fut-card, button.fut-card { cursor: pointer; }
a.fut-card:hover, button.fut-card:hover { transform: translateY(-3%) scale(1.025); filter: brightness(1.06); color: var(--fut-ink); }
a.fut-card:focus-visible, button.fut-card:focus-visible { outline: 2px solid #1ff2d6; outline-offset: 4px; border-radius: 4px; }

.fut-in { position: absolute; inset: 0; display: block; font-size: 1cqw; line-height: 1; }
.fut-art, .fut-shine { position: absolute; left: -11em; top: -9em; width: 122em; height: 178em; max-width: none; pointer-events: none; }
.fut-shine {
  background: var(--fut-sheen) 130% 0 / 260% 100% no-repeat;
  opacity: 0; transition: background-position .75s ease, opacity .2s;
}
a.fut-card:hover .fut-shine, button.fut-card:hover .fut-shine {
  opacity: 1; background-position: -30% 0;
  -webkit-mask: var(--fut-art) center / 100% 100% no-repeat; mask: var(--fut-art) center / 100% 100% no-repeat;
}

.fut-photo { position: absolute; left: 29em; top: 15em; width: 69em; height: 69.5em; overflow: hidden; -webkit-mask-image: var(--fut-photo-mask); mask-image: var(--fut-photo-mask); }
.fut-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

.fut-col { position: absolute; left: 13.6em; top: 18em; width: 18em; display: flex; flex-direction: column; align-items: center; text-shadow: var(--fut-shadow); }
.fut-rat { font-size: 21.5em; font-weight: 600; letter-spacing: -.012em; line-height: .78; }
.fut-pos { font-size: 10em; font-weight: 500; letter-spacing: .02em; margin-top: .3em; }
.fut-badges { display: contents; }
.fut-rule { display: block; flex: none; width: 11em; height: .32em; margin: 2.2em 0; background: var(--fut-rule); }
.fut-rule + .fut-rule { display: none; }
.fut-flag { width: 15em; height: 10em; object-fit: contain; }
.fut-crest { width: 15.5em; height: 15.5em; object-fit: contain; filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .28)); }

.fut-name { position: absolute; left: 7em; right: 7em; top: 85em; height: 15em; display: flex; align-items: center; justify-content: center; text-shadow: var(--fut-shadow); }
/* --n is the number of characters: long names shrink to stay on one line */
.fut-name b { font-size: min(13.5em, calc(82em / (var(--n) * .47))); font-weight: 700; text-transform: uppercase; white-space: nowrap; letter-spacing: .012em; line-height: 1; }
.fut-name::after { content: ''; position: absolute; left: 7.5em; right: 7.5em; bottom: -1.3em; height: .32em; background: var(--fut-rule); }

.fut-stats { position: absolute; left: 14.6em; right: 12em; top: 104.6em; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 11.2em); grid-auto-flow: column; column-gap: 8em; align-items: center; text-shadow: var(--fut-shadow); }
.fut-stats::before { content: ''; position: absolute; left: calc(50% - .9em); top: 1em; bottom: 1em; width: .32em; background: var(--fut-rule); }
.fut-stats > span { display: flex; align-items: baseline; font-size: 8.8em; font-weight: 500; color: var(--fut-label); white-space: nowrap; letter-spacing: .01em; }
.fut-stats b { width: 1.42em; font-weight: 700; color: var(--fut-ink); }
.fut-in::after { content: ''; position: absolute; left: 42.5em; width: 15em; top: 142.4em; height: .32em; background: var(--fut-rule); }

/* Compact: no stats, bigger type, flag and crest move to the lower panel */
.fut-compact .fut-stats, .fut-compact .fut-in::after, .fut-compact .fut-rule, .fut-compact .fut-name::after { display: none; }
.fut-compact .fut-col { left: 10em; top: 16em; width: 26em; }
.fut-compact .fut-rat { font-size: 29em; }
.fut-compact .fut-pos { font-size: 14em; margin-top: .22em; font-weight: 600; }
.fut-compact .fut-badges { position: absolute; display: flex; align-items: center; justify-content: center; gap: 6em; left: -10em; width: 100em; top: 88em; }
.fut-compact .fut-flag { width: 24em; height: 16em; }
.fut-compact .fut-crest { width: 24em; height: 24em; }
.fut-compact .fut-name { top: 81em; left: 5em; right: 5em; height: 20em; }
.fut-compact .fut-name b { font-size: min(16.5em, calc(90em / (var(--n) * .47))); }

/* Artwork that is exactly the card, with no bleed canvas around it */
[data-fit='card'] .fut-art, [data-fit='card'] .fut-shine { left: 0; top: 0; width: 100em; height: 160em; }

/* ---------- premium finishes (hover) ---------- */
[data-card='gold-rare'], [data-card='totw'] { --fut-sheen: linear-gradient(115deg, transparent 38%, rgba(255, 226, 140, .32) 45%, rgba(255, 250, 225, .72) 50%, rgba(255, 226, 140, .32) 55%, transparent 62%); }
[data-card='toty'], [data-card='tots'], [data-card='icon'], [data-card='prime-icon'], [data-card='fut-birthday'],
[data-card='rulebreakers'], [data-card='rttf'], [data-card='future-stars'] {
  --fut-sheen: linear-gradient(115deg, transparent 32%, rgba(255, 90, 170, .34) 41%, rgba(255, 240, 150, .52) 48%, rgba(120, 255, 220, .42) 54%, rgba(120, 150, 255, .36) 61%, transparent 70%);
}

/* ---------- ink per card type ---------- */
[data-card='bronze-common'] { --fut-ink: #3a2110; }
[data-card='bronze-rare'] { --fut-ink: #33190a; }
[data-card='silver-common'] { --fut-ink: #283037; }
[data-card='silver-rare'] { --fut-ink: #1f272e; }
[data-card='gold-common'] { --fut-ink: #46360c; }
[data-card='gold-rare'] { --fut-ink: #3d2b04; }
[data-card='icon'] { --fut-ink: #6a5120; --fut-photo-mask: linear-gradient(#000 82%, transparent 99%); }
[data-card='prime-icon'] { --fut-ink: #5a4210; --fut-photo-mask: linear-gradient(#000 82%, transparent 99%); }
[data-card='freeze'] { --fut-ink: #083a60; --fut-photo-mask: linear-gradient(#000 84%, transparent 99%); }
[data-card='flashback'] { --fut-ink: #2e1a0a; --fut-photo-mask: linear-gradient(#000 82%, transparent 99%); }
[data-card='totw'], [data-card='toty'], [data-card='tots'], [data-card='rulebreakers'], [data-card='rttf'],
[data-card='record-breakers'], [data-card='fut-birthday'], [data-card='otw'], [data-card='future-stars'],
[data-card='hero'], [data-card='potm'], [data-card='showdown'], [data-card='foundations'], [data-card='moments'],
[data-card='reward'], [data-card='scream'], [data-card='ballon'] {
  --fut-shadow: 0 .06em .16em rgba(0, 0, 0, .55);
  --fut-photo-mask: linear-gradient(#000 80%, transparent 99%);
}
[data-card='totw'] { --fut-ink: #f6dd9a; }
[data-card='toty'] { --fut-ink: #fce6a4; }
[data-card='tots'] { --fut-ink: #fff4c6; }
[data-card='rulebreakers'] { --fut-ink: #d6ff3d; }
[data-card='rttf'] { --fut-ink: #e4f4ff; }
[data-card='record-breakers'] { --fut-ink: #ffd27a; }
[data-card='fut-birthday'] { --fut-ink: #fff3a8; }
[data-card='otw'] { --fut-ink: #ffd9a6; }
[data-card='headliners'] { --fut-ink: #ffffff; --fut-shadow: 0 .06em .16em rgba(0, 0, 0, .6); }
[data-card='future-stars'] { --fut-ink: #b4ffe6; }
[data-card='hero'] { --fut-ink: #fff2b0; }
[data-card='potm'] { --fut-ink: #ffffff; }
[data-card='showdown'] { --fut-ink: #ffe4b8; }
[data-card='foundations'] { --fut-ink: #d6fff2; }
[data-card='moments'] { --fut-ink: #c8fbff; }
[data-card='reward'] { --fut-ink: #eef0ff; }
[data-card='scream'] { --fut-ink: #ffb45a; }
[data-card='ballon'] { --fut-ink: #ffe9a6; }

@media (prefers-reduced-motion: reduce) {
  .fut-card, .fut-shine { transition: none; }
  a.fut-card:hover, button.fut-card:hover { transform: none; }
}