/* A Web — boost.css. Load AFTER extras.css (last stylesheet). Page animations, loading skeleton, upcoming-match cards, captain mark, fantasy cards. */

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== every page slides in; short fade on phones ===== */
@keyframes bsIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bsFade{from{opacity:0}to{opacity:1}}
@keyframes bsPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
#app>*:not(.cx){animation:bsIn .45s cubic-bezier(.22,1,.36,1) both}
#app>*:nth-child(2){animation-delay:.05s}#app>*:nth-child(3){animation-delay:.1s}#app>*:nth-child(4){animation-delay:.15s}
#app>*:nth-child(5){animation-delay:.2s}#app>*:nth-child(n+6){animation-delay:.25s}
html.lite #app>*:not(.cx){animation:bsFade .18s ease both;animation-delay:0s!important}
@media(prefers-reduced-motion:reduce){#app>*,.upx,.fcg .fcard{animation:none!important}}

/* ===== loading skeleton (shows only if a page takes longer than ~0.2 s) ===== */
#app:empty{min-height:70vh}
#app:empty::before,#app:empty::after{content:"";display:block;border-radius:24px;
 background:linear-gradient(100deg,var(--soft) 35%,color-mix(in srgb,var(--ink) 10%,transparent) 50%,var(--soft) 65%) 100% 0/300% 100%;
 animation:bsSk 1.2s ease-in-out infinite,bsFade .25s .2s both}
#app:empty::before{height:150px;margin:18px 0 16px}
#app:empty::after{height:240px}
@keyframes bsSk{to{background-position:0 0}}

/* ===== smoother buttons, tabs and cards ===== */
.btn,button,.tp,.tabs>*{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s,border-color .25s,color .2s,opacity .2s}
.btn:active,.tabs button:active{transform:scale(.96)}
@media(hover:hover){html:not(.lite) .tp:hover,html:not(.lite) .tabs button:hover{transform:translateY(-2px)}}

