/* ================= FIFA card ================= */
.card{width:var(--w,240px);height:calc(var(--w,240px)*1.54);align-self:start;position:relative;perspective:1100px;container-type:inline-size;flex:none;-webkit-user-select:none;user-select:none}
.card.featured{--w:var(--fw);cursor:pointer;touch-action:none}
.card.squad{--w:clamp(104px,26vw,150px)}
.card.podium{--w:clamp(96px,22vw,150px)}
.card.reveal{--w:min(280px,64vw,44vh)}
.card-rot{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--lift,0)*1px)) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc((var(--ry,0) + var(--flip,0))*1deg))}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-clip-path:var(--shape);clip-path:var(--shape);background:var(--rim);overflow:hidden}
.face::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.8;
  background:linear-gradient(115deg,#ffd1e8,#c8f2ff 18%,#e4ffd0 34%,#fff1c2 50%,#e3d0ff 66%,#ffd1e8 82%);
  background-size:320% 320%;background-position:calc(var(--px,50)*1%) calc(var(--py,50)*1%)}
.face.back{transform:rotateY(180deg)}
.rim{position:absolute;inset:.85% 1.2%;-webkit-clip-path:var(--shape);clip-path:var(--shape);background:rgba(8,10,24,.55);z-index:1}
.art{position:absolute;inset:1.6% 2.25%;-webkit-clip-path:var(--shape);clip-path:var(--shape);background:var(--art);overflow:hidden;z-index:2}
.theme-art{position:absolute;inset:0;width:100%;height:100%}
.inline{position:absolute;inset:2.2% 3.2%;width:93.6%;height:95.6%;z-index:3;pointer-events:none;overflow:visible}
.inline polygon{fill:none;stroke:var(--acc);stroke-opacity:.75;stroke-width:1.1px;vector-effect:non-scaling-stroke}
.spot{position:absolute;left:16%;top:3%;width:88%;height:58%;background:radial-gradient(ellipse at 50% 42%,var(--glow),transparent 66%)}
.portrait{position:absolute;left:var(--pl,19%);top:3%;width:calc(99% - var(--pl,19%));height:55.5%;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
  filter:drop-shadow(0 1.2cqw 2cqw rgba(0,0,0,.35)) brightness(1.04) saturate(1.06)}
