/* Saavutus — visual baseado na pasta ref (Home, Inside e Gamer App). */

:root {
  --fundo: #3c404b;
  --fundo-fundo: #2f323b;       /* fora da coluna central no desktop */
  --cartao: #32363f;
  --cartao-hover: #2c3038;
  --campo: #2a2d35;
  --linha: #4b505c;
  --botao-redondo: #4a4e59;
  --texto: #ffffff;
  --texto-2: #d2d5db;
  --texto-3: #9aa0ab;
  --destaque: #1ea7f5;
  --destaque-escuro: #1386c9;
  --perigo: #ef5b5b;
  --ok: #4fc483;

  --platina: #6f8fd6;
  --ouro: #e1b453;
  --prata: #c5c8ce;
  --bronze: #c6784a;

  --raio: 6px;
  --raio-grande: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --fonte: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largura-coluna: 640px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo-fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
a { color: var(--destaque); }
.icone { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.icone svg { width: 100%; height: 100%; }
.oculto-acessivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============ Estrutura (estilo Twitter/Bluesky) ============ */
.app {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--largura-coluna)) 1fr;
  min-height: 100%;
}
.nav-lateral {
  grid-column: 1;
  justify-self: end;
  position: sticky; top: 0;
  height: 100vh;
  width: 250px;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.coluna {
  grid-column: 2;
  background: var(--fundo);
  min-height: 100vh;
  border-left: 1px solid #353943;
  border-right: 1px solid #353943;
  padding-bottom: 40px;
}
.painel {
  grid-column: 3;
  position: sticky; top: 0;
  align-self: start;
  width: 320px;
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; letter-spacing: .2px;
  padding: 6px 12px 18px;
  color: var(--texto); text-decoration: none;
}
.marca .icone { width: 30px; height: 30px; color: var(--destaque); }

.nav-item {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  border-radius: 999px;
  color: var(--texto-2); text-decoration: none;
  font-size: 18px; font-weight: 600;
  border: 0; background: none; text-align: left;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
.nav-item.ativo { color: var(--texto); font-weight: 800; }
.nav-item .icone { width: 26px; height: 26px; }
.nav-acao {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border: 0; border-radius: 999px;
  background: var(--destaque); color: #fff;
  font-weight: 800; font-size: 16px;
}
.nav-acao:hover { background: var(--destaque-escuro); }
.nav-rodape { margin-top: auto; padding: 0 12px; font-size: 12px; color: var(--texto-3); }

.abas-baixo { display: none; }

/* Tablet: menu só com ícones, sem painel da direita */
@media (max-width: 1180px) {
  .app { grid-template-columns: 1fr minmax(0, var(--largura-coluna)) 1fr; }
  .painel { display: none; }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 88px minmax(0, 1fr); max-width: calc(88px + var(--largura-coluna)); margin: 0 auto; }
  .nav-lateral { width: 88px; padding: 16px 10px; align-items: center; justify-self: stretch; }
  .nav-item span:not(.icone), .marca span:not(.icone), .nav-acao span:not(.icone), .nav-rodape { display: none; }
  .nav-item { padding: 12px; }
  .marca { padding: 6px 0 18px; }
  .nav-acao { width: 52px; height: 52px; padding: 0; }
}

/* Celular: uma coluna e abas embaixo */
@media (max-width: 640px) {
  body { background: var(--fundo); }
  .app { display: block; max-width: none; }
  .nav-lateral { display: none; }
  .coluna { border: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .abas-baixo {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: rgba(44, 47, 56, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #353943;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .abas-baixo a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 0 8px;
    color: var(--texto-3); text-decoration: none; font-size: 11px; font-weight: 700;
  }
  .abas-baixo a .icone { width: 25px; height: 25px; }
  .abas-baixo a.ativo { color: var(--texto); }
  .fab {
    position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 21;
    width: 56px; height: 56px; border-radius: 50%;
    border: 0; background: var(--destaque); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sombra);
  }
  .fab .icone { width: 28px; height: 28px; }
}
@media (min-width: 641px) { .fab { display: none; } }

/* ============ Topo das telas ============ */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  min-height: 64px; padding: 8px 12px;
  background: rgba(60, 64, 75, .92);
  backdrop-filter: blur(10px);
}
.topo h1 { margin: 0; text-align: center; font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .direita { justify-self: end; }

.botao-redondo {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--botao-redondo); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.botao-redondo:hover { background: #575c68; }
.botao-redondo .icone { width: 24px; height: 24px; }
.botao-redondo.pequeno { width: 38px; height: 38px; }
.botao-redondo.pequeno .icone { width: 20px; height: 20px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--linha); background: transparent; color: var(--texto);
  font-weight: 700; font-size: 14px;
}
.botao { text-decoration: none; }
.botao:hover { background: rgba(255, 255, 255, .06); }
.botao.primario { background: var(--destaque); border-color: var(--destaque); }
.botao.primario:hover { background: var(--destaque-escuro); }
.botao.perigo { color: var(--perigo); border-color: rgba(239, 91, 91, .5); }
.botao:disabled { opacity: .5; cursor: default; }
.botao .icone { width: 18px; height: 18px; }

/* ============ Perfil (ref Home.pdf) ============ */
.perfil { text-align: center; padding: 0 20px; }
.perfil-banner { height: 150px; background: linear-gradient(135deg, #2b3a55, #47335a); background-size: cover; background-position: center; }
.perfil-avatar {
  width: 170px; height: 170px; border-radius: 50%;
  margin: 26px auto 0; object-fit: cover;
  background: var(--cartao);
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 800; color: var(--texto-3);
  border: 4px solid var(--fundo);
}
.perfil-banner + .perfil .perfil-avatar { margin-top: -85px; }
.perfil-nome { font-size: 30px; font-weight: 500; margin: 14px 0 0; }
.perfil-usuario { color: var(--texto-3); margin: 2px 0 0; }
.perfil-bio { color: var(--texto-2); margin: 10px auto 0; max-width: 440px; white-space: pre-line; }
.perfil-acoes { display: flex; justify-content: center; gap: 30px; margin: 26px 0 8px; }
.perfil-acao { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; color: var(--texto); font-size: 15px; }
.perfil-acao .botao-redondo { width: 66px; height: 66px; pointer-events: none; }
.perfil-acao .botao-redondo .icone { width: 30px; height: 30px; }

.estatisticas { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 6px; color: var(--texto-2); }
.estatistica { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.estatistica .icone { width: 22px; height: 22px; }
.estatistica small { color: var(--texto-3); font-weight: 600; }

.divisor { border: 0; border-top: 1.5px solid #e9eaee; margin: 30px 26px 0; opacity: .9; }
.secao-titulo { text-align: center; font-size: 26px; font-weight: 500; margin: 28px 0 14px; }

/* ============ Filtros ============ */
/* Os botões de filtro ficam numa linha só (rolam de lado se não couberem);
   ordem e grade vão na linha de baixo, alinhados à direita */
.barra-filtros { display: flex; align-items: center; justify-content: flex-end; gap: 4px 8px; padding: 0 26px 16px; flex-wrap: wrap; }
.barra-filtros .chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.barra-filtros .chips::-webkit-scrollbar { display: none; }
.barra-filtros .chip { flex: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip {
  padding: 5px 11px; border-radius: 5px;
  border: 1px solid #4d525e; background: transparent;
  color: var(--texto-2); font-size: 13px; font-weight: 700;
}
.chip:hover { color: var(--texto); }
.chip.ativo { background: #4f5566; border-color: #4f5566; color: #fff; }
.chip .n { color: var(--texto-3); font-weight: 600; margin-left: 4px; }
.chip.ativo .n { color: #dfe3ea; }
.seletor {
  background: transparent; border: 0; color: var(--texto-2);
  font-size: 13px; font-weight: 700; padding: 4px;
}
.seletor option { background: var(--cartao); }

/* ============ Lista de jogos (ref Home.pdf) ============ */
.jogos { display: flex; flex-direction: column; gap: 18px; padding: 0 26px; }
.jogo-linha {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 14px; padding-right: 96px;
  background: var(--cartao);
  color: var(--texto); text-decoration: none;
  min-height: 138px;
}
.jogo-linha:hover { background: var(--cartao-hover); }
.jogo-linha .capa { width: 110px; height: 110px; }
.jogo-linha-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.jogo-linha-titulo { font-size: 22px; font-weight: 500; flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.jogo-linha-trofeus { display: flex; align-items: center; gap: 10px; font-size: 18px; white-space: nowrap; }
.jogo-linha-trofeus .icone { width: 34px; height: 34px; }
.jogo-linha-status { font-size: 12px; color: var(--texto-3); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; width: 100%; }
.selo {
  position: absolute; top: 12px; right: 8px;
  padding: 4px 12px; border: 2px solid #fff; border-radius: 9px;
  font-size: 17px; font-weight: 500; line-height: 1.2;
  background: transparent;
}
.selo.mini { position: static; font-size: 12px; padding: 2px 8px; border-width: 1.5px; border-radius: 6px; display: inline-block; }
.jogo-linha .barra { position: absolute; left: 0; right: 0; bottom: -6px; }
.barra { height: 4px; background: rgba(255, 255, 255, .08); }
.barra > i { display: block; height: 100%; background: var(--destaque); }
.barra.cheia > i { background: var(--platina); }

.capa { object-fit: cover; background: #23262e; flex: none; }
.capa-vazia {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #2a2e37, #20232a);
  color: #5d6370; font-weight: 800; font-size: 26px; text-transform: uppercase; overflow: hidden;
}

/* Grade de capas (ref Gamer App.pdf) */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px; padding: 0 26px; }
.capa-card { position: relative; display: block; aspect-ratio: 2 / 3; border: 1px solid #4b505c; overflow: hidden; color: inherit; text-decoration: none; background: #23262e; }
.capa-card .capa { width: 100%; height: 100%; }
.capa-card .barra { position: absolute; left: 0; right: 0; bottom: 0; }
.capa-card .pct { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .65); border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 800; }
.capa-card.adicionar { display: flex; align-items: center; justify-content: center; background: transparent; border-color: #5a606d; cursor: pointer; }
.capa-card.adicionar span.bola { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #23262e; display: flex; align-items: center; justify-content: center; }
.capa-card.adicionar:hover { background: rgba(255, 255, 255, .04); }

.vazio { text-align: center; color: var(--texto-3); padding: 40px 30px; }
.vazio > .icone { width: 48px; height: 48px; margin-bottom: 8px; opacity: .6; }
.vazio p { margin: 4px 0 18px; }

/* ============ Tela do jogo (ref Inside - playstation.pdf) ============ */
.jogo-cabecalho { display: flex; gap: 18px; padding: 6px 26px 22px; align-items: flex-start; }
.jogo-cabecalho .capa { width: 120px; height: 120px; border-radius: 4px; }
.jogo-cabecalho-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.jogo-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--texto-3); font-size: 13px; }
.progresso-grande { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.progresso-grande .icone { width: 28px; height: 28px; }
.progresso-grande .barra { flex: 1; height: 6px; border-radius: 3px; overflow: hidden; }
.por-tipo { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); }
.por-tipo span { display: inline-flex; align-items: center; gap: 4px; }
.por-tipo .icone { width: 18px; height: 18px; }
.campo-status {
  align-self: flex-start;
  background: var(--campo); border: 1px solid var(--linha); border-radius: 999px;
  padding: 6px 12px; font-weight: 700; font-size: 13px;
}

.acoes-jogo { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 26px 16px; }
.trofeus-cabecalho {
  display: grid; grid-template-columns: 1fr 70px 70px; gap: 8px;
  padding: 8px 26px 10px 44px; font-size: 15px; font-weight: 500; color: var(--texto);
}
.trofeus-cabecalho span:not(:first-child) { text-align: center; }
.trofeus { display: flex; flex-direction: column; gap: 16px; padding: 0 26px; }
.trofeu {
  display: grid; grid-template-columns: 110px 1fr 70px 70px; gap: 16px; align-items: center;
  background: var(--cartao); padding: 14px;
}
.trofeu.conquistado { background: #343944; }
.trofeu .capa { width: 110px; height: 110px; }
.trofeu-nome { font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.trofeu-desc { color: var(--texto-2); font-size: 14px; margin-top: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.trofeu-data { color: var(--texto-3); font-size: 12px; margin-top: 6px; }
.trofeu-tipo { display: flex; justify-content: center; }
.trofeu-tipo .icone { width: 40px; height: 40px; }
.trofeu-editar { display: flex; gap: 6px; margin-top: 8px; }

.copa-platinum { color: var(--platina); }
.copa-gold { color: var(--ouro); }
.copa-silver { color: var(--prata); }
.copa-bronze { color: var(--bronze); }

.marcar {
  justify-self: center;
  width: 36px; height: 36px; border-radius: 4px;
  border: 2.5px solid #e6e7ea; background: transparent; color: #3c404b;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.marcar .icone { width: 28px; height: 28px; opacity: 0; }
.marcar[aria-checked="true"] { background: #e6e7ea; }
.marcar[aria-checked="true"] .icone { opacity: 1; }
.marcar:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.marcar:disabled { opacity: .5; cursor: default; }

/* ============ Busca ============ */
.campo-busca {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 26px 18px; padding: 0 16px;
  background: var(--campo); border: 1px solid transparent; border-radius: 999px;
}
.campo-busca:focus-within { border-color: var(--destaque); background: #262930; }
.campo-busca .icone { color: var(--texto-3); }
.campo-busca input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; padding: 13px 0; font-size: 16px; }
.painel .campo-busca { margin: 0; }

.resultado { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--cartao); }
.resultado .capa { width: 64px; height: 86px; }
.resultado-info { flex: 1; min-width: 0; }
.resultado-titulo { font-weight: 700; font-size: 16px; }
.resultado-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; color: var(--texto-3); font-size: 13px; }
.resultado .botao { flex: none; }
.resultado .na-biblioteca { color: var(--ok); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.credito { color: var(--texto-3); font-size: 12px; text-align: center; margin: 18px 26px 0; }
.aviso { margin: 0 26px 14px; padding: 10px 14px; border-radius: var(--raio); background: rgba(225, 180, 83, .12); color: #f1d38f; font-size: 14px; }

/* ============ Painel da direita ============ */
.cartao-painel { background: var(--fundo); border-radius: var(--raio-grande); padding: 16px 18px; }
.cartao-painel h2 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.linha-tipo { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; color: var(--texto-2); }
.linha-tipo span { display: inline-flex; align-items: center; gap: 8px; }
.linha-tipo .icone { width: 22px; height: 22px; }
.linha-tipo b { color: var(--texto); }
.recente { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: inherit; text-decoration: none; }
.recente .capa { width: 40px; height: 40px; border-radius: 4px; }
.recente > div:not(.capa) { min-width: 0; flex: 1; }
.recente b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recente small { color: var(--texto-3); }

/* ============ Ajustes ============ */
.ajustes { padding: 0 26px; display: flex; flex-direction: column; gap: 18px; }
.ajustes section { background: var(--cartao); padding: 18px; }
.ajustes h2 { margin: 0 0 6px; font-size: 17px; }
.ajustes p { margin: 0 0 14px; color: var(--texto-2); font-size: 14px; }
.ajustes .botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* ============ Amigos ============ */
.nav-item, .abas-baixo a { position: relative; }
.contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--perigo); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.contador[hidden] { display: none; }
.nav-item .contador { margin-left: auto; }
.abas-baixo a .contador { position: absolute; top: 4px; left: calc(50% + 6px); }
@media (max-width: 1000px) and (min-width: 641px) { .nav-item .contador { position: absolute; top: 6px; right: 6px; } }
.amigos { padding: 0 26px 6px; }
.amigos-dica { color: var(--texto-2); font-size: 14px; margin: 0 0 12px; }
.amigo-novo-linha { display: flex; gap: 8px; }
.amigo-novo-linha input { flex: 1; min-width: 0; }
.pessoas { padding: 0 26px; display: flex; flex-direction: column; }
.pessoa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.pessoa-info { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--texto); text-decoration: none; }
.pessoa-info div { display: flex; flex-direction: column; min-width: 0; }
.pessoa-info b, .pessoa-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-info small { color: var(--texto-3); }
.pessoa-avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: var(--cartao); color: var(--texto-3); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.pessoa .botoes { display: flex; gap: 8px; align-items: center; flex: none; }
.perfil-amizade { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 4px; }
.selo-amigo { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--cartao); font-weight: 700; font-size: 14px; }
.selo-amigo .icone { width: 18px; height: 18px; color: var(--destaque); }
.selo-amigo.pendente { color: var(--texto-2); }
.jogo-dono { display: inline-block; margin-bottom: 6px; color: var(--destaque); font-weight: 700; font-size: 14px; text-decoration: none; }
@media (max-width: 640px) {
  .amigos, .pessoas { padding-left: 14px; padding-right: 14px; }
  .pessoa { flex-wrap: wrap; }
  .pessoa .botoes { margin-left: 60px; }
}

/* ============ Feed ============ */
.escrever { display: flex; gap: 12px; padding: 14px 26px; border-bottom: 1px solid var(--linha); }
.escrever-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.escrever-texto {
  width: 100%; min-height: 48px; resize: none; overflow-y: auto;
  background: transparent; border: 0; color: var(--texto); font: inherit; font-size: 17px; padding: 12px 0 0;
}
.escrever-texto:focus { outline: 0; }
.escrever-texto::placeholder { color: var(--texto-3); }
.escrever-barra { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--linha); padding-top: 8px; }
.escrever-barra .espaco { flex: 1; }
.escrever-conta { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.escrever-conta.perto { color: var(--perigo); font-weight: 700; }
.escrever-barra .botao { padding: 7px 18px; }
.escrever-imagem { position: relative; display: inline-block; }
.escrever-imagem img { max-width: 100%; max-height: 300px; border-radius: 12px; display: block; }
.escrever-imagem .botao-redondo { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .65); }
.posts { display: flex; flex-direction: column; }
.post { display: flex; gap: 12px; padding: 14px 26px; border-bottom: 1px solid var(--linha); }
.post-avatar { flex: none; text-decoration: none; }
.post-corpo { flex: 1; min-width: 0; }
.post-cabecalho { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.post-cabecalho a { display: flex; gap: 6px; align-items: baseline; min-width: 0; color: var(--texto); text-decoration: none; }
.post-cabecalho a:hover b { text-decoration: underline; }
.post-cabecalho b, .post-cabecalho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-cabecalho span, .post-cabecalho time { color: var(--texto-3); font-size: 14px; }
.post-cabecalho time { flex: none; }
.post-cabecalho time::before { content: '· '; }
.post-texto { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.post-imagem { display: block; margin-top: 10px; max-width: 100%; max-height: 520px; border-radius: 12px; border: 1px solid var(--linha); }
.post-acoes { display: flex; gap: 18px; margin-top: 8px; margin-left: -8px; }
.post-acao {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px;
  background: none; border: 0; color: var(--texto-3); font-size: 13px; font-weight: 700;
}
.post-acao:hover { color: var(--texto); background: rgba(255, 255, 255, .06); }
.post-acao .icone { width: 19px; height: 19px; }
.post-acao.curtido { color: #ec4899; }
.posts-mais { display: flex; justify-content: center; padding: 18px; }
.posts-mais:empty { display: none; }
.abas-perfil { display: flex; justify-content: center; padding: 18px 26px 14px; }
.abas-perfil-chips { flex: none; }
@media (max-width: 640px) {
  .escrever, .post { padding-left: 14px; padding-right: 14px; }
}

.convite-novo { flex-direction: row; margin-bottom: 14px; }
.convite-novo input { flex: 1; min-width: 0; }
.convites { display: flex; flex-direction: column; }
.convite { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.convite > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.convite code { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--texto); }
.convite span { font-size: 13px; color: var(--texto-2); }
.convite.usado code { color: var(--texto-3); text-decoration: line-through; }
.convite .botoes { flex-wrap: nowrap; align-items: center; }

/* ============ Entrar ============ */
.entrar { max-width: 380px; margin: 0 auto; padding: 50px 24px; }
.entrar .marca { justify-content: center; font-size: 30px; }
.entrar .marca .icone { width: 40px; height: 40px; }
.entrar .marca span:not(.icone) { display: inline; } /* o menu compacto esconde o nome; aqui ele fica */
.entrar > p { text-align: center; color: var(--texto-2); margin: 0 0 26px; }
.abas-entrar { display: flex; gap: 6px; margin-bottom: 18px; }
.abas-entrar .chip { flex: 1; padding: 9px; font-size: 14px; }

/* ============ Formulários e modais ============ */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.form input[type="text"], .form input[type="password"], .form input[type="url"], .form input[type="number"], .form select, .form textarea {
  width: 100%; padding: 11px 12px;
  background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: 15px; font-weight: 500; color: var(--texto);
}
.form textarea { min-height: 90px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--destaque); }
.form .dica { font-size: 12px; font-weight: 500; color: var(--texto-3); }
.form .erro { color: var(--perigo); font-size: 14px; font-weight: 600; min-height: 0; }
.form .erro:empty { display: none; }
.form .linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.form .marcar-linha { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.escolha-plataforma, .escolha-tipo { display: flex; gap: 8px; flex-wrap: wrap; }
.escolha-plataforma .chip, .escolha-tipo .chip { padding: 8px 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.escolha-tipo .icone { width: 20px; height: 20px; }
.imagem-campo { display: flex; gap: 12px; align-items: center; }
.imagem-campo .capa { width: 64px; height: 64px; border-radius: 4px; }
.imagem-campo > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.imagem-campo .botao { align-self: flex-start; padding: 6px 12px; font-size: 13px; }
.previa { max-height: 240px; overflow: auto; background: var(--campo); border-radius: var(--raio); padding: 8px 12px; font-size: 13px; }
.previa div { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.previa .icone { width: 16px; height: 16px; }

.camada-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 12, 16, .6); }
.modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto;
  background: #363a44; border-radius: var(--raio-grande); box-shadow: var(--sombra);
  padding: 18px 22px 22px;
}
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modal-topo h2 { margin: 0; font-size: 19px; }
@media (max-width: 640px) {
  .camada-modal { align-items: flex-end; padding: 0; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #eef0f4; color: #23262e; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: var(--sombra); animation: entra .2s ease-out; }
.toast.erro { background: var(--perigo); color: #fff; }
@media (max-width: 640px) { .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.carregando { text-align: center; color: var(--texto-3); padding: 50px 0; }

/* ============ Ajustes para celular ============ */
@media (max-width: 640px) {
  .perfil-avatar { width: 130px; height: 130px; font-size: 50px; }
  .perfil-banner + .perfil .perfil-avatar { margin-top: -65px; }
  .perfil-banner { height: 120px; }
  .perfil-nome { font-size: 25px; }
  .divisor { margin: 26px 16px 0; }
  .barra-filtros, .jogos, .grade, .trofeus, .acoes-jogo, .jogo-cabecalho, .ajustes { padding-left: 14px; padding-right: 14px; }
  .campo-busca { margin-left: 14px; margin-right: 14px; }
  .jogos, .trofeus { gap: 12px; }
  .jogo-linha { min-height: 0; padding: 10px; padding-right: 66px; gap: 12px; }
  .jogo-linha .capa { width: 72px; height: 72px; }
  .jogo-linha-info { gap: 4px 12px; }
  .jogo-linha-titulo { font-size: 17px; flex-basis: 100%; }
  .jogo-linha-trofeus { font-size: 15px; gap: 6px; }
  .jogo-linha-trofeus .icone { width: 24px; height: 24px; }
  .selo { font-size: 12px; padding: 2px 8px; border-width: 1.5px; border-radius: 6px; top: 10px; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .trofeus-cabecalho { grid-template-columns: 1fr 44px 48px; padding: 6px 14px 8px 24px; font-size: 13px; }
  .trofeu { grid-template-columns: 56px 1fr 44px 48px; gap: 10px; padding: 10px; }
  .trofeu .capa { width: 56px; height: 56px; }
  .trofeu-tipo .icone { width: 30px; height: 30px; }
  .marcar { width: 32px; height: 32px; }
  .jogo-cabecalho .capa { width: 88px; height: 88px; }
  .topo h1 { font-size: 18px; }
  .form .linha-2 { grid-template-columns: 1fr; }
}

/* Tela de entrar: sem menus */
body.sem-conta .nav-lateral, body.sem-conta .painel, body.sem-conta .abas-baixo, body.sem-conta .fab { display: none; }
body.sem-conta .app { display: block; max-width: var(--largura-coluna); margin: 0 auto; }

/* Celular: filtros numa faixa com rolagem lateral; cabeçalho da lista de troféus some */
@media (max-width: 640px) {
  .barra-filtros .chips { margin: 0 -14px; padding: 0 14px; }
  .trofeus-cabecalho { display: none; }
}