:root{--bg:#070b14;--panel:#111a2b;--panel2:#18243a;--line:#24324d;--tx:#eef3ff;--mut:#8b9bb8;--acc:#19e68c;--acc2:#ffcf3d;--bad:#ff4d6d;
--r0:#9aa4b1;--r1:#3ddc84;--r2:#3b9bff;--r3:#b15cff;--r4:#ffb627;--r5:#ff3d6e;--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{min-height:100vh;background:radial-gradient(ellipse 60% 40% at 15% -5%,#2a4b8a55,transparent 70%),radial-gradient(ellipse 60% 40% at 85% -5%,#2a4b8a55,transparent 70%),linear-gradient(#0a1222,#070b14 40%)}
/* iOS opaque status band */
#topband{position:fixed;top:0;left:0;right:0;height:var(--sat);background:#070b14;z-index:1000}
button{font:inherit;color:inherit;border:0;cursor:pointer}
header{position:sticky;top:var(--sat);z-index:50;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0a1222ee;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.logo{font-weight:900;font-style:italic;letter-spacing:.5px;font-size:17px;line-height:1;text-transform:uppercase;background:linear-gradient(90deg,#fff,#19e68c);-webkit-background-clip:text;background-clip:text;color:transparent;flex:1;white-space:nowrap}
.pill{display:flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);padding:3px 8px;border-radius:20px;font-weight:700;font-size:13px}
.lvl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:conic-gradient(var(--acc) calc(var(--p)*1%),#24324d 0);position:relative}
.lvl::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0a1222;z-index:0}.lvl span{position:relative;z-index:1}
main{padding:12px 12px calc(140px + var(--sab));max-width:900px;margin:0 auto}
nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:#0a1222f5;border-top:1px solid var(--line);padding-bottom:var(--sab)}
nav button{flex:1;background:none;padding:8px 0 7px;font-size:10.5px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
nav button b{font-size:21px;line-height:1;filter:grayscale(.6)}nav button.on{color:#fff}nav button.on b{filter:none;transform:scale(1.12)}
nav button.on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.dot{position:absolute;top:4px;right:calc(50% - 18px);background:var(--bad);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;font-weight:800}
h2{margin:6px 0 10px;font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.4px}
h3{margin:14px 0 8px;font-size:15px;text-transform:uppercase;color:var(--mut);letter-spacing:.6px}
.panel{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:12px}
.btn{background:linear-gradient(180deg,#22f59b,#0fb56b);color:#04140b;font-weight:900;padding:10px 14px;border-radius:12px;box-shadow:0 4px 0 #0a7a48,0 6px 16px #19e68c33;text-transform:uppercase;letter-spacing:.3px;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0a7a48}.btn.sec{background:var(--panel2);color:var(--tx);box-shadow:0 3px 0 #0b1322;border:1px solid var(--line)}
.btn.gold{background:linear-gradient(180deg,#ffe27a,#f5a700);box-shadow:0 4px 0 #a86c00,0 6px 18px #ffb62744}.btn.red{background:linear-gradient(180deg,#ff7189,#e0244a);color:#fff;box-shadow:0 4px 0 #8f1129}
.btn:disabled{opacity:.4;filter:grayscale(1)}.btn.sm{padding:6px 10px;font-size:12px;border-radius:10px}
.row{display:flex;gap:8px;align-items:center}.grow{flex:1}.mut{color:var(--mut);font-size:13px}.center{text-align:center}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{background:var(--panel2);border:1px solid var(--line);padding:7px 12px;border-radius:20px;white-space:nowrap;font-weight:700;font-size:13px;color:var(--mut);position:relative}
.tabs button.on{background:var(--acc);color:#04140b;border-color:var(--acc)}
input,select{font:inherit;background:#0a1222;color:var(--tx);border:1px solid var(--line);border-radius:10px;padding:9px 10px;min-width:0}
.bar{height:8px;background:#0a1222;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#0fb56b,#22f59b);border-radius:6px;transition:width .6s}
.hero{position:relative;overflow:hidden;border-radius:18px;padding:16px;margin-bottom:12px;background:linear-gradient(180deg,#0f2a1a,#0a1a12);border:1px solid #1f5a3a}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 38px,#ffffff10 38px 40px);opacity:.6}
.hero::after{content:"";position:absolute;top:-60px;left:-20%;right:-20%;height:140px;background:radial-gradient(ellipse at 20% 0,#fff8 0,transparent 40%),radial-gradient(ellipse at 80% 0,#fff8 0,transparent 40%);animation:lights 4s ease-in-out infinite alternate}
@keyframes lights{from{opacity:.5}to{opacity:.95}}.hero>*{position:relative;z-index:1}
.goal{display:flex;gap:10px;align-items:center;padding:11px;border-radius:12px;background:#0a1222cc;border:1px solid var(--line);margin-top:8px;cursor:pointer;animation:slidein .4s both}
.goal:first-of-type{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset,0 0 18px #19e68c33}.goal b{font-size:22px}.goal .go{margin-left:auto;color:var(--acc);font-weight:900}
@keyframes slidein{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
/* ---------- CARD ---------- */
.card{--c1:#333;--c2:#999;--rc:var(--r0);position:relative;aspect-ratio:5/7;border-radius:10px;overflow:hidden;background:linear-gradient(155deg,var(--c1) 0 55%,var(--c2) 140%);border:2px solid var(--rc);box-shadow:0 4px 14px #0008,0 0 0 1px #0006 inset;cursor:pointer;font-size:10px;user-select:none;container-type:inline-size}
.card .ovr{position:absolute;top:4%;left:6%;font-weight:900;font-size:17cqw;line-height:.9;text-shadow:0 2px 3px #0009}.card .pos{position:absolute;top:22%;left:6%;font-weight:900;font-size:9cqw;background:#000a;padding:1px 4px;border-radius:4px}
.card .tm{position:absolute;top:5%;right:6%;font-weight:900;font-size:10cqw;opacity:.9;text-shadow:0 1px 2px #000}
.card svg{position:absolute;left:12%;right:12%;top:18%;width:76%}
.card .nm{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-weight:900;font-size:10.5cqw;text-transform:uppercase;padding:0 4px;line-height:1.05;text-shadow:0 2px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .rb{position:absolute;left:0;right:0;bottom:0;height:15%;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--rc);color:#000;font-weight:900;font-size:8.5cqw;text-transform:uppercase}
.card .ser{position:absolute;right:5%;bottom:17%;font-size:7cqw;font-weight:900;color:#fff;background:#000a;padding:0 3px;border-radius:3px}
.card.r1{--rc:var(--r1)}.card.r2{--rc:var(--r2);box-shadow:0 0 12px #3b9bff66,0 4px 14px #0008}.card.r3{--rc:var(--r3);box-shadow:0 0 16px #b15cff88,0 4px 14px #0008}
.card.r4{--rc:var(--r4);box-shadow:0 0 20px #ffb627aa,0 4px 14px #0008}.card.r5{--rc:#fff;border-color:transparent;box-shadow:0 0 24px #ff3d6ecc,0 4px 14px #0008}
.card.r3::after,.card.r4::after,.card.r5::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,transparent 60%);background-size:250% 100%;animation:holo 3s linear infinite;mix-blend-mode:overlay;pointer-events:none}
.card.r5::before{content:"";position:absolute;inset:-50%;background:conic-gradient(#ff3d6e,#ffb627,#3ddc84,#3b9bff,#b15cff,#ff3d6e);animation:spin 3s linear infinite;z-index:-1}
.card.r5{isolation:isolate}.card.r5 .rb{background:linear-gradient(90deg,#ff3d6e,#ffb627,#3ddc84,#3b9bff,#b15cff);color:#fff;text-shadow:0 1px 2px #000}
.card.r5>.inner{position:absolute;inset:2px;border-radius:8px;background:linear-gradient(155deg,var(--c1) 0 55%,var(--c2) 140%);z-index:-1}
@keyframes holo{from{background-position:150% 0}to{background-position:-100% 0}}@keyframes spin{to{transform:rotate(360deg)}}
.card.un{filter:grayscale(1) brightness(.35)}.card .cnt{position:absolute;top:4%;right:6%;top:auto;bottom:17%;left:5%;right:auto;background:#000c;border-radius:6px;padding:0 4px;font-weight:900;font-size:8cqw}
.card.sel{outline:3px solid var(--acc);outline-offset:2px}.card .chk{position:absolute;inset:0;background:#19e68c55;display:grid;place-items:center;font-size:30cqw}
/* ---------- packs ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pk{border-radius:16px;padding:12px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;position:relative}
.pkart{height:120px;border-radius:10px;position:relative;overflow:hidden;display:grid;place-items:center;font-weight:900;font-style:italic;font-size:20px;text-align:center;text-shadow:0 2px 4px #0008;animation:float 3s ease-in-out infinite}
.pkart::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff6 45%,transparent 60%);background-size:250% 100%;animation:holo 2.5s linear infinite}
@keyframes float{50%{transform:translateY(-4px)}}
.pk-bronze{background:linear-gradient(140deg,#7a4a24,#d79a63,#5b3214)}.pk-silver{background:linear-gradient(140deg,#7d8796,#e6ecf5,#59626f)}.pk-gold{background:linear-gradient(140deg,#a87400,#ffe27a,#8a5d00)}
.pk-position{background:linear-gradient(140deg,#0b5f3a,#22f59b,#06331f)}.pk-team{background:linear-gradient(140deg,#0b3a7a,#4aa3ff,#071f44)}.pk-elite{background:linear-gradient(140deg,#4a137a,#c27bff,#2a0848)}
.pk-mythic{background:conic-gradient(from 20deg,#ff3d6e,#ffb627,#3ddc84,#3b9bff,#b15cff,#ff3d6e)}.pk-hof{background:linear-gradient(140deg,#111,#ffb627,#111)}
.odds{font-size:11px;color:var(--mut);display:grid;grid-template-columns:auto auto;gap:0 8px}.odds b{font-weight:800}
.inv{position:absolute;top:-6px;right:-6px;background:var(--bad);border-radius:12px;padding:2px 8px;font-weight:900;font-size:12px;z-index:2;animation:pop 1s infinite alternate}
@keyframes pop{to{transform:scale(1.12)}}
/* ---------- overlay / open ---------- */
.ov{position:fixed;inset:0;z-index:200;background:#02040acc;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--sat) + 10px) 12px calc(var(--sab) + 10px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:14px;width:min(560px,100%);max-height:100%;overflow:auto}
.stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.bigpack{width:190px;height:270px;border-radius:14px;position:relative;box-shadow:0 20px 60px #000c;display:grid;place-items:center;font-size:26px;font-weight:900;font-style:italic;text-align:center;text-shadow:0 2px 6px #000}
.bigpack .strip{position:absolute;top:0;left:0;right:0;height:16%;background:inherit;border-bottom:2px dashed #fff8;border-radius:14px 14px 0 0;filter:brightness(1.2)}
.bigpack.shake{animation:shake .12s linear infinite}
@keyframes shake{25%{transform:translate(-4px,2px) rotate(-2deg)}50%{transform:translate(3px,-2px) rotate(1.5deg)}75%{transform:translate(-2px,-3px) rotate(-1deg)}}
.bigpack.tear .strip{animation:tear .5s ease-in forwards}@keyframes tear{to{transform:translate(160px,-220px) rotate(40deg);opacity:0}}
.bigpack.gone{animation:drop .5s ease-in forwards}@keyframes drop{to{transform:translateY(120vh) rotate(8deg)}}
.beam{position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax;background:repeating-conic-gradient(from 0deg,var(--bc,#fff3) 0 6deg,transparent 6deg 18deg);animation:spin 8s linear infinite;opacity:0;transition:opacity .5s;pointer-events:none}
.beam.on{opacity:.8}.flash{position:absolute;inset:0;background:radial-gradient(circle,var(--bc,#fff) 0,transparent 60%);opacity:0;pointer-events:none}.flash.go{animation:flash .9s ease-out}
@keyframes flash{15%{opacity:1}to{opacity:0}}
.walk{position:absolute;font-size:64px;font-weight:900;font-style:italic;text-shadow:0 0 30px var(--bc),0 4px 10px #000;animation:walk 1s ease-out both;letter-spacing:2px}
@keyframes walk{from{transform:scale(3);opacity:0}30%{transform:scale(1);opacity:1}80%{opacity:1}to{opacity:0;transform:scale(.9)}}
.fan{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:640px;perspective:900px;position:relative;z-index:2}
.flip{width:min(29vw,118px);aspect-ratio:5/7;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.9,.3,1.3);animation:deal .5s both}
@keyframes deal{from{transform:translateY(60vh) rotate(20deg) scale(.6);opacity:0}}
.flip .face,.flip .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip .face{transform:rotateY(180deg)}
.flip.open{transform:rotateY(180deg)}.flip .face .card{width:100%;height:100%}
.back{border-radius:10px;background:repeating-linear-gradient(45deg,#0f2a1a 0 8px,#123321 8px 16px);border:2px solid #19e68c;display:grid;place-items:center;font-size:30px;box-shadow:0 6px 18px #000a}
.back.hint4{border-color:var(--r4);box-shadow:0 0 24px var(--r4);animation:throb .6s infinite alternate}.back.hint5{border-color:var(--r5);box-shadow:0 0 30px var(--r5);animation:throb .4s infinite alternate}
.back.hint3{border-color:var(--r3);box-shadow:0 0 16px var(--r3)}
@keyframes throb{to{transform:scale(1.05)}}
.newtag{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotateY(180deg);background:var(--acc);color:#000;font-weight:900;font-size:10px;padding:1px 6px;border-radius:6px;z-index:3;backface-visibility:hidden}
.burst{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;animation:burst 1s ease-out forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.toast{position:fixed;left:50%;top:calc(var(--sat) + 60px);transform:translateX(-50%);z-index:400;background:#0a1222;border:1px solid var(--acc);padding:10px 16px;border-radius:12px;font-weight:700;box-shadow:0 10px 30px #000a;animation:toast 2.6s both;max-width:90vw;text-align:center}
.toast.bad{border-color:var(--bad)}@keyframes toast{0%{opacity:0;transform:translate(-50%,-14px)}10%,85%{opacity:1;transform:translate(-50%,0)}to{opacity:0}}
.ch{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:#0a1222aa;border:1px solid var(--line);margin-bottom:8px}.ch.ready{border-color:var(--acc);box-shadow:0 0 14px #19e68c33}.ch.done{opacity:.5}
.rw{font-size:12px;color:var(--acc2);font-weight:800}
.lb{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:#0a1222aa;border:1px solid var(--line);margin-bottom:6px}.lb .rk{width:32px;text-align:center;font-weight:900;font-size:18px}.lb.me{border-color:var(--acc)}
.lb .sc{margin-left:auto;font-weight:900;font-size:18px;color:var(--acc)}
.slot{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:#0a1222aa;border:1px solid var(--line);margin-bottom:6px;cursor:pointer}
.slot .card{width:54px;flex:none}.slot .sl{width:44px;font-weight:900;color:var(--mut)}.slot .empty{width:54px;aspect-ratio:5/7;border:2px dashed var(--line);border-radius:8px;display:grid;place-items:center;color:var(--mut);font-size:22px}
.slot .pts{margin-left:auto;text-align:right;font-weight:900;font-size:17px}.lock{color:var(--acc2);font-size:12px}
.needle{position:relative;height:46px;background:linear-gradient(90deg,#3a0d16,#18243a 20%,#18243a 80%,#3a0d16);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.needle .zone{position:absolute;top:0;bottom:0;background:linear-gradient(#22f59b,#0fb56b);box-shadow:0 0 16px #19e68c}.needle .nd{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 10px #fff}
.field{height:60px;border-radius:10px;background:repeating-linear-gradient(90deg,#14532d 0 10%,#166534 10% 20%);position:relative;overflow:hidden;margin:8px 0}.field .ball{position:absolute;top:22px;font-size:20px;transition:left .5s}
.opt{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:8px;font-weight:700}
.opt.good{background:#0f5a35;border-color:var(--acc)}.opt.badc{background:#5a0f1e;border-color:var(--bad)}
.timer{height:6px;background:var(--acc);border-radius:4px;transition:width linear}
.spark{display:flex;align-items:flex-end;gap:3px;height:70px}.spark div{flex:1;background:linear-gradient(var(--acc),#0fb56b);border-radius:3px 3px 0 0;position:relative;min-height:2px}.spark span{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--mut)}
.auth{max-width:380px;margin:8vh auto;text-align:center}.auth .logo{font-size:30px;display:block;margin-bottom:6px}
.auth input{width:100%;margin-bottom:10px;font-size:17px;text-align:center}
.cardbig{width:min(62vw,230px);margin:0 auto}
@media(min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.flip{width:130px}}
select{-webkit-appearance:none;appearance:none;background:#0a1222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b9bb8'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:26px;color:var(--tx)}
body{padding-top:var(--sat)}
/* Netlify free-tier badge (injected in production): keep it visible but lift it above the tab bar so it never blocks nav taps */
#nl-badge-frame{bottom:calc(62px + env(safe-area-inset-bottom))!important;top:auto!important;z-index:55!important}
/* ================= v1.1 card art ================= */
.card{background:#111;border-radius:9px}
.card>*{position:absolute}
.card .bg{inset:0;z-index:0}
.card .fbw{left:14%;right:14%;top:20%;z-index:2}.card .fbw svg{position:static;width:100%}
.card .fbw.fb{display:none}.card.noimg .fbw.fb{display:block}
.card .cut{left:-12%;width:124%;bottom:14%;z-index:2;filter:drop-shadow(0 3px 4px #000a);pointer-events:none}
.card .hex{top:3%;right:4%;width:22cqw;height:24cqw;z-index:5;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,#3a4660,#141b2b);display:grid;place-items:center;box-shadow:0 0 0 1px #000}
.card .hex span{font-weight:900;font-size:10.5cqw;color:#fff;text-shadow:0 1px 2px #000}
.card .hex.hot{background:linear-gradient(160deg,#ff5a6a,#c1121f 55%,#7a0010)}
.card .rb{z-index:6;height:12%;font-size:7cqw}
.card .cnt{z-index:7}.card .ser{z-index:7;bottom:14%}.card .chk{z-index:8}
.card.noimg .cut{display:none}
/* --- base --- */
.s-base .bg{background:radial-gradient(ellipse 45% 22% at 22% 0,#fff8,transparent 70%),radial-gradient(ellipse 45% 22% at 78% 0,#fff8,transparent 70%),repeating-linear-gradient(90deg,#0000 0 3px,#0002 3px 5px) 0 34%/100% 22% no-repeat,linear-gradient(170deg,var(--c1) 0 52%,color-mix(in srgb,var(--c1) 50%,#000) 75%,var(--c2) 140%)}
.s-base .bg::after{content:"";position:absolute;left:0;right:0;bottom:12%;height:30%;background:linear-gradient(#0000,#000c)}
.s-base .pos{top:5%;left:5%;z-index:5;font-size:8cqw}.s-base .tm{top:15%;left:6%;right:auto;z-index:5;font-size:7cqw}
.s-base .ovr{display:none}.s-base .nm{z-index:5;bottom:13%;font-size:10.5cqw;font-style:italic}
/* --- milestone (sky + stadium + giant outlined stat) --- */
.s-milestone .bg,.s-potw .bg{background:linear-gradient(#3d8fe0,#9fd0ff 45%,#d9efff 58%,#0000 58%),repeating-linear-gradient(90deg,color-mix(in srgb,var(--c1) 70%,#000) 0 2px,var(--c1) 2px 5px) 0 58%/100% 20% no-repeat,linear-gradient(#0000 78%,#2f7d32 78%,#3fa043)}
.s-milestone .big,.s-legend .big,.s-potw .big,.s-captain .big{top:13%;left:-2%;right:-2%;text-align:center;z-index:1;font-weight:900;font-style:italic;line-height:1;letter-spacing:-.04em;color:var(--c1);-webkit-text-stroke:.5cqw #fff;text-shadow:0 0 0 #fff,.8cqw .8cqw 0 color-mix(in srgb,var(--c1) 55%,#000),0 2cqw 4cqw #0007;font-family:Impact,"Arial Black",sans-serif}
.s-milestone .fn,.s-potw .fn,.s-rookie .fn,.s-captain .fn,.s-ghoul .fn,.s-legend .fn{top:5%;left:5%;right:28%;z-index:5;font-weight:900;font-style:italic;font-size:7.4cqw;line-height:1;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px #000c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-milestone .lab,.s-legend .lab{left:0;right:3%;bottom:30%;z-index:4;text-align:right;font-weight:900;font-style:italic;font-size:9.5cqw;color:#fff;text-shadow:0 2px 4px #000;line-height:1}
.s-milestone .ln,.s-legend .ln,.s-potw .ln,.s-rookie .ln,.s-captain .ln,.s-ghoul .ln{left:3%;right:3%;bottom:14.5%;z-index:4;text-align:right;font-weight:800;font-size:5.2cqw;color:#fff;text-shadow:0 1px 3px #000;line-height:1.15;text-transform:uppercase}
.s-milestone .cut,.s-legend .cut,.s-potw .cut,.s-captain .cut{bottom:22%}
.s-milestone .rb,.s-potw .rb{background:linear-gradient(90deg,var(--c1),color-mix(in srgb,var(--c1) 60%,#000));color:#fff}
/* --- award (art deco black + gold) --- */
.s-award .bg{background:radial-gradient(ellipse 60% 45% at 50% 40%,#5a4520,#120e08 70%),#0b0906;box-shadow:inset 0 0 0 1.6cqw #0b0906,inset 0 0 0 2cqw #c9a55a,inset 0 0 0 3.2cqw #0b0906,inset 0 0 0 3.5cqw #8a6d33}
.s-award .yr{top:2.5%;left:30%;right:30%;z-index:5;text-align:center;font:700 5.5cqw Georgia,serif;color:#2a1d07;background:linear-gradient(#f3dc9b,#b8913f);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);padding:.6cqw 0}
.s-award .awt{top:11%;left:7%;right:7%;z-index:1;text-align:center;font-family:Didot,"Bodoni 72","Playfair Display",Georgia,serif;font-weight:300;line-height:.92;letter-spacing:.02em;background:linear-gradient(#f6e7b5,#b8913f 70%,#7a5b23);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.95}
.s-award .cut{bottom:30%;left:-4%;width:108%}.s-award.noimg .fbw{top:28%}
.s-award .tro{bottom:23%;left:0;right:0;text-align:center;font-size:9cqw;z-index:3;filter:sepia(1) saturate(2) drop-shadow(0 0 2cqw #ffcf3d)}
.s-award .snm{bottom:21%;left:4%;right:4%;text-align:center;z-index:4;font:400 7.6cqw Georgia,serif;color:#f4ead0;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 4px #000}
.s-award .stm{bottom:17%;left:0;right:0;text-align:center;z-index:4;font:italic 4.8cqw Georgia,serif;color:#d7b56d}
.s-award .plate{bottom:12.5%;left:25%;right:25%;text-align:center;z-index:4;font:700 3.8cqw Georgia,serif;color:#2a1d07;background:linear-gradient(#f3dc9b,#b8913f);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);padding:.5cqw 0}
.s-award .rb{background:linear-gradient(90deg,#7a5b23,#f3dc9b,#7a5b23);color:#1a1205}
/* --- signature (white, embossed team, script) --- */
.s-signature .bg{background:radial-gradient(circle at 50% 35%,#fff,#e9edf2 70%,#d6dce4)}
.s-signature .emb{top:4%;left:-10%;right:-10%;text-align:center;z-index:1;font:900 58cqw/1 Impact,"Arial Black",sans-serif;color:#eef1f5;text-shadow:-.4cqw -.4cqw 0 #fff,.5cqw .5cqw .8cqw #b9c2cf;letter-spacing:-.05em}
.s-signature .cut{bottom:18%}
.s-signature .scr{left:2%;right:2%;bottom:20%;z-index:4;text-align:center;transform:rotate(-8deg);font-family:"Snell Roundhand","Brush Script MT","Segoe Script","Bradley Hand",cursive;font-size:15cqw;color:var(--c1);-webkit-text-stroke:.25cqw var(--c1);text-shadow:0 0 .6cqw #fff,0 0 1.2cqw #fff;white-space:nowrap;filter:saturate(1.4)}
.s-signature .scr sup{font-size:60%;margin-left:1cqw}
.s-signature .sst{top:4%;left:5%;z-index:5;font:800 4.6cqw sans-serif;letter-spacing:.15em;color:#6b7686}
.s-signature .gbar{bottom:12%;left:0;right:0;height:7%;z-index:5;display:flex;align-items:center;justify-content:center;background:#9aa3b0;color:#fff;font-weight:900;font-size:4.6cqw;white-space:nowrap;overflow:hidden}
.s-signature .rb{background:#fff;color:var(--c1);border-top:1px solid #ccd}
/* --- player of the week --- */
.s-potw .bg{background:repeating-linear-gradient(120deg,#0000 0 9cqw,color-mix(in srgb,var(--c2) 35%,#0000) 9cqw 10cqw),radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--c1) 80%,#fff),#0a1124 75%)}
.s-potw .rib{top:14%;left:0;right:0;z-index:4;text-align:center;font:900 italic 6cqw sans-serif;color:#0a1124;background:linear-gradient(90deg,#0000,#ffe14d 15%,#ffb627 85%,#0000);padding:.8cqw 0;letter-spacing:.06em}
.s-potw .big{top:22%;color:#ffe14d;-webkit-text-stroke:.5cqw #0a1124}
.s-potw .rb{background:linear-gradient(90deg,#ffb627,#ffe14d);color:#0a1124}
/* --- rookie rush --- */
.s-rookie .bg{background:repeating-linear-gradient(-25deg,#0000 0 4cqw,#ffffff22 4cqw 5cqw),linear-gradient(160deg,#00d68f,#0b6b4f 55%,var(--c1))}
.s-rookie .rkw{top:13%;left:4%;z-index:1;font:900 italic 21cqw/0.85 Impact,"Arial Black",sans-serif;color:#0000;-webkit-text-stroke:.5cqw #d8ff3d;opacity:.9}
.s-rookie .badge26{top:30%;left:5%;z-index:5;font:900 8cqw sans-serif;background:#d8ff3d;color:#06301f;border-radius:2cqw;padding:0 2cqw}
.s-rookie .cut{bottom:18%}.s-rookie .rb{background:#d8ff3d;color:#06301f}
/* --- team leaders --- */
.s-captain .bg{background:linear-gradient(135deg,var(--c1) 0 50%,var(--c2) 50% 54%,color-mix(in srgb,var(--c1) 55%,#000) 54%)}
.s-captain .big{color:var(--c2);-webkit-text-stroke:.5cqw #fff;opacity:.95}
.s-captain .cpatch{top:30%;left:5%;z-index:5;width:15cqw;height:15cqw;border-radius:50%;display:grid;place-items:center;font:900 10cqw Georgia,serif;color:var(--c1);background:var(--c2);box-shadow:0 0 0 1cqw #fff}
.s-captain .rb{background:var(--c2);color:#000}
/* --- gridiron ghouls --- */
.s-ghoul .bg{background:radial-gradient(circle at 70% 18%,#ffe6a8 0 9cqw,#ff9a1f 9.5cqw,#0000 16cqw),linear-gradient(170deg,#2a0b4d,#5a1a8a 45%,#ff6a00 120%)}
.s-ghoul .bat{position:absolute;font-size:7cqw;font-style:normal;animation:bat 3s ease-in-out infinite}.s-ghoul .b1{top:20%;left:12%}.s-ghoul .b2{top:12%;left:45%;animation-delay:-1.5s}
@keyframes bat{50%{transform:translate(3cqw,-2cqw) scale(1.1)}}
.s-ghoul .ghw{top:24%;left:0;right:0;text-align:center;z-index:1;font:900 21cqw/1 "Chiller","Creepster",Impact,sans-serif;color:#ff8a1f;text-shadow:0 0 3cqw #ff6a00,0 1.5cqw 0 #3b0a5e;letter-spacing:-.02em}
.s-ghoul .cut{bottom:18%;filter:drop-shadow(0 0 2cqw #ff6a00) saturate(1.1)}
.s-ghoul .pump{bottom:24%;left:4%;z-index:5;font-size:11cqw;animation:pop 1.2s infinite alternate}
.s-ghoul .rb{background:linear-gradient(90deg,#5a1a8a,#ff6a00);color:#fff}
/* --- legends (gold marble) --- */
.s-legend .bg{background:radial-gradient(circle at 30% 20%,#fff6d0,#0000 40%),conic-gradient(from 200deg at 60% 40%,#7a5b23,#f6e7b5,#b8913f,#5a4214,#f3dc9b,#7a5b23);box-shadow:inset 0 0 0 1.5cqw #1a1205,inset 0 0 0 2.2cqw #f3dc9b}
.s-legend .big{color:#1a1205;-webkit-text-stroke:.5cqw #f6e7b5;opacity:.85}
.s-legend .fn,.s-legend .lab,.s-legend .ln{color:#1a1205;text-shadow:0 1px 0 #fff8}
.s-legend .lgtag{top:13%;left:5%;z-index:5;font:900 5cqw Georgia,serif;letter-spacing:.2em;color:#f6e7b5;background:#1a1205;padding:.5cqw 2cqw;border-radius:1cqw}
.s-legend .fbw{filter:sepia(1) saturate(2.5) brightness(.9)}
.s-legend .rb{background:linear-gradient(90deg,#1a1205,#7a5b23,#1a1205);color:#f6e7b5}
/* shine on all special + high rarity */
.card[class*=" s-"]:not(.s-base)::after{content:"";position:absolute;inset:0;z-index:7;background:linear-gradient(115deg,transparent 35%,#ffffff40 47%,transparent 58%);background-size:260% 100%;animation:holo 4s linear infinite;mix-blend-mode:overlay;pointer-events:none}
/* walkout big card */
.walkcard{position:absolute;z-index:4;width:min(64vw,250px);animation:wcard 1.9s cubic-bezier(.2,.9,.3,1.2) both}
.walkcard .card{width:100%;box-shadow:0 0 60px var(--bc,#ffb627),0 20px 60px #000}
@keyframes wcard{0%{transform:scale(.2) rotateY(540deg);opacity:0}45%{transform:scale(1.08) rotateY(0);opacity:1}85%{transform:scale(1)}100%{transform:scale(1);opacity:1}}
.ov .stage>.walkcard[style]{animation-fill-mode:both}

/* v1.2 social */
.pill.unl{color:#ffd76a;text-shadow:0 0 8px #ffb62788}
.odot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#56606e;margin-right:6px;vertical-align:middle}.odot.on{background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.fitem{flex:none;width:92px;scroll-snap-align:start;cursor:pointer}.fitem.sm{width:72px}.fitem .card{width:100%}
.fl{display:flex;flex-direction:column;font-size:11px;line-height:1.3;margin-top:4px}
.prow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#0a1222aa;border:1px solid var(--line);margin-bottom:8px;cursor:pointer}
.prow .card,.prow .empty{width:58px;flex:none}.prow .go{font-size:22px;color:var(--mut)}
.modal.prof{max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 6px}
.st{background:#0a1222;border:1px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center}.st b{display:block;font-size:15px}.st span{font-size:10px;color:var(--mut)}
.rbar{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.fh{margin-top:6px;font-size:12px}
nav button{font-size:9.5px}

/* v1.2.2 avatars */
.av{--ac:#26324a;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffff33,transparent 60%),var(--ac);border:2px solid #ffffff30;font-weight:900;font-size:17px;color:#fff;overflow:hidden;flex:none;vertical-align:middle;line-height:1}
.av img{width:100%;height:100%;object-fit:cover}.av.xs{width:18px;height:18px;font-size:10px;border-width:1px}.av.sm{width:28px;height:28px;font-size:14px;margin-right:6px}.av.lg{width:48px;height:48px;font-size:24px;margin-right:4px}.av.xl{width:96px;height:96px;font-size:48px;border-color:var(--acc);box-shadow:0 0 18px #3ddc8455}
#hav{background:none;position:relative;padding:0;margin-right:6px;flex:none}#hav i{position:absolute;right:-3px;bottom:-3px;font-size:11px;font-style:normal;background:#0a1222;border-radius:50%;width:15px;height:15px;display:grid;place-items:center}
.avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.avb{background:none;padding:0;display:grid;place-items:center}.avb .av{width:44px;height:44px;font-size:22px}
.prow .av{margin-right:-4px}