/* A Web — extras.css: glass, FIFA cards, badges, shop, memory wall, empty states, AI box */

/* ===== glassmorphism (desktop / strong devices only — phones keep the light solid look so they stay smooth) ===== */
html:not(.lite) body .nw,html:not(.lite) body .hw .box,html:not(.lite) .stats,html:not(.lite) body .box.post,html:not(.lite) body .box.mem,
html:not(.lite) body .cx .rooms,html:not(.lite) body .cx .cwin,html:not(.lite) body .box.shw{
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.3)!important;backdrop-filter:blur(12px) saturate(1.3)!important;
  border:1px solid rgba(255,255,255,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 40px -18px rgba(0,0,0,.65)!important}
html:not(.lite) body .cx .rooms .rlist .rr{border:1px solid transparent}
html:not(.lite) body .cx .rooms .rlist .rr:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

/* ===== empty states: animated SVG (astronaut in chat, bouncing ball elsewhere) ===== */
.empty:not(.sm)::before{content:"";display:block;width:110px;height:110px;margin:0 auto 10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cellipse cx='60' cy='106' rx='20' ry='4' fill='%23000' opacity='.35'%3E%3Canimate attributeName='rx' values='20;11;20' dur='1.1s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.5;1' keySplines='.3 .6 .6 1;.6 0 .7 .4'/%3E%3Canimate attributeName='opacity' values='.35;.15;.35' dur='1.1s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -52;0 0' dur='1.1s' repeatCount='indefinite' calcMode='spline' keyTimes='0;.5;1' keySplines='.3 .6 .6 1;.6 0 .7 .4'/%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 60 78;360 60 78' dur='2.2s' repeatCount='indefinite'/%3E%3Ccircle cx='60' cy='78' r='22' fill='%23fff' stroke='%231a1030' stroke-width='2.5'/%3E%3Cpolygon points='60,66 70,73 66,85 54,85 50,73' fill='%231a1030'/%3E%3Cpath d='M60 66V58M70 73l9-4M66 85l6 8M54 85l-6 8M50 73l-9-4' stroke='%231a1030' stroke-width='2.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
#ms .empty::before,.cwin .empty::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='22' r='2'%3E%3Canimate attributeName='opacity' values='1;.2;1' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='104' cy='30' r='1.6'%3E%3Canimate attributeName='opacity' values='.2;1;.2' dur='2.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='96' cy='96' r='2'%3E%3Canimate attributeName='opacity' values='1;.3;1' dur='1.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='20' cy='88' r='1.4'%3E%3Canimate attributeName='opacity' values='.3;1;.3' dur='2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -7;0 0' dur='3s' repeatCount='indefinite'/%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='-4 60 60;4 60 60;-4 60 60' dur='6s' repeatCount='indefinite'/%3E%3Crect x='22' y='60' width='18' height='11' rx='5.5' fill='%23e8e6f5' transform='rotate(-20 31 65)'/%3E%3Crect x='80' y='60' width='18' height='11' rx='5.5' fill='%23e8e6f5' transform='rotate(20 89 65)'/%3E%3Crect x='39' y='56' width='42' height='38' rx='14' fill='%23e8e6f5'/%3E%3Crect x='52' y='64' width='16' height='12' rx='3' fill='%237b3cff'/%3E%3Crect x='43' y='90' width='13' height='17' rx='6' fill='%23d4d1ea'/%3E%3Crect x='64' y='90' width='13' height='17' rx='6' fill='%23d4d1ea'/%3E%3Ccircle cx='60' cy='40' r='24' fill='%23f4f3fc'/%3E%3Crect x='45' y='29' width='30' height='22' rx='11' fill='%232a1a5e'/%3E%3Ccircle cx='53' cy='37' r='3.2' fill='%23fff' opacity='.7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

/* ===== FIFA-style cards ===== */
.fcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;justify-items:center}
.fcg.one{grid-template-columns:200px;justify-content:center}
.fcard{--b1:#e9c46a;--b2:#8a6a12;--tx:#2b1d00;position:relative;width:100%;max-width:200px;aspect-ratio:5/7.4;padding:12px 10px 10px;border:0;cursor:pointer;color:var(--tx);text-align:center;
  clip-path:polygon(50% 0,92% 6%,100% 16%,100% 88%,50% 100%,0 88%,0 16%,8% 6%);background:linear-gradient(160deg,var(--b1),var(--b2) 70%);display:flex;flex-direction:column;align-items:center;transition:transform .3s}
