/* O perfil público (perfil/index.php). As mesmas cores e fontes das outras
   páginas do Monkey; o destaque é a cor que a pessoa escolheu (--cor, que
   começa no dourado do site). */

:root{
    --bg:#050507;--bg2:#0a0a0f;--bg3:#111118;--bg4:#16161f;
    --border:#1a1a25;--border2:#252535;
    --text:#eeeef0;--muted:#6b6b80;--muted2:#9595ad;
    --accent:#f5a623;--accent2:#ffc344;--red:#e74c3c;
    --radius:14px;--radius-sm:8px;
    --cor:#f5a623;
    --curva:cubic-bezier(.23,1,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-gutter:stable}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* A entrada e a saída da página, as mesmas das outras do Monkey. */
body{padding-top:64px;min-height:100vh;animation:pageIn .35s ease-out}
body.page-out{animation:pageOut .25s ease-in forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--cor);outline-offset:2px}

.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-bg::before{content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:60px 60px}

.casca{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:1.75rem 1.5rem 5rem}

.btn-cor{display:inline-flex;align-items:center;gap:.5rem;background:var(--cor);color:#0a0a0f;border:none;border-radius:10px;
    padding:.72rem 1.4rem;font-size:.88rem;font-weight:700;cursor:pointer;transition:filter .18s}
.btn-cor:hover{filter:brightness(1.1)}

.carregando{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.86rem}

/* ── Sem perfil (não achou, ou sem conta) ─────────────────────────── */
.vazio-perfil{max-width:520px;margin:3rem auto;text-align:center;background:var(--bg2);border:1px solid var(--border2);
    border-radius:18px;padding:3.2rem 2rem}
.vp-ico{width:54px;height:54px;margin:0 auto 1.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--cor) 13%,transparent);color:var(--cor)}
.vp-ico svg{width:24px;height:24px}
.vazio-perfil h1{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.6rem}
.vazio-perfil p{color:var(--muted2);font-size:.9rem;line-height:1.65;margin-bottom:1.5rem}
.vazio-perfil b{color:var(--text)}

/* ── Capa: banner, foto, nome ─────────────────────────────────────── */
.capa{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;overflow:hidden}
.banner{position:relative;aspect-ratio:3/1;max-height:340px;width:100%;background:var(--bg3);overflow:hidden}
.banner img{display:block;width:100%;height:100%;object-fit:cover}
/* Sem banner: a cor do perfil em listras finas e um brilho no canto, para não ficar um buraco. */
.banner.sem{background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--cor) 30%,transparent),transparent 58%),
    radial-gradient(circle at 10% 110%,color-mix(in srgb,var(--cor) 16%,transparent),transparent 50%),
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--cor) 7%,transparent) 0 1px,transparent 1px 13px),
    var(--bg3)}
.banner::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;
    background:linear-gradient(transparent,color-mix(in srgb,var(--bg2) 85%,transparent));pointer-events:none}

.capa-corpo{display:grid;grid-template-columns:auto 1fr auto;gap:1.3rem;align-items:start;padding:0 1.7rem 1.6rem;position:relative}

.avatar{position:relative;width:116px;height:116px;margin-top:-58px;border-radius:50%;flex-shrink:0;
    background:var(--bg4);border:4px solid var(--bg2);box-shadow:0 0 0 2px var(--cor),0 12px 32px rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}