/* ===== upcoming matches ===== */
.hup{margin:8px 0 28px}
.hup .sec{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hup .sec a{font:700 12px Manrope,sans-serif;color:var(--g)}
.upg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.upx{position:relative;padding:16px 16px 14px;border-radius:22px;overflow:hidden;border:1px solid var(--line);
 background:linear-gradient(150deg,color-mix(in srgb,var(--g) 20%,transparent),var(--soft) 62%);
 transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s;animation:bsPop .5s cubic-bezier(.22,1,.36,1) both}
.upx:nth-child(2){animation-delay:.07s}.upx:nth-child(3){animation-delay:.14s}.upx:nth-child(4){animation-delay:.21s}.upx:nth-child(n+5){animation-delay:.28s}
@media(hover:hover){.upx:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--g) 60%,var(--line));box-shadow:0 18px 34px -18px var(--g)}}
.upt{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.uph{font:800 11px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.upw{font:800 11px Manrope,sans-serif;font-style:normal;padding:3px 11px;border-radius:99px;background:var(--g);color:#fff;white-space:nowrap}
.upw.live{background:#f4213a;animation:fxlv 1.4s ease-in-out infinite}
.upv{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:center}
.ups{flex:1;min-width:0;display:grid;justify-items:center;gap:6px}
.ups>img,.ups>i{width:56px;height:56px;border-radius:50%}
.ups>img{object-fit:cover;background:var(--soft)}
.ups>i{display:grid;place-items:center;font:800 22px Outfit,sans-serif;font-style:normal;background:linear-gradient(135deg,var(--g),var(--v,#7b3cff));color:#fff}
.ups b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 14px Outfit,sans-serif}
.upvs{font:900 15px Outfit,sans-serif;color:var(--mut)}
.upd{margin:14px 0 0;text-align:center;color:var(--mut);font-size:12.5px}
html:not(.lite) .upx::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%) 130% 0/260% 100%;animation:bsShine 5s ease-in-out infinite}
.upm{animation:bsPop .5s cubic-bezier(.22,1,.36,1) both}

/* ===== team captain ===== */
.cptn,.fcap{display:inline-grid;place-items:center;width:20px;height:20px;margin-inline-start:6px;vertical-align:middle;border-radius:50%;
 background:#ffd166;color:#1a1030;font:900 11px/1 Outfit,sans-serif;font-style:normal;box-shadow:0 0 10px #ffd16699}
.tcap{display:flex;align-items:center;gap:8px;margin:6px 0 2px;color:var(--mut)}.tcap .cptn{margin:0}
.tcb{border:0;background:none;padding:0;color:var(--ink);font:800 14px Manrope,sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--g) 60%,transparent)}

.mcd .fcap{position:absolute;top:2px;right:2px;margin:0;width:15px;height:15px;font-size:9px;z-index:2}

/* ===== fantasy pitch: the full player card (same look as the Player cards page) ===== */
.fxc.fc2{--cw:104px;--k:.52;width:calc(var(--cw) + 8px)}
@media(max-width:560px){.fxc.fc2{--cw:76px;--k:.38}}
.fxc.fc2 .fxa{position:relative;display:block;width:var(--cw);height:calc(var(--cw)*1.48);border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;outline:0!important;font-size:0}
.fxc.fc2 .fcz{position:absolute;left:0;top:0;width:200px;transform:scale(var(--k));transform-origin:0 0;pointer-events:none;transition:filter .25s}
.fxc.fc2 .fcz .fcard{max-width:none;width:200px;cursor:inherit;animation:none;transform:none}
.fxc.fc2 .fcz .fcard:hover{transform:none}
.fxc.fc2.sel .fcz{filter:drop-shadow(0 0 3px #ffd166) drop-shadow(0 0 8px #ffd166)}
.fxc.fc2 .fxn{display:none}
.fxc.fc2 .fxv{margin-top:3px;border-radius:7px}
.fxc.fc2 .fxa u,.fxc.fc2 .fxa s{z-index:3;font-size:11px}
.fxc.fc2 .fxa u{top:2px;right:0}.fxc.fc2 .fxa s{bottom:auto;top:30px;left:-2px}
.fxc.fc2:hover{transform:translateY(-4px)}
.fxp{gap:14px}

/* ===== PLAYER CARDS v2 — rim + inner panel, feathered photo (no circles), everything scales with the card width (cqw) ===== */
.fcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 20px;justify-items:center}
.fcg.one{grid-template-columns:200px;justify-content:center}
.tg{color:#e9c46a}.ts{color:#cfd6e2}.tb{color:#d08a4e}.tp{color:#b58cff}
.fcg .fcard{animation:bsPop .5s cubic-bezier(.22,1,.36,1) both}
.fcg .fcard:nth-child(2){animation-delay:.04s}.fcg .fcard:nth-child(3){animation-delay:.08s}.fcg .fcard:nth-child(4){animation-delay:.12s}.fcg .fcard:nth-child(n+5){animation-delay:.16s}
.fxcard .fcg.one{margin:4px 0 8px}
.fxa .fcs img,.fxa .fcr img,.fcard img.emoji,.mcd img.emoji{width:1em;height:1em;border-radius:0;display:inline-block;vertical-align:-.15em}

.fcard{--rim:linear-gradient(145deg,#fff8d6,#d9a93a 38%,#fff0a0 55%,#8a6208);
 --pn:radial-gradient(90% 60% at 72% 20%,rgba(255,250,210,.95),transparent 65%),linear-gradient(175deg,#f3d474,#d9a93a 52%,#a97b14);--tx:#2b1d00;--sh:none;
 position:relative;display:block;width:100%;max-width:210px;aspect-ratio:200/296;padding:0;border:0;cursor:pointer;color:var(--tx);text-align:center;container-type:inline-size;
 clip-path:polygon(50% 0,89% 4.5%,100% 12%,100% 85%,50% 100%,0 85%,0 12%,11% 4.5%);background:var(--rim);
 transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s}
@media(hover:hover){.fcard:hover{transform:translateY(-8px) scale(1.04);filter:brightness(1.06) saturate(1.1)}}
.fcard:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* inner panel */
.fcard .fbg{position:absolute;inset:2.6cqw;clip-path:polygon(50% 0,89% 4.5%,100% 12%,100% 85%,50% 100%,0 85%,0 12%,11% 4.5%);background:var(--pn);z-index:0}
.fcard .fbg::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 3cqw,transparent 3cqw 7cqw)}
.fcard .fbg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.22))}
/* sheen */
.fcard::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) 140% 0/260% 100%;opacity:0}
html:not(.lite) .fcard:is(.t-gold,.t-special,.t-mvp,.t-boot,.t-hero)::before{opacity:1;animation:bsShine 3.6s ease-in-out infinite}
@keyframes bsShine{to{background-position:-40% 0}}

