/* ================= Launcher (conceito) ================= */
.launcher{position:relative; overflow:hidden; background:radial-gradient(ellipse 70% 40% at 50% 0%, rgba(217,88,42,.13), transparent 70%)}
.lx{--lx-bg:#131211; --lx-p1:#181715; --lx-p2:#1D1C1A; --lx-ln:rgba(255,236,214,.07); position:relative; overflow:hidden; border-radius:18px; background:var(--lx-bg); border:1px solid rgba(255,236,214,.12); font-size:14px; box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5), 0 0 100px -30px rgba(255,138,42,.35)}
.lx button{font:inherit}
.lx-top{display:flex; align-items:center; gap:16px; height:58px; padding:0 12px 0 16px; background:linear-gradient(180deg, #1F1E1C, #181716); border-bottom:1px solid var(--lx-ln)}
.lx-brand{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 720; letter-spacing:.08em; font-size:12.5px; white-space:nowrap}
.lx-brand svg.mark{width:26px; height:22px}
.lx-nav{display:flex; gap:2px}
.lx-nav button{position:relative; height:36px; padding:0 14px; border-radius:9px; border:0; background:none; color:var(--ink-3); font-weight:600; font-size:13.5px; cursor:pointer; transition:color .2s, background .2s}
.lx-nav button:hover{color:var(--ink)}
.lx-nav button[aria-selected="true"]{color:var(--ink); background:rgba(255,236,214,.07)}
.lx-nav button[aria-selected="true"]::after{content:""; position:absolute; left:14px; right:14px; bottom:-11px; height:2px; border-radius:2px; background:var(--h1000); box-shadow:0 0 10px var(--h1000)}
.lx-search{flex:1; max-width:300px; margin-left:auto; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:10px; background:rgba(255,236,214,.05); border:1px solid var(--lx-ln); color:var(--ink-3)}
.lx-search svg{width:16px; height:16px; flex:none}
.lx-search input{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ink); font:14px var(--f-body)}
.lx-search input::placeholder{color:var(--ink-3)}
.lx-search:focus-within{border-color:rgba(255,138,42,.5)}
.lx-me{display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:12px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; text-align:left}
.lx-me:hover{border-color:var(--lx-ln); background:rgba(255,236,214,.04)}
.lx-me .avf{width:36px; height:36px}
.lx-me-t{display:grid; line-height:1.2}
.lx-me-t b{font-size:13px}
.lx-me-t small{font-family:var(--f-mono); font-size:9.5px; color:var(--accent-text)}
.lx-winctl{display:flex; gap:8px; margin-left:6px}
.lx-winctl i{width:11px; height:11px; border-radius:50%; background:rgba(255,236,214,.14)}
.lx-body{display:grid; grid-template-columns:72px minmax(0,1fr) 272px; height:720px}
.lx-foot{display:flex; flex-wrap:wrap; gap:6px 22px; padding:8px 16px; border-top:1px solid var(--lx-ln); background:var(--lx-p1); font-size:11.5px; color:var(--ink-3)}
.lx-foot .ok::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live)}

