:root{--bg:#0b0d10;--panel:#14171c;--panel2:#1a1e24;--line:rgba(255,176,32,.18);--txt:#e8e6df;--mut:#8d929a;--t:#ffb020;--y:#ffd23f;--ct:#5aa9ff;--red:#ff4b3a;--ui:"Rajdhani",system-ui,sans-serif;--hd:"Oswald",Impact,sans-serif;--mono:"JetBrains Mono",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--ui);font-size:17px;line-height:1.55;overflow-x:hidden;
cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke='%2300ff66' stroke-width='2'%3E%3Cpath d='M16 4v8M16 20v8M4 16h8M20 16h8'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.5' fill='%2300ff66'/%3E%3C/svg%3E") 16 16,crosshair}
a,button{cursor:inherit;color:inherit;text-decoration:none}
.grid-bg{position:fixed;inset:0;z-index:-2;background:linear-gradient(rgba(255,176,32,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,176,32,.04) 1px,transparent 1px) 0 0/48px 48px,radial-gradient(ellipse at 80% 10%,#2a1d08 0%,transparent 55%);animation:pan 40s linear infinite}
@keyframes pan{to{background-position:48px 48px,48px 48px,0 0}}
.vignette{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7))}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,2.5rem);background:rgba(11,13,16,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--hd);letter-spacing:.12em;font-size:1.05rem}.logo .ct{color:var(--t)}.logo .sep{color:var(--mut);margin:0 .3rem}
.nav nav{display:flex;gap:1.6rem}.nav nav a{font-weight:600;color:var(--mut);letter-spacing:.06em;transition:.2s}.nav nav a:hover{color:var(--y)}
.hud-time{font-family:var(--mono);font-size:.78rem;color:var(--y);display:flex;align-items:center;gap:.4rem}
.dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.25}}
.hero{min-height:100vh;max-width:1180px;margin:0 auto;padding:7rem 1.5rem 4rem;display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center}
.tag{font-family:var(--mono);font-size:.78rem;color:var(--t);letter-spacing:.14em;margin-bottom:1rem}
h1{font-family:var(--hd);font-size:clamp(3rem,8vw,6rem);line-height:1;letter-spacing:.02em}
h1 span{color:transparent;-webkit-text-stroke:2px var(--t);text-shadow:0 0 30px rgba(255,176,32,.35)}
.sub{color:var(--mut);margin:1.5rem 0 2rem;max-width:30em;font-size:1.1rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.6rem;font-family:var(--hd);letter-spacing:.12em;border:1px solid var(--t);color:var(--t);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:transform .15s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);background:rgba(255,176,32,.12);box-shadow:0 0 22px rgba(255,176,32,.35)}
.btn.primary{background:var(--t);color:#111}.btn.primary:hover{background:var(--y)}
.teams{margin-top:2.2rem;display:flex;align-items:center;gap:1rem;font-family:var(--hd);letter-spacing:.1em;font-size:.9rem}
.teams .t{color:var(--t);border-left:3px solid var(--t);padding-left:.6rem}.teams .c{color:var(--ct);border-right:3px solid var(--ct);padding-right:.6rem}.teams .vs{color:var(--mut)}
.radar{justify-self:center;width:min(380px,85vw);text-align:center}
.radar svg{width:100%;filter:drop-shadow(0 0 30px rgba(125,255,138,.15))}
.sweep{transform-origin:100px 100px;animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.enemy{animation:pulse 1s infinite}
.radar-cap{font-family:var(--mono);font-size:.7rem;color:var(--mut);margin-top:.6rem}
.section{max-width:1180px;margin:0 auto;padding:5rem 1.5rem}
.title{font-family:var(--hd);font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:.04em;margin-bottom:2.2rem;display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.title em{font-style:normal;color:var(--t);font-size:.7em;border:1px solid var(--t);padding:0 .4rem}
.title small{font-family:var(--mono);font-size:.75rem;color:var(--mut);letter-spacing:.14em}
.rank-row{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;margin-bottom:1.2rem}
.rank{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--line);padding:1.2rem 1.5rem}
.rank-badge{width:110px}.rank .label{display:block;font-size:.8rem;color:var(--mut)}.rank b{font-family:var(--hd);font-size:1.6rem;color:var(--y);display:block}.rank small{font-family:var(--mono);color:var(--mut)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--t);padding:1.2rem;display:flex;flex-direction:column;justify-content:center;transition:.2s}
.kpi:hover{box-shadow:0 0 24px rgba(255,176,32,.25);transform:translateY(-3px)}
.kpi span{font-size:.85rem;color:var(--mut);letter-spacing:.06em}.kpi b{font-family:var(--hd);font-size:2.3rem;color:var(--txt)}
.board{background:var(--panel);border:1px solid var(--line);font-family:var(--mono);font-size:.9rem}
.br{display:grid;grid-template-columns:2fr repeat(5,1fr);padding:.75rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s}
.br:hover{background:rgba(255,176,32,.06)}
.br.head{color:var(--mut);font-size:.75rem;letter-spacing:.1em;background:var(--panel2)}
.br.me{color:var(--y);background:rgba(255,176,32,.1);border-left:3px solid var(--t)}
.note{padding:.7rem 1.2rem;font-size:.72rem;color:var(--mut)}
.maps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.map{background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:.25s}
.map:hover{transform:translateY(-6px);border-color:var(--t);box-shadow:0 10px 30px rgba(255,176,32,.2)}
.map-art{height:170px;display:grid;place-items:center;position:relative;overflow:hidden}
.map-art span{font-family:var(--hd);font-size:2.2rem;letter-spacing:.2em;color:rgba(255,255,255,.9);text-shadow:0 4px 18px rgba(0,0,0,.7);z-index:1;transition:transform .3s}
.map:hover .map-art span{transform:scale(1.08)}
.map-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.15) 0 2px,transparent 2px 10px)}
.m1 .map-art{background:linear-gradient(160deg,#c9a46a,#7a5528 70%,#3a2a14)}
.m2 .map-art{background:linear-gradient(160deg,#d7b88a,#9a6b3a 60%,#2f3a4a)}
.m3 .map-art{background:linear-gradient(160deg,#a8613a,#5b2e1c 65%,#24170f)}
.map-info{padding:1.2rem}.map-info h3{font-size:1.3rem}.map-info p{color:var(--mut);font-size:.95rem;margin:.3rem 0 .8rem}.map-info small{font-family:var(--mono);font-size:.72rem;color:var(--mut)}
.wr{height:6px;background:#22262d;margin-bottom:.4rem}.wr i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--t),var(--y));transition:width 1.2s ease}
.map.in .wr i{width:var(--w)}
.arsenal{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.skin{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid rgba(255,255,255,.06);border-bottom:3px solid var(--rc);padding:1.2rem;transition:.25s;position:relative}
.skin:hover{transform:translateY(-6px);box-shadow:0 0 28px color-mix(in srgb,var(--rc) 45%,transparent)}
.r-cov{--rc:#eb4b4b}.r-cls{--rc:#d32ce6}.r-res{--rc:#8847ff}
.skin-art{height:110px;display:grid;place-items:center;background:radial-gradient(ellipse,color-mix(in srgb,var(--rc) 25%,transparent),transparent 70%);margin-bottom:.8rem}
.skin-art svg{width:90%;fill:#2b2f36;stroke:var(--rc);stroke-width:1.5;transition:transform .3s}
.skin:hover .skin-art svg{transform:rotate(-4deg) scale(1.06)}
.rar{font-family:var(--mono);font-size:.7rem;color:var(--rc)}.skin h3{font-size:1.15rem;margin:.2rem 0}.skin p{color:var(--mut);font-size:.9rem}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.clip{background:var(--panel);border:1px solid var(--line);padding:1.4rem;position:relative;overflow:hidden;transition:.25s}
.clip::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,210,63,.12) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s}
.clip:hover::before{transform:translateX(100%)}.clip:hover{border-color:var(--y)}
.clip b{font-family:var(--hd);font-size:2.4rem;color:var(--y);line-height:1}.clip h3{margin:.4rem 0 .2rem}.clip p{color:var(--mut);font-size:.95rem}.clip span{display:block;margin-top:.8rem;font-family:var(--mono);font-size:.7rem;color:var(--mut)}
.ach{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.ach span{padding:.45rem .9rem;border:1px solid var(--line);background:var(--panel);font-weight:600;transition:.2s}.ach span:hover{border-color:var(--t);color:var(--y);box-shadow:0 0 14px rgba(255,176,32,.3)}
.contact{text-align:center;background:var(--panel);border:1px solid var(--line);padding:3.5rem 1.5rem;position:relative}
.contact::before,.contact::after{content:"";position:absolute;width:24px;height:24px;border:2px solid var(--t)}
.contact::before{top:-1px;left:-1px;border-right:0;border-bottom:0}.contact::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.contact h2{font-family:var(--hd);font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:1.8rem}
.hint{margin-top:1rem;font-family:var(--mono);font-size:.72rem;color:var(--mut)}
footer{text-align:center;padding:2rem;font-family:var(--mono);font-size:.75rem;color:var(--mut);border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}.reveal[data-delay="2"]{transition-delay:.2s}.reveal[data-delay="3"]{transition-delay:.3s}
.hero .reveal{opacity:1;transform:none;animation:heroIn .7s ease both}.hero .reveal[data-delay="1"]{animation-delay:.15s}
@keyframes heroIn{from{opacity:.001;transform:translateY(16px)}}
@media(max-width:960px){.hero{grid-template-columns:1fr}.rank-row{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.arsenal{grid-template-columns:repeat(2,1fr)}.maps,.hl{grid-template-columns:1fr}.nav nav{display:none}}
@media(max-width:520px){.arsenal{grid-template-columns:1fr}.br{grid-template-columns:1.6fr repeat(5,1fr);font-size:.78rem;padding:.6rem .7rem}.hud-time{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none;transition:none}}
/* fix ghost button border */
.btn:not(.primary){clip-path:none;border-radius:2px}
/* ===== Luxury stats ===== */
.stats-lux{--gold:linear-gradient(135deg,#fff3b0,#ffc83d 45%,#a8650a)}
.lux-top{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.elite{position:relative;overflow:hidden;display:flex;align-items:center;gap:1.6rem;padding:2rem;background:radial-gradient(ellipse at 20% 30%,rgba(255,200,61,.18),transparent 60%),linear-gradient(160deg,#1d1709,#0e0c08);border:1px solid rgba(255,200,61,.45);box-shadow:0 0 50px rgba(255,180,40,.18),inset 0 0 40px rgba(255,200,61,.06)}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,240,180,.22) 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(120%)}}
.elite-badge{width:150px;flex-shrink:0;filter:drop-shadow(0 0 18px rgba(255,200,61,.55));animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.elite-info .label{font-size:.8rem;color:var(--mut)}
.gold-text{display:block;font-family:var(--hd);font-size:2.6rem;line-height:1.1;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.en{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:#c9a24a}
.premier{margin-top:1rem;display:inline-flex;align-items:center;gap:.7rem;padding:.4rem .9rem;border:1px solid rgba(255,200,61,.5);background:rgba(0,0,0,.35);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.premier span{font-family:var(--mono);font-size:.7rem;color:#c9a24a;letter-spacing:.15em}.premier b{font-family:var(--hd);font-size:1.6rem;color:#ffe08a;text-shadow:0 0 12px rgba(255,200,61,.6)}
.top{margin-top:.6rem;font-size:.9rem;color:var(--mut)}.top b{color:var(--y)}
.rings{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.ring{position:relative;background:var(--panel);border:1px solid var(--line);padding:1rem;display:grid;place-items:center;transition:.25s}
.ring:hover{border-color:var(--c);box-shadow:0 0 26px color-mix(in srgb,var(--c) 35%,transparent)}
.ring svg{width:120px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}.ring .trk{stroke:#23272e}
.ring .val{stroke:var(--c);stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;filter:drop-shadow(0 0 6px var(--c));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.9,.3,1)}
.ring.in .val{stroke-dashoffset:calc(326.7 * (1 - var(--p) / 100))}
.ring-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-in b{font-family:var(--hd);font-size:1.7rem}.ring-in span{font-size:.78rem;color:var(--mut)}
.career{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.cstat{background:linear-gradient(180deg,#191510,var(--panel));border:1px solid var(--line);border-top:2px solid #ffc83d;padding:1.1rem 1.2rem;transition:.25s}
.cstat:hover{transform:translateY(-3px);box-shadow:0 0 22px rgba(255,200,61,.25)}
.cstat span{font-size:.82rem;color:var(--mut)}.cstat b{display:block;font-family:var(--hd);font-size:2rem;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.trophies{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.tro{text-align:center;padding:1.2rem .8rem;background:var(--panel);border:1px solid var(--line);transition:.25s}
.tro svg{width:54px;height:54px;fill:none;stroke-width:2.5;stroke-linejoin:round;margin-bottom:.4rem}
.tro.gold svg{stroke:#ffc83d;filter:drop-shadow(0 0 8px rgba(255,200,61,.6))}.tro.silver svg{stroke:#d8dde6;filter:drop-shadow(0 0 6px rgba(220,230,240,.4))}.tro.bronze svg{stroke:#d08a4a;filter:drop-shadow(0 0 6px rgba(208,138,74,.4))}
.tro b{display:block}.tro span{font-size:.78rem;color:var(--mut)}
.tro:hover{transform:translateY(-4px) scale(1.03);border-color:#ffc83d}
.history{background:var(--panel);border:1px solid var(--line);font-family:var(--mono);font-size:.88rem}
.h-head{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;background:var(--panel2);color:var(--mut);font-size:.78rem;letter-spacing:.1em}
.form{display:flex;gap:.3rem}.form i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;font-size:.7rem;color:#111;font-weight:600}
.form .w,.match.win b{background:#7dff8a}.form .l,.match.loss b{background:var(--red)}
.match{display:grid;grid-template-columns:34px 1.4fr 1fr 1fr .8fr .7fr;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.05);border-left:3px solid transparent;transition:.15s}
.match.win{border-left-color:#7dff8a}.match.loss{border-left-color:var(--red)}
.match:hover{background:rgba(255,200,61,.06)}
.match b{width:26px;height:26px;display:grid;place-items:center;color:#111}
.mp{color:var(--txt);font-family:var(--ui);font-weight:600;font-size:1rem}.rt{color:var(--y)}.tg{color:#ffc83d;font-weight:600}
@media(max-width:960px){.lux-top{grid-template-columns:1fr}.career,.trophies{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.elite{flex-direction:column;text-align:center}.match{grid-template-columns:28px 1.2fr 1fr .9fr;font-size:.78rem}.match span:nth-child(5),.match .tg{display:none}}