.plate{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to bottom,transparent,var(--plate) 22%)}
.foil{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:calc(.08 + var(--hyp,0)*.45);pointer-events:none;
  background:
    repeating-linear-gradient(115deg,hsl(330 90% 72%) 0%,hsl(45 95% 72%) 5%,hsl(160 85% 66%) 10%,hsl(205 90% 70%) 15%,hsl(275 85% 74%) 20%,hsl(330 90% 72%) 25%),
    repeating-linear-gradient(45deg,#0e152e 0%,hsl(180 10% 60%) 3.8%,hsl(180 29% 66%) 4.5%,hsl(180 10% 60%) 5.2%,#0e152e 10%,#0e152e 12%);
  background-size:300% 300%,220% 220%;background-blend-mode:hard-light;
  background-position:calc(var(--px,50)*1%) calc(var(--py,50)*1%),calc(100% - var(--px,50)*1%) calc(100% - var(--py,50)*1%);
  filter:brightness(.75) contrast(1.35) saturate(1.1)}
.glitter{position:absolute;inset:0;mix-blend-mode:color-dodge;pointer-events:none;opacity:calc(.1 + var(--hyp,0)*.6);
  background-image:var(--g1),var(--g2);background-size:34% auto,23% auto;
  background-position:calc(var(--px,50)*.4%) calc(var(--py,50)*.4%),calc(100% - var(--px,50)*.7%) calc(100% - var(--py,50)*.7%);
  -webkit-mask-image:radial-gradient(circle at calc(var(--px,50)*1%) calc(var(--py,50)*1%),#000 0%,transparent 58%);mask-image:radial-gradient(circle at calc(var(--px,50)*1%) calc(var(--py,50)*1%),#000 0%,transparent 58%)}
.glare{position:absolute;inset:0;pointer-events:none;z-index:6;mix-blend-mode:overlay;opacity:calc(.3 + var(--hyp,0)*.6);
  background:radial-gradient(farthest-corner circle at calc(var(--px,50)*1%) calc(var(--py,50)*1%),rgba(255,255,255,.55) 8%,rgba(255,255,255,.14) 26%,transparent 62%)}
.glare::after{content:"";position:absolute;inset:-20%;mix-blend-mode:soft-light;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 49%,transparent 60%);transform:translateX(calc((var(--px,50) - 50)*1.6%))}
.back .glare{background:radial-gradient(farthest-corner circle at calc(100% - var(--px,50)*1%) calc(var(--py,50)*1%),rgba(255,255,255,.45) 8%,transparent 55%)}
.content{position:absolute;inset:0;z-index:5;color:var(--ink);font-family:var(--font-fifa);text-shadow:var(--ts)}
.ovr{position:absolute;left:8%;top:9%;width:22%;display:flex;flex-direction:column;align-items:center;line-height:.86}
.ovr b{font-size:21cqw;font-weight:700;letter-spacing:-.01em}
.ovr .pos{font-size:8.6cqw;font-weight:700;margin-top:.4cqw}
.ovr .icon{width:8cqw;height:8cqw;margin-top:2cqw;color:var(--ink)}
.name{position:absolute;top:57.4%;left:4%;right:4%;text-align:center;font-size:12cqw;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.005em}
.stats{position:absolute;top:66.4%;left:6%;right:6%;display:grid;grid-template-columns:repeat(6,1fr);text-align:center}
.st{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.st span{font-size:4.4cqw;font-weight:700;line-height:1.04;letter-spacing:.02em;opacity:.95}
.st b{font-size:10.4cqw;font-weight:700;line-height:1}
.badges{position:absolute;top:83.4%;left:6%;right:6%;display:flex;align-items:center;justify-content:center;gap:2.4cqw}
.badges .flag{width:8.4cqw;height:5.6cqw;border-radius:.6cqw;flex:none;box-shadow:0 0 0 .3cqw rgba(0,0,0,.25)}
.badges .nick{font-family:var(--font-ui);font-size:3.5cqw;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--ink);text-shadow:var(--ts)}
.badges .suit{width:6.6cqw;height:6.6cqw;border-radius:50%;display:grid;place-items:center;background:#fbf6ea;color:#18120a;font-size:4.2cqw;font-family:var(--font-ui);font-weight:900;text-shadow:none;flex:none}
.badges .suit.red{color:#d81f3f}
@container (max-width:170px){
  .stats,.badges{display:none}
  .ovr{left:7%;top:9%}
  .ovr b{font-size:24cqw}
  .ovr .pos{font-size:10cqw}
  .ovr .icon{display:none}
  .portrait{left:calc(var(--pl,19%) - 3%);width:calc(102% - var(--pl,19%));height:66%}
  .name{top:auto;bottom:15%;font-size:15cqw}
  .plate{height:36%}
}
/* card back */
.bk{background:var(--art)}
.bk .guilloche{position:absolute;inset:0;width:100%;height:100%;color:var(--acc);opacity:.45}
.bk-content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;padding:10% 9% 0;color:var(--ink);text-align:center;text-shadow:var(--ts)}
.bk-kicker{margin:0;font-family:var(--font-fifa);font-size:5.4cqw;letter-spacing:.08em}
.bk-emblem{width:20cqw;height:20cqw;border-radius:50%;display:grid;place-items:center;margin:3cqw 0 2cqw;background:radial-gradient(circle at 35% 30%,#fffdf6,#efe2c2 60%,#c7ab6b);color:#18120a;box-shadow:0 0 0 .8cqw rgba(0,0,0,.25),0 0 0 1.4cqw var(--acc);text-shadow:none}
.bk-emblem span{font-family:var(--font-fifa);font-size:9cqw;font-weight:700;padding-top:1cqw}
.bk-emblem .red{color:#d81f3f}
.bk-name{margin:0;font-family:var(--font-fifa);font-size:11cqw;line-height:1}
.bk-title{margin:1cqw 0 2.4cqw;font-family:var(--font-serif);font-style:italic;font-size:4.8cqw}
.spark{width:86%;height:auto;overflow:visible}
.spark .zero{stroke:currentColor;stroke-opacity:.4;stroke-width:.4;stroke-dasharray:1.4 1.4}
.spark polyline{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--acc)}
.spark text{font-size:3.6px;fill:currentColor;opacity:.8;font-family:var(--font-ui)}
.bk-rec{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;width:86%;margin:2.6cqw 0 0}
.bk-rec div{background:rgba(0,0,0,.3);border-radius:2cqw;padding:1.6cqw 0}
.bk-rec dt{font-size:3cqw;letter-spacing:.1em;opacity:.85;text-transform:uppercase;font-family:var(--font-ui);font-weight:700}
.bk-rec dd{margin:0;font-family:var(--font-fifa);font-size:7.6cqw;font-weight:700}
.bk-counter{margin:2.6cqw 0 0;font-size:3.9cqw;line-height:1.4;max-width:86%;font-family:var(--font-ui);font-weight:600}
.bk-counter b{color:var(--acc)}

/* themes: rim metal, art, ink, accent, plate, glow */
[data-theme]{--ts:0 .25cqw 0 rgba(0,0,0,.45),0 0 2.4cqw rgba(0,0,0,.35)}
[data-theme="toty"]{--rim:linear-gradient(135deg,#fbe9ad,#b98a2e 30%,#fff3c8 50%,#a77a22 70%,#f5dc8f);--art:radial-gradient(circle at 55% 30%,#3f74ea 0%,#1a3ca6 34%,#0b1f62 68%,#071443);--ink:#f3dca2;--acc:#f0c766;--plate:rgba(8,20,70,.9);--glow:rgba(120,170,255,.55)}
[data-theme="crimson"]{--rim:linear-gradient(135deg,#ffe0a8,#b8863a 30%,#fff1cf 50%,#9a6a22 70%,#f1d08e);--art:linear-gradient(160deg,#9b1428,#5a0a17 50%,#2a0409);--ink:#ffe2ad;--acc:#f4c56c;--plate:rgba(52,5,14,.9);--glow:rgba(255,120,110,.5)}
[data-theme="marble"]{--rim:linear-gradient(135deg,#fff,#b7b7c3 30%,#f3e4b2 50%,#9a9aa8 70%,#fff);--art:radial-gradient(circle at 30% 20%,#fff,#ececf2 50%,#d4d4de);--ink:#3a2d12;--acc:#b8902f;--plate:rgba(244,243,248,.92);--glow:rgba(255,236,190,.9);--ts:0 .25cqw 0 rgba(255,255,255,.8)}
[data-theme="dna"]{--rim:linear-gradient(135deg,#c8fff1,#2f9c8a 30%,#e9fffa 50%,#1d6b5e 70%,#a9f0df);--art:radial-gradient(circle at 60% 30%,#138273,#073d36 60%,#021a16);--ink:#dcfff4;--acc:#4ff3cc;--plate:rgba(3,34,29,.9);--glow:rgba(80,255,210,.4)}
[data-theme="party"]{--rim:linear-gradient(135deg,#ffd0f0,#d0368f 30%,#fff0fa 50%,#a01c6b 70%,#ffb3e0);--art:linear-gradient(170deg,#ffb0dc,#ff5aa8 55%,#d92a80);--ink:#fff;--acc:#ffe26a;--plate:rgba(140,14,80,.88);--glow:rgba(255,255,255,.6);--ts:0 .25cqw 0 rgba(90,0,50,.55),0 0 2.4cqw rgba(90,0,50,.4)}
[data-theme="neon"]{--rim:linear-gradient(135deg,#e9d4ff,#7b3fe4 30%,#f6eaff 50%,#4b1fa8 70%,#d2b0ff);--art:linear-gradient(180deg,#140a3a,#22105a 60%,#341272);--ink:#f1e6ff;--acc:#5ef2ff;--plate:rgba(16,6,44,.9);--glow:rgba(150,110,255,.55)}
[data-theme="prism"]{--rim:linear-gradient(135deg,#e6f0ff,#9aa7d9 25%,#ffe0f4 45%,#b7fff0 60%,#a59bd8 80%,#f0e8ff);--art:radial-gradient(circle at 50% 30%,#4b38b0,#22175e 55%,#0e0930);--ink:#f4edff;--acc:#cbb9ff;--plate:rgba(18,11,52,.9);--glow:rgba(200,180,255,.5)}
[data-theme="marble"] .bk{--art:linear-gradient(160deg,#3a3646,#17141f);--ink:#f4efe4;--ts:0 .25cqw 0 rgba(0,0,0,.5)}