/* trilho de jogos */
.lx-rail{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0; background:var(--lx-p1); border-right:1px solid var(--lx-ln); overflow-y:auto; scrollbar-width:none}
.lx-rail::-webkit-scrollbar{display:none}
.lx-ri{position:relative; width:48px; height:48px; flex:none; padding:0; border-radius:14px; border:0; background:#232120; cursor:pointer; transition:border-radius .3s var(--ease-out), transform .42s var(--ease-hammer)}
.lx-ri img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; filter:saturate(.75) brightness(.72); transition:filter .25s}
.lx-ri:hover{border-radius:12px; transform:translateY(-1px)}
.lx-ri:hover img, .lx-ri[aria-current="true"] img{filter:none}
.lx-ri[aria-current="true"]{box-shadow:0 0 0 2px var(--lx-p1), 0 0 0 4px var(--h1000)}
.lx-ri::before{content:""; position:absolute; left:-12px; top:50%; width:4px; height:0; border-radius:0 4px 4px 0; background:var(--ink); transform:translateY(-50%); transition:height .25s var(--ease-out)}
.lx-ri:hover::before{height:18px}
.lx-ri[aria-current="true"]::before{height:32px; background:var(--h1000)}
.lx-ri .st{position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--lx-p1)}
.lx-ri.home{display:grid; place-items:center; background:linear-gradient(160deg, #2C2926, #1A1918); border:1px solid var(--lx-ln)}
.lx-ri.home svg.mark{width:28px; height:24px}
.lx-rail hr{width:32px; height:2px; margin:4px 0; border:0; border-radius:2px; background:var(--lx-ln)}
.lx-tip{position:absolute; z-index:5; pointer-events:none; padding:6px 10px; border-radius:8px; background:#050505; color:var(--ink); font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.6); opacity:0; transform:translateX(-4px); transition:opacity .15s, transform .15s}
.lx-tip.on{opacity:1; transform:none}

/* área principal */
.lx-main{position:relative; min-width:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,236,214,.15) transparent}
.lx-view{display:grid; gap:16px; align-content:start; padding:18px}
.lx-view.in{animation:swapIn .45s var(--ease-out) both}
.lx-rowh{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px}
.lx-rowh h4{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:17px; text-transform:uppercase}
.lx-rowh > span{font-size:12.5px; color:var(--ink-3)}
.lx-hero{position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:end; min-height:400px; padding:24px; border-radius:16px}
.lx-hero > img.bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease-cool), transform 8s linear; transform:scale(1.04)}
.lx-hero > img.bg.on{transform:scale(1)}
.lx-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(19,18,17,.97) 0%, rgba(19,18,17,.55) 45%, rgba(19,18,17,.08) 80%), linear-gradient(90deg, rgba(19,18,17,.7), transparent 55%)}
.lx-hin{display:grid; gap:12px; align-content:end}
.lx-logo{--pos:left center; width:min(320px, 80%); height:92px}
.lx-tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.lx-desc{max-width:52ch; color:#E4DDD2; font-size:14.5px}
.lx-cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.lx-play{position:relative; overflow:hidden; min-width:230px; height:56px; padding:0 28px; border-radius:12px; border:0; cursor:pointer; color:#fff; font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(180deg, #E6662F, #C9491E); box-shadow:inset 0 1px 0 rgba(255,222,190,.4), 0 14px 34px -12px rgba(217,88,42,.95); transition:transform .42s var(--ease-hammer), filter .2s, background .3s}
.lx-play:hover{filter:brightness(1.08)}
.lx-play:active{transform:scale(.97,.92); transition-duration:.08s}
.lx-play .fill{position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, #B0380F, #FF8A2A); opacity:0}
.lx-play span{position:relative; font-variant-numeric:tabular-nums}
.lx-play.busy{background:#2A2623; box-shadow:inset 0 0 0 1px rgba(255,138,42,.35)}
.lx-play.busy .fill{opacity:1}
.lx-play.playing{background:linear-gradient(180deg, #3E9B4B, #2E7A3A); box-shadow:inset 0 1px 0 rgba(220,255,220,.3), 0 14px 34px -12px rgba(94,194,106,.8)}
.lx-play.soon{background:rgba(255,236,214,.08); box-shadow:inset 0 0 0 1px rgba(255,236,214,.22); color:var(--ink)}
.lx-play.soon.on{box-shadow:inset 0 0 0 1px rgba(94,194,106,.6); color:var(--live)}
.lx-play:disabled{cursor:default; background:rgba(255,236,214,.05); box-shadow:inset 0 0 0 1px rgba(255,236,214,.12); color:var(--ink-3); filter:none}
.lx-srv{display:grid; gap:2px; padding:8px 14px; border-radius:12px; border:1px solid rgba(255,236,214,.14); background:rgba(19,18,17,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lx-srv small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.lx-srv b{font-size:13.5px}
.lx-srv b::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--live)}
.lx-srv.off b::before{background:var(--ink-3)}
.lx-sub{font-size:12.5px; color:var(--ink-2)}
.lx-hside{display:grid; gap:10px; align-self:stretch; align-content:end}
.lx-gcard{display:grid; gap:10px; padding:14px; border-radius:14px; background:rgba(19,18,17,.72); border:1px solid rgba(255,236,214,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lx-gcard > small, .lx-cap, .pm-cap{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lx-gprog{display:flex; align-items:center; gap:12px}
.lx-gprog b{display:block; font-size:15px}
.lx-gprog em{font-style:normal; font-size:12px; color:var(--ink-3)}
.ring{--p:0; --sz:56px; --th:6px; --in:#161514; width:var(--sz); height:var(--sz); flex:none; display:grid; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(closest-side, var(--in) calc(100% - var(--th)), transparent calc(100% - var(--th) + 1px)), conic-gradient(from 0deg, #D9582A, #FFC454 calc(var(--p) * 1%), rgba(255,236,214,.1) 0)}
.ring b{font-family:var(--f-mono); font-size:12px; font-weight:600; line-height:1}
.ring.big{--sz:118px; --th:10px; --in:var(--lx-p2)}
.ring.big b{font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 800; font-size:28px}
.ring.big em{font-style:normal; font-size:11px; color:var(--ink-3); margin-top:2px}
.lx-next{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; padding-top:10px; border-top:1px solid var(--lx-ln)}
.lx-next img{width:44px; height:44px; border-radius:10px; object-fit:cover; filter:grayscale(.2)}
.lx-next small{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-next b{display:block; font-size:13px}
.lx-next span{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.stack{display:flex; align-items:center}
.stack img{width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #161514; margin-left:-8px}
.stack img:first-child{margin-left:0}
.stack span{margin-left:8px; font-size:12px; color:var(--ink-2)}
.lx-news{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.lx-nc{display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-radius:12px; background:var(--lx-p2); border:1px solid var(--lx-ln); transition:border-color .25s, transform .42s var(--ease-hammer)}
.lx-nc:hover{border-color:rgba(255,138,42,.35); transform:translateY(-2px)}
.lx-nc img{display:block; width:100%; aspect-ratio:16/8; object-fit:cover}
.lx-nc div{display:grid; gap:4px; padding:12px 14px}
.lx-nc small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-nc b{font-size:14px; line-height:1.3}
.lx-nc span{font-size:12px; color:var(--ink-3)}

/* biblioteca */
.lx-seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:10px; background:rgba(255,236,214,.05); border:1px solid var(--lx-ln)}
.lx-seg button{height:30px; padding:0 12px; border-radius:7px; border:0; background:none; color:var(--ink-3); font-size:12.5px; font-weight:600; cursor:pointer}
.lx-seg button:hover{color:var(--ink)}
.lx-seg button[aria-pressed="true"]{background:rgba(255,236,214,.1); color:var(--ink)}
.lx-lib{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px}
.lx-lc{position:relative; overflow:hidden; aspect-ratio:3/4; padding:0; border-radius:14px; border:1px solid rgba(255,236,214,.08); background:var(--lx-p2); cursor:pointer; text-align:left; color:var(--ink); transition:border-color .25s, transform .42s var(--ease-hammer), box-shadow .3s}
.lx-lc > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.lx-lc::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(19,18,17,.96) 10%, rgba(19,18,17,.1) 65%)}
.lx-lc .in{position:absolute; left:12px; right:12px; bottom:12px; z-index:1; display:grid; gap:8px}
.lx-lc .in img{height:36px; width:100%; object-fit:contain; object-position:left center}
.lx-lc .in small{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2)}
.lx-lc .in small::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c)}
.lx-lc .go{position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; opacity:0; transform:scale(.8); transition:opacity .2s, transform .3s var(--ease-hammer)}
.lx-lc .go svg{width:14px; height:14px}
.lx-lc:hover{border-color:rgba(255,138,42,.5); transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(255,138,42,.5)}
.lx-lc:hover > img{transform:scale(1.06)}
.lx-lc:hover .go{opacity:1; transform:none}
.lx-empty{color:var(--ink-3); font-size:13.5px}

/* conquistas globais */
.lx-atop{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,260px); gap:18px; align-items:center; padding:18px; border-radius:16px; background:linear-gradient(135deg, rgba(217,88,42,.16), rgba(217,88,42,.02) 60%), var(--lx-p2); border:1px solid rgba(255,138,42,.2)}
.lx-stats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 18px; margin:0}
.lx-stats dt{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lx-stats dd{margin:2px 0 0; font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 780; font-size:20px; line-height:1.1}
.lx-reward{display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border-radius:12px; background:rgba(19,18,17,.6); border:1px solid var(--lx-ln)}
.lx-reward img{width:64px; height:64px; border-radius:12px; object-fit:cover}
.lx-reward small{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-reward b{display:block; font-size:14px}
.lx-reward span{display:block; font-size:12px; color:var(--ink-3); line-height:1.35}
.lx-reward .bar{display:block; height:5px; margin-top:6px; border-radius:5px; background:rgba(255,236,214,.1); overflow:hidden}
.lx-reward .bar i{display:block; height:100%; background:linear-gradient(90deg, #D9582A, #FFC454)}
.lx-filters{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
.lx-chips{display:flex; flex-wrap:wrap; gap:6px}
.lx-chips button{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--lx-ln); background:rgba(255,236,214,.03); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.lx-chips button:hover{color:var(--ink); border-color:rgba(255,236,214,.2)}
.lx-chips button[aria-pressed="true"]{color:var(--ink); border-color:rgba(255,138,42,.55); background:rgba(217,88,42,.14)}
.lx-chips button i{font-style:normal; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)}
.lx-chips button .live{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live)}
.lx-ach{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.ac{--rc:#BFB6AA; position:relative; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 14px 12px 12px; border-radius:14px; background:var(--lx-p2); border:1px solid var(--lx-ln); overflow:hidden}
.ac.on{border-color:color-mix(in srgb, var(--rc) 40%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), var(--lx-p2)}
.ac .bdg{width:54px; height:58px; color:var(--rc)}
.ac .bdg .hx{fill:color-mix(in srgb, var(--rc) 16%, #161514); stroke:var(--rc); stroke-width:2}
.ac:not(.on) .bdg{color:#5E5852}
.ac:not(.on) .bdg .hx{fill:#1A1918; stroke:#3A3632}
.ac.on .bdg{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 45%, transparent))}
.ac .lock{position:absolute; left:40px; top:44px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#2A2724; color:var(--ink-3); box-shadow:0 0 0 2px var(--lx-p2)}
.ac .lock svg{width:12px; height:12px}
.ac b{display:block; font-size:14px; line-height:1.25}
.ac p{font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:2px}
.ac .meta{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; font-size:11px}
.ac .gt{padding:2px 8px; border-radius:6px; background:rgba(255,236,214,.06); color:var(--ink-2)}
.ac .gt.site{background:rgba(94,194,106,.12); color:var(--live)}
.ac .rr{color:var(--rc); font-weight:600}
.ac .pg{display:flex; align-items:center; gap:8px; margin-top:8px}
.ac .pg span{flex:1; height:5px; border-radius:5px; background:rgba(255,236,214,.08); overflow:hidden}
.ac .pg i{display:block; height:100%; border-radius:5px; background:var(--rc)}
.ac .pg em{font-style:normal; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)}
.ac .pts{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); text-align:right; white-space:nowrap}
.ac.on .pts{color:var(--rc)}
.ac .pts small{display:block; font-size:10px; color:var(--ink-3)}

/* perfil e avatares */
.avf{--rc:#FF8A2A; position:relative; display:inline-grid; flex:none; width:40px; height:40px; padding:2px; border-radius:50%; background:conic-gradient(from 200deg, var(--rc), color-mix(in srgb, var(--rc) 25%, transparent) 40%, var(--rc) 70%, color-mix(in srgb, var(--rc) 25%, transparent))}
.avf img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #131211; display:block}
.avf.sm{width:32px; height:32px}
.avf.lg{width:84px; height:84px; padding:3px}
.avf.xl{width:132px; height:132px; padding:4px; box-shadow:0 0 40px -6px color-mix(in srgb, var(--rc) 60%, transparent)}
.lx-prof{display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start}
.lx-pcard{display:grid; justify-items:center; gap:10px; padding:24px 18px; border-radius:16px; text-align:center; background:radial-gradient(ellipse at 50% 0%, rgba(217,88,42,.22), transparent 60%), var(--lx-p2); border:1px solid var(--lx-ln)}
.pf-name{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 800; font-size:22px; text-transform:uppercase}
.pf-lvl{font-family:var(--f-mono); font-size:11px; color:var(--accent-text); letter-spacing:.06em}
.pf-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%; margin-top:6px}
.pf-stats div{padding:8px 4px; border-radius:10px; background:rgba(255,236,214,.04)}
.pf-stats b{display:block; font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 780; font-size:18px}
.pf-stats small{font-size:11px; color:var(--ink-3)}
.pf-cap{justify-self:start; margin-top:8px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.pf-show{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%}
.pf-show div{--rc:#BFB6AA; display:grid; justify-items:center; gap:4px; padding:8px 4px; border-radius:10px; background:rgba(255,236,214,.04); font-size:10.5px; color:var(--ink-2); line-height:1.25}
.pf-show .bdg{width:36px; height:39px; color:var(--rc)}
.pf-show .bdg .hx{fill:color-mix(in srgb, var(--rc) 16%, #161514); stroke:var(--rc); stroke-width:2}
.pf-show .empty{color:var(--ink-3); opacity:.6}
.avgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.avt{--rc:#BFB6AA; position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; align-items:center; padding:10px; border-radius:14px; border:1px solid var(--lx-ln); background:var(--lx-p2); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .25s, transform .42s var(--ease-hammer)}
.avt img{width:56px; height:56px; border-radius:12px; object-fit:cover; box-shadow:0 0 0 2px var(--lx-p2), 0 0 0 3.5px var(--rc)}
.avt b{display:block; font-size:13.5px}
.avt small{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.avt:hover{border-color:rgba(255,236,214,.2); transform:translateY(-2px)}
.avt.sel{border-color:var(--h1000); background:linear-gradient(90deg, rgba(217,88,42,.16), transparent), var(--lx-p2)}
.avt.sel small{color:var(--accent-text)}
.avt.locked{cursor:not-allowed}
.avt.locked img{filter:grayscale(1) brightness(.45); box-shadow:0 0 0 2px var(--lx-p2), 0 0 0 3.5px #3A3632}
.avt.locked::after{content:""; position:absolute; left:28px; top:28px; width:22px; height:22px; border-radius:50%; background:#2A2724 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFB6AA' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:0 0 0 2px var(--lx-p2)}
.avt.locked:hover{transform:none}
.avt.new{animation:avnew 1.2s var(--ease-hammer)}
@keyframes avnew{0%{box-shadow:0 0 0 0 rgba(255,196,84,.8)} 100%{box-shadow:0 0 0 18px rgba(255,196,84,0)}}

/* painel social */
.lx-social{display:flex; flex-direction:column; gap:12px; padding:16px 14px; background:var(--lx-p1); border-left:1px solid var(--lx-ln); overflow-y:auto; scrollbar-width:none}
.lx-sh{display:flex; justify-content:space-between; align-items:baseline}
.lx-sh b{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:15px; text-transform:uppercase}
.lx-sh span{font-size:12px; color:var(--live)}
.lx-party{display:grid; gap:10px; padding:12px; border-radius:14px; background:linear-gradient(160deg, rgba(217,88,42,.14), rgba(217,88,42,.02)); border:1px solid rgba(255,138,42,.22)}
.lx-party > small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.party{display:flex; gap:8px}
.party .slot{width:40px; height:40px; border-radius:50%; border:1.5px dashed rgba(255,236,214,.2); display:grid; place-items:center; color:var(--ink-3); font-size:18px}
.lx-inv{height:34px; border-radius:9px; border:1px solid rgba(255,138,42,.45); background:none; color:var(--accent-text); font-weight:600; font-size:12.5px; cursor:pointer}
.lx-inv:hover{background:rgba(217,88,42,.12)}
.lx-inv.done{border-color:rgba(94,194,106,.5); color:var(--live)}
.lx-fl, .lx-act{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.lx-fr{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px; border-radius:10px}
.lx-fr:hover{background:rgba(255,236,214,.04)}
.lx-fr .avf{width:40px; height:40px}
.lx-fr .avf::after{content:""; position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:var(--s); box-shadow:0 0 0 2.5px var(--lx-p1)}
.lx-fr b{display:block; font-size:13px}
.lx-fr small{display:block; font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-fr small.pl{color:var(--live)}
.lx-fr button{width:30px; height:30px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--lx-ln); background:none; color:var(--ink-3); cursor:pointer; opacity:0; transition:opacity .2s}
.lx-fr:hover button, .lx-fr button:focus-visible{opacity:1}
.lx-fr button svg{width:14px; height:14px}
.lx-fr.off{opacity:.55}
.lx-act li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; padding:6px; font-size:12px; color:var(--ink-3); line-height:1.4}
.lx-act img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.lx-act b{color:var(--ink); font-weight:600}
.lx-act em{font-style:normal; color:var(--rc, var(--accent-text)); font-weight:600}