/* EVOLVE THE GAME — GOLDEN skin (20-Oct-2026).
 * The app inherits the home's canon: asfalto + spray halftone, lima/magenta/cian, Syne 800 + DM Sans + Caveat,
 * minimal cards (number on a spray line), no icons. Loaded AFTER each page's own <style>, so it only overrides.
 * Source of truth for the tokens: /landing (golden.css, evolve-halftone.js). */
:root{
  --asf:#0F0F0D; --asf2:#151512; --asf3:#1d1d19; --lin:rgba(244,239,227,.10); --lin2:rgba(244,239,227,.18);
  --crm:#F4EFE3; --mut:#a7a294; --lima:#A3E040; --mag:#FF2E9A; --cian:#3AACF8; --oro:#E8B931;
  --disp:'Syne','Arial Black',sans-serif; --txt:'DM Sans',system-ui,sans-serif; --mano:'EVOLVE Spray','Caveat',cursive; --mono:'DM Mono',ui-monospace,monospace;
}
body{background:#050504}
.evg{--bg:var(--asf);--s1:var(--asf2);--s2:var(--asf3);--s3:#262620;--ln:var(--lin);--gn:var(--lima);--gnt:var(--lima);--sf:var(--lima);--gd:var(--oro);--tx:var(--crm);--mu:var(--mut);--hi:#6f6b61;--lv:var(--mag);
  --sh:none;--shs:none;--shi:none;--shd:none;background:var(--asf);color:var(--crm);box-shadow:0 0 0 1px #000,0 0 80px rgba(0,0,0,.6)}
.app{background:var(--asf)}
.app:before{background:radial-gradient(120% 40% at 50% -6%,rgba(163,224,64,.10),transparent 60%)}
.app:after{background:none}

/* type */
.wm,.kick,.h1,.greet,.cav,.score,.orb .core b,.nav button.center span,.av,.ev .m{font-family:var(--disp)}
.greet{font-style:normal;font-weight:800;font-size:38px;letter-spacing:-.02em;text-transform:none}
.h1{font-style:normal;font-weight:800;letter-spacing:-.01em}
.dlabel{font:500 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--mut)}
.sub{color:var(--mut)}
.cav{font-family:var(--mano);font-style:normal;font-weight:700;font-size:24px;color:var(--mag)}

/* section kicker = number on a spray line, like the home pillars */
.kick{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--crm);margin:30px 2px 14px;display:grid;gap:10px}
.kick:before{width:40px;height:0;border-top:2px solid var(--kc,var(--lima));box-shadow:none;border-radius:0;background:none}