/* rating · position · team logo (left column) */
.fct{position:absolute;left:10cqw;top:20cqw;width:21cqw;display:grid;justify-items:center;gap:1.4cqw;line-height:1;z-index:2;text-shadow:var(--sh)}
.fct b{display:block;font:900 17.5cqw/.9 Outfit,sans-serif;letter-spacing:-.04em}
.fct i{display:block;width:100%;padding-bottom:2cqw;border-bottom:.7cqw solid color-mix(in srgb,var(--tx) 38%,transparent);font:800 6.2cqw Outfit,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.fct small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 4.4cqw Manrope,sans-serif}
.fct .tlg{display:block;width:14cqw;height:14cqw;margin:1cqw 0 0;padding:0;border-radius:0;object-fit:contain;background:none;box-shadow:none;filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45))}

/* player photo: soft rectangle, feathered on every edge — no circle, no frame */
.fph{position:absolute;right:5cqw;top:10cqw;width:66cqw;height:70cqw;z-index:1;margin:0;border-radius:0;overflow:hidden;background:none;display:grid;place-items:center;font:900 34cqw/1 Outfit,sans-serif;color:color-mix(in srgb,var(--tx) 30%,transparent);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 70%,transparent),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 70%,transparent),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect}
.fph img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:0}

/* name + stats */
.fcard h4{position:absolute;left:6cqw;right:6cqw;top:82cqw;margin:0;max-width:none;z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 9.4cqw/1.1 Outfit,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-shadow:var(--sh)}
.fcl{position:absolute;left:14cqw;right:14cqw;top:97cqw;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:auto;padding:2.6cqw 0 0;border-top:.7cqw solid color-mix(in srgb,var(--tx) 38%,transparent);text-shadow:var(--sh)}
.fcl span{font:800 3.6cqw Manrope,sans-serif;letter-spacing:.14em;color:color-mix(in srgb,var(--tx) 72%,transparent)}
.fcl span+span{border-left:.5cqw solid color-mix(in srgb,var(--tx) 25%,transparent)}
.fcl b{display:block;margin-bottom:.8cqw;font:900 11.5cqw/1 Outfit,sans-serif;color:var(--tx)}
.fse{position:absolute;left:0;right:0;bottom:12.5cqw;z-index:2;font:900 3.8cqw Manrope,sans-serif;font-style:normal;letter-spacing:.3em;text-indent:.3em;text-shadow:var(--sh)}
.fcard .fcap{position:absolute;top:10cqw;left:11cqw;right:auto;width:9.5cqw;height:9.5cqw;margin:0;font-size:5.2cqw;z-index:3}