.avatar span{font-size:2.6rem;font-weight:900;color:var(--cor)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

.ident{padding-top:.9rem;min-width:0}
.ident-linha{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .7rem}
.ident h1{font-size:2rem;font-weight:900;letter-spacing:-.04em;line-height:1.1;word-break:break-word}
.nivel{--n:var(--cor);display:inline-flex;align-items:center;padding:.22rem .6rem;border-radius:7px;font-size:.68rem;font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;color:var(--n);border:1px solid color-mix(in srgb,var(--n) 40%,transparent);
    background:color-mix(in srgb,var(--n) 12%,transparent)}
.nivel[data-n="SAGUI"]{--n:#6ec1ff}
.nivel[data-n="VIP"],.nivel[data-n="VIPGRATIS"]{--n:#3ddc84}
.nivel[data-n="GORILA"]{--n:#a77bff}
.nivel[data-n="CUSTOM"]{--n:#e4ae39}
.nivel[data-n="DONO"]{--n:#f5a623}

/* As badges (2.1.0.2): ícones pequenos numa caixinha escura, no jeito das
   insígnias do Discord. O nome e como ganha aparecem ao passar o mouse ou
   tocar. --dx empurra a dica para dentro quando ela cairia fora da capa. */
.badges{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;padding:3px 5px;border-radius:9px;
    background:rgba(0,0,0,.35);border:1px solid var(--border2)}
.badge{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;cursor:default;outline:none}
.badge img{width:24px;height:24px;display:block}
.badge:hover,.badge:focus{background:rgba(255,255,255,.06)}
.badge:focus-visible{box-shadow:0 0 0 2px var(--cor)}
.dica{--dx:0px;position:absolute;bottom:calc(100% + 9px);left:50%;z-index:5;width:max-content;max-width:230px;pointer-events:none;
    transform:translate(calc(-50% + var(--dx)),4px);opacity:0;
    background:var(--bg3);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 10px;
    font-size:.75rem;line-height:1.35;box-shadow:0 10px 24px -10px #000;
    transition:opacity .15s ease,transform .15s var(--curva)}
.dica b{display:block;color:var(--text);font-weight:700}
.dica span{color:var(--muted2)}
.badge:hover .dica,.badge:focus .dica{opacity:1;transform:translate(calc(-50% + var(--dx)),0)}
@media (prefers-reduced-motion:reduce){.dica{transition:opacity .15s ease}}

.ident-meta{display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;margin-top:.55rem;font-size:.8rem;color:var(--muted2)}
.ident-meta span,.ident-meta a{display:inline-flex;align-items:center;gap:.4rem}
.ident-meta svg{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.ident-meta a{transition:color .18s}
.ident-meta a:hover,.ident-meta a:hover svg{color:var(--cor)}

.bio{margin-top:.85rem;max-width:64ch;color:var(--muted2);font-size:.92rem;line-height:1.65;white-space:normal;word-break:break-word}
.bio:empty{display:none}
.bio.vazia{color:var(--muted);font-style:italic}

.btn-editar{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;background:transparent;color:var(--text);
    border:1px solid var(--border2);border-radius:10px;padding:.6rem 1rem;font-size:.82rem;font-weight:700;cursor:pointer;
    transition:border-color .18s,background .18s}
.btn-editar svg{width:15px;height:15px}
.btn-editar:hover{border-color:color-mix(in srgb,var(--cor) 60%,transparent);background:color-mix(in srgb,var(--cor) 7%,transparent)}

/* ── Rank: o cartão do pódio do ranking ───────────────────────────── */
.cartao-rank{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;margin-top:1rem;
    background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:1rem 1.2rem;overflow:hidden}
.cartao-rank::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--c1),var(--c2))}
/* Os pontos como no pódio do ranking: o card do jogo solto, sem caixa em
   volta (seria card dentro de card), e os pontos com o nome do rank. */
.p-pts{display:flex;align-items:center;gap:.85rem;min-width:0}
.p-pts .card-rank{display:block;flex:0 0 auto;width:72px;height:auto}
.p-pts > div{min-width:0}
.p-num{display:block;font-family:'JetBrains Mono',monospace;font-size:1.35rem;font-weight:700;color:var(--c1);letter-spacing:-.02em;
    line-height:1.1;font-variant-numeric:tabular-nums}
.p-faixa{display:block;margin-top:.15rem;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c1);opacity:.75;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-linha{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.p-item{min-width:0}
.p-item span{display:block;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;white-space:nowrap}
.p-item b{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-mais{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--muted2);
    border:1px solid var(--border2);border-radius:10px;padding:.6rem .9rem;transition:color .18s,border-color .18s}
.cr-mais svg{width:15px;height:15px}
.cr-mais:hover{color:var(--c1);border-color:color-mix(in srgb,var(--c1) 45%,transparent)}

/* ── Conquistas (27/10/2026): as seis últimas, na cor da raridade ─────── */
.pf-conquistas{--c1:var(--accent);margin-top:1rem;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:1rem 1.2rem}
.pfc-cab{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pfc-cab h2{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.pfc-num{flex:1;font-size:.82rem;color:var(--muted2)}
.pfc-num b{font-family:'JetBrains Mono',monospace;color:var(--text)}
/* A vitrine: as até 5 em destaque, uma ao lado da outra, o ícone grande em cima. */
.pfc-lista{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
.pfc-item{display:flex;flex-direction:column;align-items:center;gap:.55rem;min-width:0;padding:1rem .6rem .85rem;border-radius:12px;text-align:center;
    border:1px solid color-mix(in srgb,var(--rc) 22%,var(--border2));background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 10%,transparent),transparent 70%)}
.pfc-ic{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;color:var(--rc);background:color-mix(in srgb,var(--rc) 14%,transparent)}
.pfc-ic svg{width:22px;height:22px}
.pfc-ic.tem-img{width:56px;height:56px;border-radius:0;background:var(--rc);-webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat;
    filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rc) 50%,transparent))}
.pfc-txt{min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.pfc-txt b{display:block;max-width:100%;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfc-txt small{font-size:.7rem;color:var(--rc);font-weight:600}
.pfc-txt em{font-style:normal;font-size:.68rem;color:var(--muted)}
@media (max-width:760px){.pfc-lista{grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr))}}
.pfc-vazio{margin-top:.7rem;font-size:.86rem;color:var(--muted)}
@media (max-width:480px){.pfc-cab{justify-content:space-between}.pfc-num{order:3;flex-basis:100%}}
.pfc-item.r-comum,.mp-cq-item.r-comum{--rc:#9595ad}.pfc-item.r-incomum,.mp-cq-item.r-incomum{--rc:#2ecc71}.pfc-item.r-rara,.mp-cq-item.r-rara{--rc:#4a9eff}
.pfc-item.r-epica,.mp-cq-item.r-epica{--rc:#a77bff}.pfc-item.r-lendaria,.mp-cq-item.r-lendaria{--rc:#ffc344}.pfc-item.r-mitica,.mp-cq-item.r-mitica{--rc:#ff6b5e}

/* A escolha no Editar perfil: as que ele tem, da mais rara para a mais comum; a escolhida leva o número da ordem. */
.mp-cq-cab{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.mp-cq-cab .mp-conta{margin-top:0}
.mp-cq{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:.4rem}
.mp-cq-item{position:relative;display:flex;align-items:center;gap:.5rem;min-width:0;padding:.45rem .55rem;border-radius:9px;text-align:left;cursor:pointer;
    font:inherit;font-size:.78rem;color:var(--muted2);background:var(--bg3);border:1px solid var(--border2);transition:border-color .15s ease,background-color .15s ease}
.mp-cq-item span:not(.mp-cq-ic){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-cq-ic{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--rc)}
.mp-cq-ic svg{width:16px;height:16px}
.mp-cq-ic.tem-img{background:var(--rc);-webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat}
.mp-cq-item.on{color:var(--text);border-color:color-mix(in srgb,var(--rc) 60%,transparent);background:color-mix(in srgb,var(--rc) 12%,var(--bg3))}
.mp-cq-item b{margin-left:auto;flex:none;min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:grid;place-items:center;
    font-family:'JetBrains Mono',monospace;font-size:.66rem;color:#0a0a0f;background:var(--rc)}
.mp-cq-item:focus-visible{outline:2px solid var(--rc);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.mp-cq-item:not(.on):hover{border-color:color-mix(in srgb,var(--rc) 35%,var(--border2))}}
.mp-cq-acoes{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-top:.55rem}
.mp-cq-raras{padding:0;background:none;border:0;font:inherit;font-size:.75rem;color:var(--accent);cursor:pointer}
.mp-cq-raras[hidden]{display:none}

/* ── Como aparece no jogo ─────────────────────────────────────────── */
section h2{font-size:1rem;font-weight:800;letter-spacing:-.02em}
.no-jogo{margin-top:1.6rem}
.no-jogo h2{margin-bottom:.8rem}
.nj-grade{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.nj-bloco{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.55rem;min-width:0}
.nj-rot{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.nj-rot b{color:var(--text);letter-spacing:0;text-transform:none;font-size:.78rem}
.nj-sem{flex:1;min-height:150px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;
    border:1px dashed var(--border2);border-radius:10px}

/* O chat e o placar do CS2: fundo de mapa escuro, letra branca com sombra. */
.chat-cs{border-radius:10px;padding:1.4rem .9rem .9rem;
    background:linear-gradient(160deg,#1c2733 0%,#121a22 55%,#0c1117 100%)}
.chat-linha{display:inline-block;max-width:100%;background:rgba(0,0,0,.42);border-radius:3px;padding:.38rem .6rem;
    font-weight:600;font-size:.95rem;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* O chat que corre: a janela corta embaixo e as de cima somem no alto. */
.nj-bloco .chat-cs{position:relative;flex:1;min-height:170px}
/* overflow-anchor:none: as linhas sobem a cada mensagem e, quando a ancoragem
   de rolagem do navegador escolhia uma delas (trocar de aba com o chat no alto
   da tela), cada mensagem nova empurrava a página uns 35px para baixo. */
.chat-janela{position:absolute;inset:0;padding:.9rem;overflow:hidden;border-radius:inherit;display:flex;flex-direction:column;justify-content:flex-end;
    overflow-anchor:none;
    -webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.chat-fila{display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform .34s cubic-bezier(.23,1,.32,1)}
.chat-linha.entra{animation:chatEntra .34s cubic-bezier(.23,1,.32,1)}
@keyframes chatEntra{from{opacity:0}}

/* O placar do CS2 (print dele, 11/10/2026): o painel cinza do jogo, a sua
   linha no azul de CT e os números cada um na sua caixinha. O cabeçalho e a
   linha dividem as mesmas colunas. O card vem logo depois do nome e o vazio
   (onde o jogo mostra as armas) fica antes dos números. */
.nj-placar{grid-column:1/-1}
.placar-jogo{--pj-col:30px 24px minmax(0,13rem) 52px minmax(0,1fr) 60px 52px 52px 52px 38px 54px;
    border-radius:8px;padding:.6rem .65rem .75rem;background:linear-gradient(180deg,#3b3933,#2d2c28);
    font-family:'Barlow Condensed',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pj-cab{display:grid;grid-template-columns:var(--pj-col);gap:3px;align-items:end;padding:0 0 .35rem;
    color:#c4c6c9;font-size:.78rem;font-weight:500;text-align:center;white-space:nowrap}
.pj-sinal svg{width:13px;height:10px}
.pj-mvp svg{width:12px;height:12px;vertical-align:-1px}
.placar-cs{display:grid;grid-template-columns:var(--pj-col);gap:3px;align-items:center;height:32px;border-radius:2px;
    background:#566b8c;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.pl-ping{text-align:center;color:#a9b5c6;font-weight:500}
.pl-av{width:24px;height:24px;border-radius:2px;background:#2b3442;overflow:hidden}
.pl-av img{display:block;width:100%;height:100%;object-fit:cover}
.pl-quem{display:flex;align-items:center;gap:.35rem;min-width:0;padding-left:.15rem}
/* Faltou espaço: a tag encolhe primeiro, o nome fica. */
.pl-clan{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl-clan:empty{display:none}
.pl-nome{min-width:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-card{display:flex;align-items:center;justify-content:center}
.pl-card svg{display:block;width:50px;height:auto}
.pl-n{align-self:stretch;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.13)}
.pl-mvp svg{width:14px;height:14px}
.pl-mvp sup{font-size:.62rem;margin-left:1px;align-self:flex-start;margin-top:5px}
/* Trocou a tag: a linha do placar esmaece de novo no lugar. */
.placar-cs.troca{animation:trocaJogo .22s cubic-bezier(.23,1,.32,1)}
@keyframes trocaJogo{from{opacity:0;transform:translateY(4px)}}

.trail-tela{display:block;width:100%;height:150px;border-radius:10px;
    background:radial-gradient(ellipse at 50% 70%,#141822 0%,#090b10 75%)}
.trail-tela.grande{height:200px}

/* ── Meu VIP ──────────────────────────────────────────────────────── */
.meu-vip{margin-top:2rem;background:var(--bg2);border:1px solid var(--border2);border-radius:18px;padding:1.6rem}
.mv-topo{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;margin-bottom:1.1rem}
.mv-topo h2{font-size:1.25rem;font-weight:900;letter-spacing:-.03em}
.mv-estado{display:flex;align-items:center;gap:.65rem;font-size:.82rem;color:var(--muted2)}
.mv-estado a{color:var(--cor);font-weight:700}
.mv-sem{color:var(--muted)}

.mv-abas{display:inline-flex;gap:3px;padding:4px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;max-width:100%;overflow-x:auto}
.mv-abas button{background:transparent;border:none;color:var(--muted2);font-size:.84rem;font-weight:700;padding:.55rem 1.05rem;border-radius:9px;
    cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.mv-abas button:hover{color:var(--text)}
.mv-abas button[aria-selected="true"]{color:var(--text);background:color-mix(in srgb,var(--cor) 22%,var(--bg4));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 50%,transparent)}
.mv-abas button:focus-visible{outline-offset:-2px}

.mv-nota{color:var(--muted2);font-size:.82rem;line-height:1.6;margin:1rem 0}
.mv-nota b{color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.78rem}
.mv-vazio{color:var(--muted2);font-size:.86rem;line-height:1.6;text-align:center;padding:1.6rem 1rem;grid-column:1/-1}
.mv-vazio b{color:var(--text)}
.mv-vazio .btn-cor{margin-top:1rem}
.mv-aviso{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--bg3);
    border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1.1rem}
.mv-aviso p{color:var(--muted2);font-size:.86rem;line-height:1.6;max-width:56ch}
.mv-aviso p b{color:var(--text)}
.mv-custom{margin-bottom:1.1rem;border-color:rgba(245,166,35,.35)}
.mv-custom.recusado{border-color:color-mix(in srgb,#e74c3c 55%,var(--border))}
.mv-custom.recusado p b{color:#ff9b8f}

/* Tags: cada cartão é a linha do chat como ela sai no jogo. */
.grade-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.cartao-tag,.cartao-trail{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--bg3);border:1px solid var(--border);
    border-radius:12px;padding:.75rem;color:var(--text);cursor:pointer;
    transition:border-color .18s,transform .18s var(--curva),box-shadow .18s}
.cartao-tag.marcado,.cartao-trail.marcado{border-color:var(--cor);box-shadow:inset 0 0 0 1px var(--cor),0 8px 24px color-mix(in srgb,var(--cor) 12%,transparent)}
.cartao-tag:active,.cartao-trail:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
    .cartao-tag:hover,.cartao-trail:hover{border-color:var(--border2);transform:translateY(-1px)}
    .cartao-tag.marcado:hover,.cartao-trail.marcado:hover{border-color:var(--cor)}
}
.ct-chat{display:block;background:linear-gradient(160deg,#1c2733,#0f151c);border-radius:7px;padding:.6rem .65rem;font-weight:600;font-size:.88rem;
    text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-pe{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.6rem;padding:0 .15rem}
.ct-pe b{font-size:.82rem;font-weight:700}
.ct-pe small{font-size:.7rem;color:var(--muted);text-align:right}
.ct-marca{position:absolute;top:.5rem;right:.5rem;width:20px;height:20px;border-radius:50%;background:var(--cor);color:#0a0a0f;
    display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s var(--curva)}
.ct-marca svg{width:12px;height:12px}
.cartao-tag.marcado .ct-marca{opacity:1;transform:scale(1)}
/* Juntas ou uma em cada (11/10/2026): a grade do placar mostra a linha do placar. */
.tags-modo{margin:0 0 1rem}
.tags-sub{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:1.2rem 0 .55rem .2rem}
.tags-sub:first-child{margin-top:0}
/* No cartão, a linha do placar até o card do rank, no painel cinza do jogo. */
.placar-cs.ct-placar{grid-template-columns:22px minmax(0,1fr) auto;gap:5px;height:auto;padding:5px 6px;font-size:.92rem;
    border-radius:7px;background:#566b8c;border:5px solid #33312c}
.ct-placar .pl-av{width:22px;height:22px}
.ct-placar .pl-card svg{width:46px}

.grade-trails{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
.cartao-trail .cr-tela{height:116px;border-radius:8px}
.cr-nada{display:flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--muted)}
.cr-nada svg{width:30px;height:30px}
.cr-nome{display:block;font-size:.82rem;font-weight:700;padding:.6rem .15rem 0}
.grade-trails.travado .cartao-trail{opacity:.4;cursor:not-allowed}
.cartao-trail.bloqueada{cursor:not-allowed}
.cartao-trail.bloqueada .cr-tela{opacity:.38;filter:saturate(.6)}
.cartao-trail.bloqueada .cr-nome{color:var(--muted2)}
.cr-cadeado{position:absolute;top:1.1rem;right:1.1rem;display:inline-flex;align-items:center;gap:.3rem;padding:.24rem .5rem;border-radius:7px;
    background:rgba(5,5,7,.78);border:1px solid var(--border2);font-size:.64rem;font-weight:800;letter-spacing:.07em;color:#a77bff}
.cr-cadeado svg{width:11px;height:11px}
.cr-cadeado[data-n="SAGUI"]{color:#6ec1ff}
.cr-cadeado[data-n="VIP"]{color:#3ddc84}
.cr-cadeado[data-n="DONO"]{color:#f5a623}
@media (hover:hover) and (pointer:fine){.cartao-trail.bloqueada:hover{transform:none;border-color:var(--border)}}
.ben-frases{margin-top:1rem}
.ben-frases:empty{display:none}
.trava-trail{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:color-mix(in srgb,var(--cor) 8%,var(--bg3));
    border:1px solid color-mix(in srgb,var(--cor) 30%,transparent);border-radius:12px;padding:.8rem 1rem;font-size:.85rem;color:var(--muted2)}
.trava-trail svg{width:17px;height:17px;color:var(--cor)}
.trava-trail a{margin-left:auto;color:var(--cor);font-weight:700}

/* Benefícios: uma linha por benefício, chave à direita. */
.lista-ben{display:grid;gap:.55rem}
.ben{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4rem 1rem;background:var(--bg3);border:1px solid var(--border);
    border-radius:12px;padding:.85rem 1rem}
.ben-txt b{display:block;font-size:.9rem;font-weight:700;transition:color .18s}
.ben-txt span{display:block;font-size:.76rem;color:var(--muted);margin-top:.15rem}
.ben.desligado .ben-txt b{color:var(--muted2)}

.chave{position:relative;width:46px;height:26px;border-radius:99px;border:1px solid var(--border2);background:var(--bg4);cursor:pointer;
    transition:background .2s,border-color .2s;flex-shrink:0}
.chave i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted2);
    transition:transform .2s var(--curva),background .2s}
.chave[aria-checked="true"]{background:var(--cor);border-color:var(--cor)}
.chave[aria-checked="true"] i{transform:translateX(20px);background:#0a0a0f}

.ben-extra{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;padding-top:.55rem;margin-top:.2rem;border-top:1px solid var(--border)}
.ben.desligado .ben-extra{opacity:.45}
.segmento{display:inline-flex;gap:3px;padding:3px;background:var(--bg4);border-radius:9px}
.segmento button{background:transparent;border:none;color:var(--muted2);font-size:.76rem;font-weight:700;padding:.42rem .75rem;border-radius:7px;cursor:pointer;
    transition:background .18s,color .18s}
.segmento button[aria-checked="true"]{background:var(--bg2);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 40%,transparent)}
.link-frases{background:none;border:none;color:var(--cor);font-size:.78rem;font-weight:700;cursor:pointer}
.link-frases:hover{text-decoration:underline}

/* O menu do jogo: a tela do CS2 em 16:9 e o menu de verdade por cima, no mesmo lugar e no mesmo tamanho de
   uma tela de 1080 (400 de 1920 de largura). */
.menu-lugares{flex-wrap:wrap;margin-bottom:.9rem}
.menu-lugares button{display:inline-flex;align-items:center;gap:.4rem}
.menu-lugares button:disabled{opacity:.5;cursor:not-allowed}
.menu-lugares svg{width:13px;height:13px}
#menu-jogo .trava-trail{margin-bottom:.9rem}
.tela-jogo{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border2);background:var(--bg3);user-select:none;-webkit-user-select:none}
.tj-fundo{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.9)}
.tj-menu{position:absolute;width:20.8333%;height:auto;border-radius:5px;box-shadow:0 10px 28px rgba(0,0,0,.45);
    transition:left .3s var(--curva),top .3s var(--curva),box-shadow .18s}
.tela-jogo.solta .tj-menu{cursor:grab;touch-action:none;outline:1px dashed color-mix(in srgb,var(--cor) 70%,transparent);outline-offset:3px}
.tj-menu.pegando{cursor:grabbing;transition:box-shadow .18s;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.tj-menu:focus-visible{outline:2px solid var(--cor);outline-offset:3px}
.tj-pe{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1rem;margin-top:.8rem;min-height:2.6rem}
.tj-pe span{color:var(--muted2);font-size:.82rem}
#tj-salvar[hidden]{display:none}

.ben-sep{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 .15rem .2rem}
.ben.fixo{background:transparent}
.sempre{font-size:.7rem;font-weight:700;color:var(--muted2);background:var(--bg4);border-radius:99px;padding:.28rem .65rem;white-space:nowrap}

/* ── Editar perfil ────────────────────────────────────────────────── */
.perfil-modal{width:min(560px,100%)}
.mp-campo{margin-bottom:1.15rem}
.mp-rot{display:block;font-size:.75rem;color:var(--muted2);margin-bottom:.4rem;font-weight:600}
.mp-banner{position:relative;aspect-ratio:3/1;border:1px dashed var(--border2);border-radius:12px;overflow:hidden;background:var(--bg2);
    touch-action:none;user-select:none}
.mp-banner.com{border-style:solid;cursor:grab}
.mp-banner.com:active{cursor:grabbing}
.mp-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mp-banner-vazio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;color:var(--muted);font-size:.8rem}
.mp-banner-vazio svg{width:26px;height:26px}
.mp-dica{font-size:.74rem;color:var(--muted);line-height:1.5;margin:.5rem 0 .65rem}
.mp-banner-acoes{display:flex;gap:.5rem;flex-wrap:wrap}
.mp-arquivo{display:inline-flex;align-items:center;cursor:pointer}
#mp-bio{display:block;width:100%;min-height:86px;resize:vertical;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);
    color:var(--text);padding:.6rem .8rem;font-size:.88rem;font-family:inherit;line-height:1.5;outline:none;transition:border-color .2s}
#mp-bio:focus{border-color:var(--cor)}
.mp-conta{display:block;text-align:right;font-size:.7rem;color:var(--muted);margin-top:.3rem;font-variant-numeric:tabular-nums}
.mp-cores{display:flex;flex-wrap:wrap;gap:.6rem}
.mp-cores button{width:30px;height:30px;border-radius:50%;background:var(--c);border:2px solid var(--bg3);cursor:pointer;
    box-shadow:0 0 0 1px var(--border2);transition:transform .15s var(--curva),box-shadow .15s}
.mp-cores button[aria-checked="true"]{box-shadow:0 0 0 2px var(--text);transform:scale(1.08)}
.mp-acoes{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem}

/* ── Aviso rápido ─────────────────────────────────────────────────── */
.toast-perfil{position:fixed;left:50%;bottom:1.5rem;z-index:1000;max-width:calc(100vw - 2rem);background:var(--bg3);border:1px solid var(--border2);
    border-radius:12px;padding:.7rem 1.05rem;font-size:.84rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.6);
    transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:transform .22s var(--curva),opacity .22s}
.toast-perfil.aberto{transform:translate(-50%,0);opacity:1}
.toast-perfil.erro{border-color:color-mix(in srgb,var(--red) 60%,transparent);color:#ff9b8f}

footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:2rem 2.5rem;display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.8rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.3rem}
footer a{color:var(--muted2);transition:color .2s}
footer a:hover{color:var(--accent)}

/* ── Celular e tablet ─────────────────────────────────────────────── */
@media (max-width:900px){
    .cartao-rank{grid-template-columns:1fr auto}
    .p-pts{justify-self:start}
    .p-linha{grid-column:1/-1;grid-row:2}
    .cr-mais{grid-column:2;grid-row:1}
}
@media (max-width:700px){
    .casca{padding:1rem 1rem 4rem}
    .capa-corpo{grid-template-columns:1fr;gap:.2rem;padding:0 1.1rem 1.3rem}
    .avatar{width:92px;height:92px;margin-top:-46px}
    .avatar span{font-size:2rem}
    .ident{padding-top:.5rem}
    .ident h1{font-size:1.6rem}
    .btn-editar{width:100%;justify-content:center}
    .cartao-rank{grid-template-columns:1fr;gap:1rem;padding:1rem}
    .p-pts{justify-self:stretch}
    .cr-mais{grid-column:1;grid-row:auto;justify-content:center}
    .p-linha{grid-template-columns:repeat(3,1fr);grid-row:auto}
    .nj-grade{grid-template-columns:1fr}
    /* No celular o placar fica com o essencial: foto, tag, nome, card, vítimas e pontos. */
    .placar-jogo{--pj-col:22px minmax(0,1fr) 42px 36px 40px;padding:.5rem .5rem .6rem}
    .pj-sinal,.pj-armas,.pj-din,.pj-mortes,.pj-ast,.pj-mvp,.pl-ping,.pl-armas,.pl-din,.pl-mortes,.pl-ast,.pl-mvp{display:none}
    .placar-jogo .placar-cs{font-size:.88rem}
    .placar-jogo .pl-av{width:22px;height:22px}
    .placar-jogo .pl-card svg{width:40px}
    .meu-vip{padding:1.1rem}
    .grade-tags{grid-template-columns:1fr}
    .grade-trails{grid-template-columns:1fr 1fr}
    .cartao-trail .cr-tela{height:96px}
    footer{padding:1.6rem 1rem}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}