/* chips + bars */
.chip{background:var(--asf2);border:1px solid var(--lin);box-shadow:none;border-radius:3px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--crm);padding:8px 10px}
.chip b{font-weight:500!important}
.rankbar{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.rankbar .t{height:3px;background:var(--lin);box-shadow:none;border-radius:0}
.rankbar .t>i{background:linear-gradient(90deg,var(--cian),var(--lima));border-radius:0}

/* surfaces: flat asfalto blocks, hairline, small radius */
.card,.slot,.modo,.modepill,.nchip,.btn,.kit{background:var(--asf2);border:1px solid var(--lin);box-shadow:none;border-radius:6px;color:var(--crm)}
.modepill{font:500 13px/1.2 var(--txt);padding:14px 14px}
.modepill .go{font-family:var(--mono);color:var(--lima)}
.seg{background:var(--asf2);box-shadow:none;border:1px solid var(--lin);border-radius:6px}
.seg button{color:var(--mut);border-radius:4px}
.seg button.on{background:var(--lima);color:var(--asf);box-shadow:none}
.btn.gn{background:var(--lima);color:var(--asf);box-shadow:none;border:none;font-family:var(--disp);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.btn.gd{background:var(--oro);color:var(--asf);box-shadow:none;border:none}
.av{background:var(--asf3);border:1px solid var(--lin2);box-shadow:none;color:var(--lima)}
.sk{background:var(--asf2);border-color:var(--lin);color:var(--crm);box-shadow:none}
.sk.active{background:rgba(163,224,64,.12);border-color:var(--lima);color:var(--lima);box-shadow:none}
.sk.locked{background:var(--asf);color:var(--mut)}
.kit.eq,.modo.on{background:rgba(163,224,64,.10);border-color:var(--lima)}
.modo .ic{background:var(--asf3);box-shadow:none;color:var(--lima)}
.pulse{background:var(--lima)}
.live{background:var(--mag)}
.toast{background:var(--lima);color:var(--asf);border-radius:4px;font-weight:600}
.htag{background:rgba(15,15,13,.78);border:1px solid var(--lin2);color:var(--lima);box-shadow:none;border-radius:3px;font:500 10px/1 var(--mono);letter-spacing:.14em;backdrop-filter:blur(4px)}
.htag .d{background:var(--lima);box-shadow:0 0 8px var(--lima)}

/* the JUGAR hero: spray halftone under a black veil, like the home's "Evolve the Game" cover */
.hero{background:var(--asf);border:1px solid var(--lin);border-radius:8px;box-shadow:none;padding:34px 18px 22px;isolation:isolate}
.hero evolve-halftone{position:absolute;inset:0;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 50% 44%,rgba(15,15,13,.82),rgba(15,15,13,.55) 70%,rgba(15,15,13,.35))}
.hero .pitch,.hero .seal{display:none}
.orb .ring{border-color:var(--lima)}
.orb .core{background:var(--lima);box-shadow:0 0 0 6px rgba(163,224,64,.14),0 0 60px rgba(163,224,64,.35)}
.orb .core:before{display:none}
.orb .core b{font-style:normal;font-weight:800;font-size:30px;letter-spacing:.02em;color:var(--asf);text-shadow:none}
.orb .core s{font:500 9.5px/1 var(--mono);letter-spacing:.24em;color:var(--asf);margin-top:6px}
.hero .sub{color:var(--crm);opacity:.8}

/* nearby nodes: the real node with its picture, number on a spray line */
.row{gap:12px}
.ncard{flex:0 0 auto;width:188px;background:var(--asf2);border:1px solid var(--lin);border-radius:6px;overflow:hidden;color:var(--crm);text-decoration:none;display:grid}
.ncard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9)}
.ncard .nb{padding:11px 12px 12px;display:grid;gap:5px}
.ncard .nn{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--nc,var(--lima));border-top:2px solid var(--nc,var(--lima));padding-top:8px;width:max-content}
.ncard b{font:800 15px/1.1 var(--disp)}
.ncard .st{font-size:12px;color:var(--mut)}
.ncard .st em{font-style:normal;color:var(--nc,var(--lima))}

/* La Corona strip */
.crwn{background:var(--asf2);border:1px solid var(--lin);border-left:3px solid var(--oro);border-radius:6px;box-shadow:none}
.crwn .pr .t{height:3px;background:var(--lin);border-radius:0}
.crwn .pr .t>i{background:var(--oro);border-radius:0}
.crwn .go{font-family:var(--mono);color:var(--oro)}

/* bottom nav: words, not icons */
.nav{background:var(--asf);border-top:1px solid var(--lin);box-shadow:none;align-items:center;padding-top:4px}
.nav button img{display:none}
.nav button{padding:14px 0 12px;color:var(--mut)}
.nav button span{max-height:none;opacity:1;transform:none;color:var(--mut);font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:color .2s}
.nav button.on span{color:var(--crm);transform:none}
.nav button.on:after{background:var(--lima);filter:none;width:22px;height:2px;border-radius:0;bottom:4px}
.nav button.center span{font:800 13px/1 var(--disp);letter-spacing:.08em;color:var(--asf);background:var(--lima);padding:12px 16px;border-radius:40px;box-shadow:0 0 24px rgba(163,224,64,.3)}
.nav button.center.on:after{display:none}
.nav button.center:not(.on) span{background:transparent;color:var(--lima);box-shadow:inset 0 0 0 1.5px var(--lima)}

/* boot loader ends on asfalto, not on the old light grey */
#bootload .blscrim{background:linear-gradient(180deg,rgba(15,15,13,.45),rgba(15,15,13,0) 32%,rgba(15,15,13,.85) 74%,var(--asf))}
#bootload .bltip{font-family:var(--mano);font-size:26px;color:var(--lima)}
#bootload .blbar{height:3px;border-radius:0}#bootload .blbar>i{border-radius:0;box-shadow:none;background:linear-gradient(90deg,var(--cian),var(--lima),var(--mag))}

