.photo-sprite {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color:#08345d;
}
.fut-card {
  --tier-a: #515b67;
  --tier-b: #aab2ba;
  --tier-ink: #f8fafc;
  position: relative;
  flex: 0 0 178px;
  min-height: 272px;
  padding: 16px 13px 12px;
  color: var(--tier-ink);
  background:
    linear-gradient(145deg, #ffffff22, transparent 34%),
    linear-gradient(155deg, var(--tier-b), var(--tier-a) 52%, #111827);
  border: 1px solid #ffffff44;
  border-radius: 20px 20px 27px 27px;
  clip-path: polygon(8% 0,92% 0,100% 8%,97% 86%,83% 100%,17% 100%,3% 86%,0 8%);
  box-shadow: 0 13px 30px #0005, inset 0 0 0 2px #ffffff18;
  overflow: hidden;
}
.fut-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #ffffff42;
  clip-path: inherit;
  pointer-events: none;
}
.rarity-ferro { --tier-a:#303943; --tier-b:#64717e; --tier-ink:#fff; }
.rarity-bronzo { --tier-a:#6f3e23; --tier-b:#c88750; --tier-ink:#fff7ed; }
.rarity-argento { --tier-a:#69727d; --tier-b:#eef2f5; --tier-ink:#111827; }
.rarity-oro { --tier-a:#9b6812; --tier-b:#ffdf69; --tier-ink:#211706; }
.rarity-platino { --tier-a:#205c63; --tier-b:#c4ffff; --tier-ink:#092e35; }
.fut-card.is-clickable { cursor: pointer; transition: transform .18s, filter .18s; }
.fut-card.is-clickable:active { transform: scale(.97); }
.fut-top { position:absolute; z-index:2; top:19px; left:15px; right:15px; display:flex; justify-content:space-between; align-items:flex-start; }
.fut-top>div { display:grid; text-align:center; text-shadow:0 1px #fff7; }
.fut-top b { font-size:29px; line-height:.9; }
.fut-top div span { font-size:10px; font-weight:950; margin-top:4px; }
.flag { font-size:23px; filter:drop-shadow(0 1px 1px #0006); }
.fut-card>.photo-sprite { height:154px; margin:12px -13px -1px; }
.fut-name { text-transform:uppercase; text-align:center; font-size:13px; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid currentColor; border-bottom:1px solid currentColor; padding:7px 2px; }
.fut-main { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding-top:8px; gap:2px; }
.fut-main span { font-size:8px; text-transform:uppercase; }
.fut-main b { display:block; font-size:13px; }
.rarity-name { text-transform:uppercase; letter-spacing:1.6px; font-size:8px; font-weight:950; text-align:center; margin-top:8px; }
.card-carousel { display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 3px 18px; }
.card-carousel .fut-card { scroll-snap-align:start; }
.role-section h2 { margin-bottom:10px; }
.card-reveal { position:relative; min-width:0; }
.card-reveal .fut-card { width:100%; min-height:250px; }
.card-reveal.covered .fut-card { visibility:hidden; }
.card-reveal.covered {
  min-height:250px;
  border:1px solid #33445d;
  border-radius:20px;
  background:repeating-linear-gradient(135deg,#16243a,#16243a 10px,#1d2e46 10px,#1d2e46 20px);
  cursor:pointer;
}
.card-reveal .cover-mark { display:none; }
.card-reveal.covered .cover-mark { display:grid; position:absolute; inset:0; place-items:center; color:var(--gold); font-size:57px; font-weight:950; }
.player-dialog {
  width:min(92vw,480px);
  max-height:88vh;
  padding:0;
  color:var(--ink);
  background:#0d1828;
  border:1px solid var(--line);
  border-radius:23px;
  box-shadow:0 30px 90px #000b;
  overflow:auto;
}
.player-dialog::backdrop { background:#020617d9; backdrop-filter:blur(7px); }
.dialog-close { position:absolute; z-index:5; right:12px; top:11px; width:34px; height:34px; border:0; border-radius:50%; background:#08111ecf; color:white; font-size:24px; cursor:pointer; }
.detail-hero { position:relative; min-height:230px; padding:145px 20px 18px; overflow:hidden; color:var(--tier-ink); background:linear-gradient(155deg,var(--tier-b),var(--tier-a)); }
.detail-hero .photo-sprite { position:absolute; inset:0 0 auto; height:165px; background-size:contain; mask-image:linear-gradient(#000 78%,transparent); }
.detail-hero h2 { margin:2px 0; font-size:26px; }
.detail-hero p { margin:0; font-size:12px; }
.detail-hero>strong { position:absolute; right:20px; bottom:20px; font-size:43px; }
.detail-hero .rarity-name { text-align:left; }
.attributes { display:grid; grid-template-columns:1fr 1fr; gap:13px; padding:19px; }
.attributes>div { display:grid; grid-template-columns:1fr auto; gap:5px; font-size:12px; }
.attributes i { grid-column:1/-1; height:5px; background:#26354b; border-radius:99px; overflow:hidden; }
.attributes i::after { content:""; display:block; width:var(--value); height:100%; background:linear-gradient(90deg,var(--gold),#2dd4bf); border-radius:inherit; }
.detail-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.detail-stats span { padding:12px 5px; background:#111d2d; text-align:center; }
.detail-stats small,.detail-stats b { display:block; }
.detail-stats small { color:var(--muted); font-size:9px; }
.detail-value { display:flex; justify-content:space-between; padding:18px 20px 23px; }
.detail-value span { color:var(--muted); }
.detail-value strong { color:var(--gold); }
.match-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:16px; margin-bottom:14px; }
.match-controls label { color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.pitch {
  position:relative;
  min-height:510px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  gap:10px;
  padding:24px 11px;
  border:3px solid #dff6df99;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 51px,#ffffff70 52px 54px,transparent 55px),
    linear-gradient(0deg,transparent 49.7%,#ffffff70 49.8% 50.2%,transparent 50.3%),
    repeating-linear-gradient(0deg,#267447 0 62px,#2d7e4e 62px 124px);
  box-shadow:inset 0 0 0 3px #18633a,0 14px 30px #0006;
  overflow:hidden;
}
.positional-pitch::before,.positional-pitch::after {
  content:"";
  position:absolute;
  z-index:1;
  left:30%;
  width:40%;
  height:11%;
  border:3px solid #ffffff70;
}
.positional-pitch::before { top:-3px; border-top:0; }
.positional-pitch::after { bottom:-3px; border-bottom:0; }
.pitch-row { display:flex; justify-content:space-around; position:relative; z-index:2; }
.pitch-player { width:65px; text-align:center; color:white; }
.pitch-player i { display:grid; place-items:center; width:42px; height:42px; margin:auto; border:2px solid white; border-radius:50%; background:#10213a; font-style:normal; font-size:11px; font-weight:950; box-shadow:0 4px 9px #0007; }
.pitch-player span { display:block; margin-top:3px; padding:3px; border-radius:5px; background:#07111dcc; font-size:9px; overflow:hidden; text-overflow:ellipsis; }
.pitch-player.empty i { border-style:dashed; opacity:.65; }
.lineup-role { margin-top:24px; }
.lineup-role h2 { font-size:15px; color:var(--muted); }
.tiny-photo { width:42px; height:42px; border-radius:50%; }
.select-player { grid-template-columns:20px 42px 1fr 35px; }
.lineup-actions { position:sticky; z-index:10; bottom:82px; display:grid; grid-template-columns:1fr 2fr; gap:8px; padding-top:14px; }
@media(min-width:700px) {
  .fut-card { flex-basis:195px; }
  .card-reveal .fut-card,.card-reveal.covered { min-height:290px; }
  .pitch { max-width:590px; margin-inline:auto; }
}