/* ----- tiers ----- */
.t-gold{--rim:linear-gradient(145deg,#fff8d6,#d9a93a 38%,#fff0a0 55%,#8a6208);--pn:radial-gradient(90% 60% at 72% 20%,rgba(255,250,210,.95),transparent 65%),linear-gradient(175deg,#f3d474,#d9a93a 52%,#a97b14);--tx:#2b1d00}
.t-silver{--rim:linear-gradient(145deg,#fff,#a9b4c4 40%,#f4f7fb 58%,#6f7c90);--pn:radial-gradient(90% 60% at 72% 20%,rgba(255,255,255,.98),transparent 65%),linear-gradient(175deg,#e9eef6,#bcc6d6 52%,#8591a5);--tx:#1b2330}
.t-bronze{--rim:linear-gradient(145deg,#ffd9b4,#b8703a 40%,#f0b987 58%,#6f3a14);--pn:radial-gradient(90% 60% at 72% 20%,rgba(255,230,200,.9),transparent 65%),linear-gradient(175deg,#e8b185,#c27a40 52%,#8c5223);--tx:#2a1405}
.t-special{--rim:conic-gradient(from 30deg,#ff6bd6,#6bd6ff,#ffe36b,#b58cff,#ff6bd6);--pn:radial-gradient(90% 60% at 72% 20%,rgba(214,180,255,.7),transparent 65%),linear-gradient(170deg,#7a4be0,#3a1a96 50%,#12093a);--tx:#fff;--sh:0 .4cqw 1.4cqw rgba(0,0,0,.55)}
.t-mvp{--rim:conic-gradient(from 20deg,#fff,#ff7ae0,#7ae8ff,#fff3a0,#ff7ae0,#fff);--pn:radial-gradient(90% 60% at 72% 20%,rgba(255,190,242,.6),transparent 65%),linear-gradient(170deg,#ff7ae0,#9a2bd8 50%,#2a0636);--tx:#fff;--sh:0 .4cqw 1.4cqw rgba(0,0,0,.55)}
.t-boot{--rim:linear-gradient(145deg,#fff3b0,#ff9d2e 38%,#ffd35e 56%,#a12a00);--pn:radial-gradient(90% 60% at 72% 20%,rgba(255,236,160,.7),transparent 65%),linear-gradient(175deg,#ffb703,#e2531c 55%,#3a0c00);--tx:#fff;--sh:0 .4cqw 1.4cqw rgba(0,0,0,.6)}
.t-hero{--rim:linear-gradient(145deg,#e6fff3,#2fbf86 38%,#b8ffe0 56%,#04523a);--pn:radial-gradient(90% 60% at 72% 20%,rgba(190,255,225,.65),transparent 65%),linear-gradient(175deg,#5dffb0,#0a8f6a 52%,#032218);--tx:#fff;--sh:0 .4cqw 1.4cqw rgba(0,0,0,.6)}
.fcard:is(.t-special,.t-mvp,.t-boot,.t-hero) .fph{color:rgba(255,255,255,.4)}

/* ----- mini card (fantasy market) ----- */
.fxa.sm.mcw{width:48px;height:62px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.mcd{--rim:linear-gradient(145deg,#fff8d6,#d9a93a 40%,#8a6208);--pn:linear-gradient(175deg,#f3d474,#d9a93a 55%,#a97b14);--tx:#2b1d00;
 position:relative;display:block;width:48px;height:62px;color:var(--tx);text-align:left;background:var(--rim);
 clip-path:polygon(50% 0,89% 5%,100% 13%,100% 84%,50% 100%,0 84%,0 13%,11% 5%)}
.mcd::before{content:"";position:absolute;inset:2px;z-index:0;clip-path:inherit;background:var(--pn)}
.mcd::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) 140% 0/260% 100%;opacity:0}
html:not(.lite) .mcd:is(.t-gold,.t-special,.t-mvp,.t-boot,.t-hero)::after{opacity:1;animation:bsShine 3.6s ease-in-out infinite}
.mcd>b{position:absolute;z-index:2;top:9px;left:7px;font:900 14px/1 Outfit,sans-serif}
.mcd>i{position:absolute;z-index:2;top:24px;left:7px;font:800 7px Manrope,sans-serif;font-style:normal}
.mcd .mph{position:absolute;z-index:1;right:2px;bottom:7px;width:30px;height:38px;border-radius:0;overflow:hidden;display:grid;place-items:center;background:none;font:900 14px Outfit,sans-serif;
 -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 70%,transparent)}
.mcd .mph img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:0}
.mcd..mcd.t-special,.mcd.t-mvp,.mcd.t-boot,.mcd.t-hero{--tx:#fff}.mcd.mcd .fcap{position:absolute;z-index:3;top:1px;right:3px;margin:0;width:14px;height:14px;font-size:8px}

/* ===== AVATARS & LOGOS: no circles, no purple gradients ===== */
.av,.sxa,.fa,.acAv span,.tl,.ups>i{border-radius:28%!important}
.av,.sxa,.fa,.acAv span,.tl,.ups>i{background:color-mix(in srgb,var(--ink) 9%,var(--bg))!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.av:has(>img),.sxa:has(>img),.fa:has(>img),.acAv span:has(>img){background:none!important;border:0!important}
.av img,.sxa img,.fa img,.acAv img{border-radius:inherit!important}
header .av,#top .av{animation:none!important}
.acAv{border-radius:28%!important;border:0!important}
.fxa:not(.mcw){border-radius:28%;background:color-mix(in srgb,var(--ink) 9%,var(--bg));box-shadow:none;border:1px solid var(--line);color:var(--ink)}
.fxa:not(.mcw):has(>img){background:none;border:0}
.fxa img{border-radius:inherit}
/* team logos: show the logo itself */
.match img,img.tlogo,.ups>img{border-radius:0!important;object-fit:contain!important;background:none!important;border:0!important;box-shadow:none!important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
div.tlogo{border-radius:28%!important}
.sxa:has(>img[src]) img{object-fit:cover}

/* form arrow under the rating */
.fct .ftr{display:block;margin:.4cqw 0 .2cqw;padding:.5cqw 2cqw;border-radius:99px;background:rgba(0,0,0,.6);font:900 4.2cqw/1.1 Outfit,sans-serif;font-style:normal;letter-spacing:.02em;text-shadow:none}
.fct .ftr.up{color:#5dffb0}.fct .ftr.dn{color:#ff6b81}