@media (prefers-reduced-motion:reduce){.orb,.orb .ring{animation:none}}
.ncard{cursor:pointer;position:relative}
.ncard:after{content:"HOY";position:absolute;top:8px;left:8px;font:500 9px/1 var(--mono);letter-spacing:.16em;padding:5px 6px;background:rgba(15,15,13,.8);color:var(--crm);border-radius:2px}
.ncard.evo:after{content:"EVOLUTION";background:var(--lima);color:var(--asf)}
.ncard:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
/* fit pass */
.orb .core b{font-size:24px;letter-spacing:.04em}
.nav button.center{overflow:visible}
.nav button.center span{display:inline-block;max-height:none;overflow:visible;line-height:1}
.orb{width:184px;height:184px;margin-top:22px}
.orb .core{inset:18px}
.orb .core b{font-size:22px;letter-spacing:.06em}
.ncard{align-content:start}.ncard .nb{align-content:start}

/* ── Squadra tab (20-Oct) ── */
.sqhead{display:flex;align-items:center;gap:14px;margin:14px 2px 2px}
.crest{flex:0 0 auto;width:64px;height:72px;display:grid;place-items:center;font:800 24px/1 var(--disp);color:var(--asf);background:var(--lima);clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%)}
.sqname{font-size:28px;line-height:1;margin-top:6px}
.sqmeta{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--mut);margin-top:8px;text-transform:uppercase}
.kick .cnt{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--lima);margin-left:6px}
.trece{display:grid;grid-template-columns:repeat(13,1fr);gap:5px}
.trece i{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--lin2)}
.trece i.on{background:var(--lima);border-color:var(--lima)}
.mano13{font:700 22px/1 var(--mano);color:var(--mag);margin:12px 2px 6px;transform:rotate(-1.5deg)}
.roster,.terr{display:grid;gap:0;border-top:1px solid var(--lin)}
.rrow,.trow{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--lin)}
.rrow .dor{width:34px;font:800 20px/1 var(--disp);color:var(--mut);font-variant-numeric:tabular-nums}
.rrow.cap .dor{color:var(--lima)}
.rn{flex:1;min-width:0;display:grid;gap:3px}
.rn b{font:700 14.5px/1.15 var(--txt)}
.rn span{font-size:12px;color:var(--mut)}
.on-dot,.off-dot{width:8px;height:8px;border-radius:50%}
.on-dot{background:var(--lima);box-shadow:0 0 8px var(--lima)}
.off-dot{border:1.5px solid var(--lin2)}
.invite{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1.5px dashed var(--lin2);border-radius:6px}
.invite .code{font:500 22px/1 var(--mono);letter-spacing:.12em;margin-top:8px;color:var(--crm)}
.trow img{width:64px;height:46px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.trow .tag{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kit{padding:14px 10px}
.kit .nm{font:700 12.5px/1.2 var(--txt);margin-top:8px}
.kit .tag{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--mut);margin-top:6px}
.sqlink{display:block;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lima);text-decoration:none;padding:20px 0 10px}
.sqname{font-size:clamp(20px,6.6vw,26px);overflow-wrap:anywhere}
.kick .cnt{margin-left:0}
.invite .code{white-space:nowrap;font-size:20px}
.nav button span{transition:none}