.fcard:hover{transform:translateY(-6px) scale(1.03)}
.fcard::after{content:"";position:absolute;inset:4px;clip-path:inherit;border:2px solid rgba(255,255,255,.45);pointer-events:none}
.fct{position:absolute;top:26px;left:20px;text-align:center;line-height:1}
.fct b{display:block;font:900 30px Outfit,sans-serif}.fct i{display:block;font:800 12px Outfit,sans-serif;font-style:normal}.fct small{display:block;margin-top:4px;font:700 9px Manrope,sans-serif}
.fph{width:74%;aspect-ratio:1/1.08;margin:12px 6px 4px auto;border-radius:0;overflow:hidden;background:none;display:grid;place-items:end center;font:800 34px Outfit,sans-serif;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.fph img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}
.fcard h4{margin:2px 0 6px;font:900 15px Outfit,sans-serif;text-transform:uppercase;max-width:86%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:80%;border-top:1px solid rgba(0,0,0,.3);padding-top:6px}
.fcl span{font:700 8px Manrope,sans-serif;letter-spacing:.4px}.fcl b{display:block;font:900 17px Outfit,sans-serif}
.fse{position:absolute;bottom:14px;font:900 8px Manrope,sans-serif;letter-spacing:2px}
.t-gold{--b1:#f6dc86;--b2:#a77d12;--tx:#2b1d00}.t-silver{--b1:#eef1f6;--b2:#7e8a9c;--tx:#1b2330}.t-bronze{--b1:#e0a574;--b2:#7a4318;--tx:#2a1405}
.t-special{--b1:#b58cff;--b2:#1c1252;--tx:#fff;background:linear-gradient(160deg,#b58cff,#4b22b8 45%,#0f0a36 80%),conic-gradient(from 90deg,#ff6bd6,#6bd6ff,#ffe36b,#ff6bd6)}
.t-special::after{border-color:#ffe36b}.t-special .fcl{border-color:rgba(255,255,255,.4)}
.tg{color:#e9c46a}.ts{color:#cfd6e2}.tb{color:#d08a4e}.tp{color:#b58cff}
/* pitch avatars as mini cards */
.fxc.fc .fxa{width:100%;height:auto;aspect-ratio:3/3.6;border-radius:9px 9px 16px 16px;border:2px solid var(--b1);background:linear-gradient(160deg,var(--b1),var(--b2));box-shadow:0 6px 14px rgba(0,0,0,.45)}
.fxc.fc .fxa img{border-radius:7px 7px 14px 14px;object-position:top;opacity:.95}
.fxc.fc .fcr{position:absolute;top:1px;left:4px;font:900 clamp(11px,3.4vw,15px) Outfit,sans-serif;font-style:normal;color:var(--tx);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.fxc.fc .fcs{position:absolute;left:0;right:0;bottom:0;padding:1px 0;border-radius:0 0 13px 13px;background:rgba(0,0,0,.68);color:#fff;font:700 clamp(7px,2vw,9px) Manrope,sans-serif;text-align:center;white-space:nowrap}
.fxc{width:clamp(66px,20vw,92px)}

/* ===== badges (profile pop-up) ===== */
.pbx{margin-top:6px}.bdg{display:flex;flex-wrap:wrap;gap:8px}
.bdg span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--soft);border:1px solid var(--line);font:700 12px Manrope,sans-serif}
.bdg i{font-style:normal;font-size:16px}
.ttl{font-style:normal;font:800 10px Manrope,sans-serif;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--g) 30%,transparent);border:1px solid color-mix(in srgb,var(--g) 60%,transparent);vertical-align:middle}

/* ===== coin chip + shop ===== */
#top .coinchip{flex:none;margin-inline-start:auto;padding:8px 13px;border-radius:99px;background:color-mix(in srgb,#ffd166 18%,transparent);border:1px solid #ffd166;color:var(--ink);font:800 13px Manrope,sans-serif;text-decoration:none;white-space:nowrap}
#top .coinchip~.bell{margin-inline-start:8px}
.shw{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-bottom:12px}
.shb0{font:900 44px Outfit,sans-serif;color:#ffd166}.shl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px 20px;flex:1;min-width:240px;font-weight:600}
.shl b{float:right}
.shg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.shi{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:18px;background:var(--soft);border:1px solid var(--line);text-align:center}
.shi.own{border-color:#38c172}.shp{min-height:46px;display:grid;place-items:center}.shbd{font-size:38px}.shbc{padding:8px 14px;border-radius:14px 14px 3px 14px;color:#fff;font-weight:700}
.shv{display:flex;align-items:center;gap:12px;padding:8px 0}.shv .shn{flex:1;position:relative}.shn small{margin-inline-start:8px;color:var(--mut)}
.shn i{display:block;height:6px;margin-top:5px;border-radius:9px;background:linear-gradient(90deg,var(--g) var(--w),var(--soft) var(--w))}.shv.me b{color:#ffd166}

/* ===== memory wall ===== */
.mmh{margin:30px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.mwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.mem{display:flex;flex-direction:column;gap:8px}.mem .mt{font:800 11px Manrope,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--g)}.mem time{color:var(--mut);font-size:12px}
.mem>img,.mem .vid{width:100%;border-radius:14px;max-height:340px;object-fit:cover}.mem h3{margin:0}.mtx{color:var(--mut);line-height:1.6}
.mtags{display:flex;flex-wrap:wrap;gap:6px}.mtg{border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:3px 10px;border-radius:99px;font:700 12px Manrope,sans-serif;cursor:pointer}
.mcm{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:6px}.mcm[hidden]{display:none}.mci{display:flex;gap:6px}.mci input{flex:1;min-width:0;border-radius:99px;padding:8px 14px}
.stats>.golink{cursor:pointer}.stats .gl{display:block;margin-top:4px;color:var(--g);font-weight:700}

/* ===== AI lineup advice ===== */
.fxai{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px;border:1px solid color-mix(in srgb,var(--g) 45%,var(--line))!important}
.fxaio{line-height:1.7;max-height:55vh;overflow:auto}

/* ===== admin tools inside the A.S.C shop ===== */
.shad{margin:0 0 14px;padding:14px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}
.shad h4{margin:0 0 10px}.shad summary{cursor:pointer;margin-bottom:8px}
.shar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.shar>*{flex:1 1 140px;min-width:0}.shar .btn,.shar .ttx{flex:none}
.shar label{display:flex;align-items:center;gap:8px;flex:none;font-weight:700}.shar input[type=color]{width:52px;height:40px;padding:2px;flex:none}
.shad .shv input[type=number]{width:84px;flex:none}