/* economy : marché, boutique, talents, classement (styles propres à ce module ; les variables viennent de style.css) */

/* ---------- commun ---------- */
.eco-wallet{--c:var(--panel2);font-size:14px;padding:6px 14px;border:1px solid var(--gold);color:var(--gold)}
.linkbtn{color:var(--blue);text-decoration:underline;text-underline-offset:2px;font-weight:600;padding:0}
.linkbtn:hover{color:#8cc8ff}
.mk-h{font-size:22px;margin-bottom:12px}
.mk-emo{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#120e30;font-size:28px;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.note.warn{color:var(--red2);border-color:var(--red2)}
.chip.f small{opacity:.7;margin-left:2px}
.mk-pager,.eco-pager{gap:14px}
select,input[type=number],input[type=search]{max-width:100%}
input[type=number]{border-radius:12px;padding:8px 12px;width:100%}
input[type=checkbox]{accent-color:var(--red);width:16px;height:16px}

/* ---------- marché ---------- */
.mk-filters{align-items:end}
.mk-check{font-size:13.5px;color:var(--text)!important;gap:8px;cursor:pointer}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:16px}
.mk-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);transition:transform .15s,box-shadow .2s,border-color .2s;animation:evin .35s both}
.mk-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 30px -18px #000}
.mk-card.is-high{border-color:#ff7a5266}
.mk-top{display:flex;gap:12px;align-items:center}
.mk-top h3{font-size:19px}.mk-top h3 small{color:var(--muted);font-family:var(--body);font-weight:700}
.mk-by{font-size:13px}
.mk-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.mk-price b{font-size:22px;font-family:var(--display)}
.mk-badges{display:flex;gap:6px;flex-wrap:wrap;min-height:4px}
.mk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;font-size:13px}
.mk-sell{align-items:start}
.mk-stock{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:420px;overflow:auto;padding:2px}
.stock-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:16px;background:#120e30;border:2px solid var(--line);text-align:center;transition:border-color .15s,transform .12s}
.stock-tile:hover{transform:translateY(-2px);border-color:var(--muted)}
.stock-tile.on{border-color:var(--gold);background:var(--panel2)}
.stock-tile b{font-size:13px;line-height:1.2}.stock-tile small{color:var(--muted);font-weight:700}
.mk-sel{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.mk-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.mk-fields label,.bank-amt{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.mk-buyer{margin:12px 0;font-size:13px;color:var(--muted);font-weight:600}
.mk-buyer input{margin-top:6px;width:100%}
.mk-found{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mk-table td,.rk-table td{vertical-align:middle}
.mk-table td small{font-weight:400}

/* ---------- boutique ---------- */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:16px}
.sh-item{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);animation:evin .35s both}
.sh-item.full{opacity:.7}
.sh-head{display:flex;gap:12px;align-items:center}.sh-head h3{font-size:19px}
.sh-desc{font-size:13.5px;color:var(--muted);flex:1}
.sh-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sh-price{display:flex;align-items:baseline;gap:6px;margin-right:auto}.sh-price b{font-size:18px}.sh-price s{font-size:13px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;background:#0f0c26;overflow:hidden}
.qty button{width:32px;height:32px;font-size:18px;font-weight:700}
.qty button:hover:not([disabled]){background:var(--panel2)}.qty button[disabled]{opacity:.3;cursor:default}
.qty output{min-width:30px;text-align:center;font-weight:800}
.sh-card p{margin-bottom:4px}
.bank-tiles{grid-template-columns:repeat(2,1fr);margin:6px 0 14px}
.bank-meter{margin:6px 0 14px}.bank-meter .bar{height:16px;margin-bottom:6px}
.bank-hero p{margin-bottom:8px}
.resale-rules{margin:10px 0 0 18px;font-size:14px;display:grid;gap:4px}

/* ---------- classement & profils ---------- */
.rk-av{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--panel2);display:inline-grid;place-items:center;font-size:18px;flex:none}
.rk-av.big{width:64px;height:64px;font-size:34px}
.rk-who{display:flex;align-items:center;gap:10px}
.rk-table{min-width:520px}
.rk-table tbody tr{cursor:pointer;transition:background .12s}
.rk-table tbody tr.me td{background:#4aa8ff14}
.rk-table .rk{font-size:17px;font-weight:800;width:56px}
.rk-table th.num,.rk-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-table .cur{color:var(--gold);font-weight:800}
.rk-pod{display:block;width:100%;color:inherit;cursor:pointer;transition:transform .15s}
.rk-pod:hover{transform:translateY(-4px)}
.rk-pod b{margin:8px 0 2px}
.rk-prof{display:grid;gap:12px}
.rk-ph{display:flex;gap:16px;align-items:center;padding-right:40px}.rk-ph h2{font-size:30px}
.rk-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.rk-tiles .tile b{font-size:21px}
.rk-h{font-size:19px;margin-top:6px}
.rk-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.rk-mate{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:10px 8px;border-radius:16px;background:#120e30;border-bottom:4px solid var(--rc)}
.rk-mate img{width:72px;height:72px}.rk-mate b{font-size:14px}.rk-mate span{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.rk-mate .chip{font-size:10.5px;padding:0 7px}

/* ---------- talents : en-tête ---------- */
.tl-page{padding-bottom:8px}
.tl-sum{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.tl-pts{display:flex;align-items:baseline;gap:10px}
.tl-pts b{font-family:var(--display);font-size:56px;line-height:1;color:var(--gold);text-shadow:0 0 24px #ffcf3f55}
.tl-pts b.flash{animation:tlflash .7s}
@keyframes tlflash{30%{transform:scale(1.25);text-shadow:0 0 34px #ffcf3f}}
.tl-pts span{color:var(--muted);font-weight:600;max-width:9ch;line-height:1.2}
.tl-sumtxt{flex:1;min-width:260px}
.tl-tip{margin-bottom:14px}
.tl-hint{margin-bottom:10px;font-size:13.5px}
.tl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:14px;height:14px;border-radius:50%;border:3px solid var(--line);display:inline-block}
.lg.locked{border-style:dashed;opacity:.6}.lg.saving{border-color:var(--blue)}.lg.ready{border-color:var(--gold);box-shadow:0 0 8px var(--gold)}.lg.maxed{background:var(--gold);border-color:#fff8}

/* ---------- talents : voies ---------- */
.tl-lane{--tc:var(--blue);margin-bottom:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 11%,var(--panel)),var(--panel) 55%);overflow:hidden}
.tl-lane header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 18px 0}
.tl-lane h2{font-size:22px;color:var(--tc)}.tl-lane h2 small{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--muted);margin-left:6px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;padding:4px 12px 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tl-canvas{position:relative}
.tl-edges{position:absolute;inset:0;pointer-events:none}
.tl-edges .e{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;opacity:.45}
.tl-edges .e.on{stroke:var(--tc);opacity:.95;filter:drop-shadow(0 0 4px var(--tc))}
.tl-edges .e.flow{stroke-dasharray:7 9;animation:tlflow 1.1s linear infinite}
@keyframes tlflow{to{stroke-dashoffset:-16}}
.tl-root{position:absolute;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;font-size:30px;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tc) 55%,#fff),var(--tc));box-shadow:0 0 0 4px #0003,0 0 24px -2px var(--tc)}
.tl-root i{font-style:normal;filter:drop-shadow(0 2px 2px #0006)}
.tl-gate{position:absolute;transform:translate(-50%,-50%);width:70px;text-align:center;pointer-events:none}
.tl-gate .dm{width:44px;height:44px;margin:0 auto;transform:rotate(45deg);border-radius:10px;border:3px solid var(--line);background:#0f0c26;display:grid;place-items:center;transition:border-color .4s,background .4s,box-shadow .4s}
.tl-gate .dm span{transform:rotate(-45deg);font-size:12px;font-weight:800;color:var(--muted)}
.tl-gate small{display:block;margin-top:8px;font-size:11px;line-height:1.2;color:var(--muted);font-weight:700}
.tl-gate.open .dm{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 28%,#0f0c26);box-shadow:0 0 16px -2px var(--tc)}
.tl-gate.open .dm span{font-size:17px;color:#fff}

/* nœuds */
.tl-node{--tc:var(--blue);position:absolute;width:104px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:var(--text);transition:transform .15s}
.tl-lane .tl-node{--c:var(--tc)}
.tl-node:hover{transform:translateY(-3px)}
.tl-node .orb{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#3b3490,#1a1540 70%);box-shadow:0 8px 16px -8px #000,inset 0 0 0 1px #fff1;transition:box-shadow .3s,background .3s}
.tl-node .ring{position:absolute;inset:0;width:64px;height:64px;transform:rotate(-90deg)}
.tl-node .ring circle{fill:none;stroke-width:5}
.tl-node .ring .trk{stroke:#ffffff1f}
.tl-node .ring .fil{filter:drop-shadow(0 0 3px currentColor);transition:stroke-dasharray .6s}
.tl-node .em{font-style:normal;font-size:27px;filter:drop-shadow(0 2px 2px #0007);transition:transform .2s}
.tl-node:hover .em{transform:scale(1.12)}
.tl-node .lv{position:absolute;right:-6px;top:-4px;min-width:26px;padding:1px 6px;border-radius:99px;background:#0b0820;border:1px solid var(--line);font-size:11px;font-weight:800;line-height:1.5}
.tl-node .req{position:absolute;left:-6px;top:-4px;text-decoration:none;font-size:13px;background:#0b0820;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);opacity:.8}
.tl-node .req.met{border-color:var(--ok)}
.tl-node .nm{font-size:12.5px;font-weight:700;line-height:1.15;background:var(--panel);border-radius:8px;padding:1px 5px;max-width:104px}
.tl-node .sub{font-size:11.5px;font-weight:800;color:var(--muted)}
.tl-node.s-locked .orb{background:#16123a;filter:grayscale(.85);}
.tl-node.s-locked .em{opacity:.4}
.tl-node.s-locked .ring .trk{stroke-dasharray:3 6!important;stroke:#ffffff26}
.tl-node.s-locked .nm{color:var(--muted)}
.tl-node.s-saving .orb{box-shadow:0 8px 16px -8px #000,0 0 0 2px var(--blue)}
.tl-node.s-ready .orb{box-shadow:0 0 0 2px var(--gold),0 0 22px 0 #ffcf3f88;animation:tlpulse 1.9s ease-in-out infinite}
.tl-node.s-ready .sub{color:var(--gold)}
@keyframes tlpulse{50%{box-shadow:0 0 0 2px var(--gold),0 0 34px 6px #ffcf3faa}}
.tl-node.s-maxed .orb{background:radial-gradient(circle at 35% 28%,#a6801c,#4f3908 75%);box-shadow:0 0 0 2px var(--gold),0 0 26px 2px #ffcf3f99}
.tl-node.s-maxed .orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,#fff7 50%,transparent 65%);background-size:260% 100%;animation:shine 3s infinite}
.tl-node.s-maxed .sub{color:var(--gold)}
.tl-node.sel .orb{outline:3px solid #fff;outline-offset:3px}
.tl-node.sel .nm{background:#fff;color:#151030}
.tl-node.bump .orb{animation:tlbump .8s cubic-bezier(.2,1.4,.4,1)}
.tl-node.bump .orb::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--gold);animation:tlburst .8s ease-out forwards}
@keyframes tlbump{0%{transform:scale(.8)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes tlburst{from{transform:scale(1);opacity:1}to{transform:scale(2.3);opacity:0}}

/* panneau de détail (collant en bas de page) */
.tl-panel{--tc:var(--gold);position:sticky;bottom:14px;z-index:20;margin-top:14px;padding:18px 20px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--tc);box-shadow:0 -10px 40px -14px #000,0 0 30px -14px var(--tc);animation:pop .25s cubic-bezier(.2,1.3,.4,1);max-height:min(62vh,520px);overflow:auto}
.tl-panel[hidden]{display:none}
.tl-panel .x{top:10px;right:10px;width:32px;height:32px;font-size:15px}
.tl-ph{display:flex;gap:14px;align-items:center;padding-right:36px}
.tl-ph .em{font-size:34px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#120e30;box-shadow:0 0 0 2px var(--tc)}
.tl-ph h3{font-size:24px}
.tl-sum2{margin:8px 0 2px}
.tl-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4px 24px;align-items:start}
.tl-perks{list-style:none;padding:0;display:grid;gap:4px;margin:8px 0}
.tl-perks li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:5px 10px;border-radius:10px;background:#120e30;font-size:13.5px;border-left:4px solid transparent}
.tl-perks li .lvl{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#ffffff14;font-size:12px;font-weight:800}
.tl-perks li .co{color:var(--muted);font-weight:700;font-size:12.5px}
.tl-perks li.done{border-left-color:var(--ok)}.tl-perks li.done .lvl{background:var(--ok);color:#052a17}
.tl-perks li.next{border-left-color:var(--gold);background:#2a2260}.tl-perks li.next .co{color:var(--gold)}
.tl-cur,.tl-req,.tl-fav,.tl-odds{font-size:14px;margin:8px 0 0}
.tl-req.met{color:var(--ok)}
.tl-fav select{min-width:150px}
.tl-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}
.tl-why{font-size:13.5px;color:var(--muted)}
.dexl{margin:10px 0}.dexl .bar{height:8px;margin-top:5px}.dexl.total{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* vue liste */
.tl-listbranch{--tc:var(--blue);margin-bottom:16px;border-left:5px solid var(--tc)}
.tl-listbranch h2{font-size:22px;color:var(--tc)}.tl-listbranch h2 small{font-family:var(--body);font-size:13px;color:var(--muted)}
.tl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.tl-rowmain{display:flex;gap:12px;align-items:center;text-align:left;flex:1;min-width:230px}
.tl-rowmain .em{font-size:26px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#120e30}
.tl-row.s-locked .tl-rowmain{opacity:.55}
.tl-row .pips{display:flex;gap:3px}.tl-row .pips i{width:10px;height:10px;border-radius:3px;background:#0c0a1f}.tl-row .pips i.on{background:var(--tc)}

/* ---------- adaptation ---------- */
@media (max-width:1100px){.tl-cols{grid-template-columns:1fr}}
@media (max-width:860px){
  .tl-panel{bottom:76px;max-height:58vh;padding:14px 16px}
  .tl-pts b{font-size:44px}
  .hide-s{display:none}
  .mk-grid,.sh-grid{grid-template-columns:1fr}
  .rk-table{min-width:0}
}
@media (max-width:520px){
  .tl-lane header{padding:12px 14px 0}.tl-lane h2 small{display:block;margin:2px 0 0}
  .sh-buy .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.tl-edges .e.flow{animation:none}}