/* ── Jugador tab (20-Oct): street player card ── */
.pcard{position:relative;isolation:isolate;height:430px;margin-top:12px;border:1px solid var(--lin);border-radius:8px;overflow:hidden;background:var(--asf)}
.pcard evolve-halftone{position:absolute;inset:0;z-index:-2}
.pcard:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,15,13,.35),rgba(15,15,13,.2) 40%,rgba(15,15,13,.92) 82%)}
.pimg{position:absolute;left:50%;top:18px;height:640px;transform:translateX(-46%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));z-index:-1;pointer-events:none}
.povr{position:absolute;top:16px;left:16px;display:grid;gap:4px}
.povr b{font:800 54px/.9 var(--disp);color:var(--lima)}
.povr span{font:500 11px/1 var(--mono);letter-spacing:.2em;color:var(--crm);border-top:2px solid var(--lima);padding-top:7px;width:max-content}
.pname{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:6px}
.pn{font:800 34px/1 var(--disp);letter-spacing:-.01em}
.pn span{color:var(--lima)}
.stats{display:grid;gap:12px}
.stat{display:grid;grid-template-columns:96px 34px 1fr;align-items:center;gap:10px}
.stat .sl{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--crm);display:grid;gap:4px}
.stat .sl em{font:400 11px/1 var(--txt);font-style:normal;letter-spacing:0;color:var(--mut)}
.stat .sv{font:800 20px/1 var(--disp);font-variant-numeric:tabular-nums;text-align:right}
.sb{height:4px;background:var(--lin)}
.sb i{display:block;height:100%;background:linear-gradient(90deg,var(--cian),var(--lima))}
.logros{display:flex;flex-wrap:wrap;gap:8px}
.prog{display:grid;gap:10px}
.prog .pl{display:flex;justify-content:space-between;align-items:baseline}
.prog .pl b{font:800 18px/1 var(--disp)}
.prog .pl span{font:500 11px/1 var(--mono);color:var(--mut);letter-spacing:.08em}
.prog p{font-size:12.5px;color:var(--mut)}
.prog p b{color:var(--lima);font-weight:600}
.nextu{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px dashed var(--lin2);border-radius:6px}
.nextu b{flex:1;font:700 14px/1.2 var(--txt)}
.tgrp .th{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tgrp .th .pos{background:var(--lima);color:var(--asf);border-radius:2px;font:500 10px/1 var(--mono);padding:4px 6px}
.sk{border-radius:3px;font-size:12.5px}
.sk .lv{font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sk.can .lv{color:var(--lima)}
.pimg{transform:translateX(-22%);height:600px;top:28px}
.pcard:before{background:linear-gradient(90deg,rgba(15,15,13,.75),rgba(15,15,13,0) 55%),linear-gradient(180deg,rgba(15,15,13,0) 55%,rgba(15,15,13,.95) 88%)}
.pname{right:40%}

/* ── Futures + La Corona (20-Oct) ── */
.thead{margin:12px 2px 14px;display:grid;gap:6px}
.thead .h1{font-size:30px}
.bmap{border:1px solid var(--lin);border-radius:6px;background:var(--asf2);padding:6px}
.bmap svg{display:block}
.legend{display:flex;flex-wrap:wrap;gap:12px;padding:8px 8px 6px}
.legend span{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.legend span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.rows{display:grid;border-top:1px solid var(--lin)}
.frow{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--lin);cursor:pointer}
.frow .fn{width:44px;font:800 15px/1 var(--disp);color:var(--lima);flex:0 0 auto}
.frow .rw{font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--oro);white-space:nowrap}
.king{border:1px solid var(--lin);border-left:3px solid var(--oro);border-radius:6px;padding:14px;display:grid;gap:12px;background:var(--asf2)}
.king .kn{display:grid;gap:5px}.king .kn b{font:800 22px/1 var(--disp)}
.king .kq{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qrow{display:flex;align-items:center;gap:8px}
.qav{width:30px!important;height:30px!important;font-size:10px!important;margin:0!important;border:2px solid var(--asf)!important}
#queueBtn{width:auto;margin:0;padding:11px 16px;font-size:12px}
.livec{border:1px solid var(--lin);border-left:3px solid var(--mag);border-radius:6px;padding:12px;margin-bottom:10px;background:var(--asf2);display:grid;gap:12px}
.livec .lh{display:flex;justify-content:space-between;align-items:center}
.live{border-radius:2px;font:500 10px/1 var(--mono);letter-spacing:.12em;padding:6px 8px}
.livec .ls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.livec .ls b{font:700 13px/1.2 var(--txt)}.livec .ls b:last-child{text-align:right}
.livec .score{font:800 26px/1 var(--disp);font-style:normal}.livec .score em{font-style:normal;color:var(--mut);margin:0 6px}
.lb{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lb .btn{margin:0;padding:12px 8px;font-size:12px}
.tres{grid-template-columns:repeat(3,28px);margin:0 2px 12px}
.trow{cursor:pointer}
.nshead{display:flex;align-items:center;gap:12px;margin:8px 2px 14px}
.btn.back{width:42px;height:42px;margin:0;padding:0;font:500 18px/1 var(--mono)}
.nscover{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--lin);cursor:pointer}
.nscover img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.nstag{position:absolute;left:10px;bottom:10px;font:500 9.5px/1 var(--mono);letter-spacing:.12em;padding:7px 8px;background:rgba(15,15,13,.85);color:var(--crm);border-radius:2px}
.nscover.evo .nstag{background:var(--lima);color:var(--asf)}
#queueBtn,.lb .btn{white-space:nowrap;font-size:11.5px;letter-spacing:.04em}
.frow .fn{width:52px;font-size:14px}
.qrow .sub{white-space:nowrap}
html.demo #bootload{display:none}
#lineup .live,#lineup .chip,#match .live,#match .chip{white-space:nowrap;font-size:9.5px}
