/* dashboard.css — dashboard pós-login do hub (DESKTOP-only).
   v2 "Relíquia Celestial" (2026-07-13): céu estrelado vivo, tipografia Cinzel
   (fallback Georgia), ouro gravado + cristal, shimmer no JOGAR, medalhas no
   ranking, reveal em cascata, números vivos com pulso.
   COMPAT Maxthon 5 / Chromium antigo (mesma regra do hub.css):
   - SEM var(), SEM CSS grid, SEM gap em flex (usa margins), SEM backdrop-filter,
     SEM filter. Flexbox básico + keyframes + gradients + transforms OK.
   Paleta (literal): gold #f0c850 · gold-text #f5dc8a · gold-dim #e8d090 ·
     crystal #5aa0ff · night #060d26 · text #dfe7ff · dim #a8b8d0 · muted #7a8aa0.
   Escopo: classes só existem no dashboard — inertes no login/mobile. */

body.hub-dashboard-body { height: auto; min-height: 100%; overflow-y: auto; background: #060d26; }

/* scrollbar discreta no tema (WebKit) */
body.hub-dashboard-body::-webkit-scrollbar { width: 10px; }
body.hub-dashboard-body::-webkit-scrollbar-track { background: #050a1e; }
body.hub-dashboard-body::-webkit-scrollbar-thumb { background: rgba(240, 200, 80, 0.22); border-radius: 6px; }
body.hub-dashboard-body::-webkit-scrollbar-thumb:hover { background: rgba(240, 200, 80, 0.42); }

.hub-dashboard {
  display: flex; flex-direction: column; min-height: 100vh;
  background: #060d26;
  font-family: "Alegreya Sans", "Segoe UI", Tahoma, sans-serif;
}

/* ===== Céu vivo (fixo atrás de tudo) =====
   LISTRAS (reporte do Lucas, 2026-08-30): as faixas horizontais que cruzavam a
   tela inteira eram BANDING destes gradientes — não elemento nenhum do DOM.
   Rampa longa (500px+) com alfa baixo cabe em ~70 degraus de 8 bits, então cada
   degrau vira uma faixa de ~7px; como .hub-sky é `fixed`, a faixa fica PARADA na
   tela enquanto o conteúdo rola, e lê como listra riscada no monitor. Três
   mudanças matam isso:
   1. Fim de rampa na MESMA cor com alfa 0 (não `transparent`, que é preto
      transparente): sem isso a rampa também escorrega de matiz e marca mais.
   2. Parada intermediária + rampa mais curta: menos degraus visíveis por pixel.
   3. Trama de dither (.hub-sky:after): ruído de ±3/255 em xadrez de 2px que
      dissolve o degrau — é o que de fato apaga a listra, o resto só ajuda.
   Provado no espelho local isolando a camada (antes: anéis nítidos na metade
   de baixo; depois: liso). */
.hub-sky {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 500px at 78% -8%,
      rgba(90, 140, 230, 0.2), rgba(90, 140, 230, 0.06) 45%, rgba(90, 140, 230, 0) 72%),
    radial-gradient(700px 420px at 10% 6%,
      rgba(240, 200, 80, 0.07), rgba(240, 200, 80, 0.02) 45%, rgba(240, 200, 80, 0) 72%),
    radial-gradient(1150px 720px at 50% 122%,
      rgba(28, 56, 130, 0.26), rgba(28, 56, 130, 0.08) 42%, rgba(28, 56, 130, 0) 76%);
}
/* A trama. Alfa minúsculo de propósito: precisa quebrar o degrau, não aparecer.
   repeating-linear-gradient roda no Chromium do Maxthon (26+) — nada de filter
   nem SVG aqui. */
.hub-sky:after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.008) 0, rgba(255, 255, 255, 0.008) 1px,
      rgba(0, 0, 0, 0.008) 1px, rgba(0, 0, 0, 0.008) 2px),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.007) 0, rgba(255, 255, 255, 0.007) 1px,
      rgba(0, 0, 0, 0.007) 1px, rgba(0, 0, 0, 0.007) 2px);
}
/* A LISTRA (reporte do Lucas 30/08, 2ª rodada — o fix de dither NÃO era isto).
   A camada tem `opacity` e animação de transform, então o navegador a promove a
   CAMADA PRÓPRIA de composição — e a borda de baixo dela desenha uma linha fina
   de 1px onde a composição termina. Com `height: 130%` e um deslocamento de
   280px (s1) / 380px (s2), essa borda ENTRA na tela: medido num viewport de
   760px, a base da s2 vai de 988 até 609 ao longo do ciclo de 320s. É por isso
   que a listra aparecia em altura DIFERENTE em cada print — ela desce devagar.

   A regra que fecha isso é geométrica: a camada precisa sobrar, embaixo, MAIS
   do que ela se desloca. `bottom` negativo garante isso em qualquer altura de
   tela; `height: 130%` só garantiria acima de 1267px de viewport (0,3 × h ≥ 380),
   que não existe na prática. O excedente é cortado pelo `overflow:hidden` do
   `.hub-sky`, então não muda layout nenhum.

   Regra ao mexer aqui: |bottom| > distância do keyframe. Hoje 300 > 280 e
   400 > 380. O teste tests/test_hub_layout_revisao.py trava essa desigualdade. */
.hub-sky-stars {
  position: absolute; top: 0; left: 0; right: 0; bottom: -300px;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 38% 64%, rgba(190, 220, 255, 0.8), transparent),
    radial-gradient(1.8px 1.8px at 64% 12%, rgba(255, 240, 200, 0.75), transparent),
    radial-gradient(1.1px 1.1px at 82% 46%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 26% 86%, rgba(190, 220, 255, 0.75), transparent),
    radial-gradient(1px 1px at 94% 78%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 280px 280px; background-repeat: repeat;
  animation: hubDriftA 200s linear infinite;
}
.hub-sky-stars.s2 {
  /* desloca 380px (hubDriftB), então precisa sobrar mais que isso — ver acima */
  bottom: -400px;
  background-size: 380px 380px; opacity: 0.55;
  animation: hubDriftB 320s linear infinite, hubTwinkle 7s ease-in-out infinite alternate;
}
@keyframes hubDriftA { from { transform: translateY(0); } to { transform: translateY(-280px); } }
@keyframes hubDriftB { from { transform: translateY(0); } to { transform: translateY(-380px); } }
@keyframes hubTwinkle { from { opacity: 0.35; } to { opacity: 0.7; } }

/* ===== TopBar ===== */
/* A LISTRA — causa raiz achada em 31/08 por bisseção com o Lucas (?diag=barra).
   Duas hipóteses minhas antes desta estavam erradas: NÃO era banding do
   gradiente do céu, NÃO era a borda da camada de estrelas.

   `position: sticky` não existe abaixo do Chromium 56 — e o hub roda no
   Chromium 47 do Maxthon. Onde não existe, a declaração é INVÁLIDA e a barra
   cai pra `static`, deixando de ser bloco de contenção. Aí o `:after` dela
   (a borda dourada de 1px, com `left:0; right:0; bottom:0`) não tem mais
   ancestral posicionado e escapa para o BLOCO DE CONTENÇÃO INICIAL: desenha na
   largura inteira da tela, na altura do viewport em coordenadas do DOCUMENTO —
   e por isso aparecia em altura diferente a cada rolagem, cruzando a página.

   Uma causa, dois sintomas: a listra e "a barra não gruda ao rolar" eram o
   mesmo bug.

   `position: relative` ANTES do sticky é o conserto: quem tem sticky usa sticky
   (a última declaração vence); quem não tem ignora a linha do sticky e fica com
   `relative`, que já basta pra CONTER o `:after`. A barra não gruda no navegador
   antigo — mas desenha certo, que é o que importa.

   🔴 Regra ao adicionar `position: sticky` em qualquer lugar deste hub: declare
   `position: relative` na linha de cima. Travado por
   tests/test_hub_layout_revisao.py. */
.hub-topbar {
  position: relative;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 26px;
  background: linear-gradient(180deg, rgba(6, 11, 30, 0.97), rgba(7, 13, 34, 0.92));
}
.hub-topbar:after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 200, 80, 0.55) 25%, rgba(240, 200, 80, 0.55) 75%, transparent);
}
.hub-tb-brand { display: flex; align-items: center; }
.hub-tb-logo { margin-right: 10px; }
.hub-tb-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #f5dc8a;
  text-shadow: 0 0 18px rgba(240, 200, 80, 0.35);
}
.hub-tb-nav { display: flex; align-items: center; }
.hub-tb-link {
  position: relative; display: inline-block; margin: 0 6px; padding: 9px 18px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #a8b8d0; text-decoration: none; border-radius: 8px;
  transition: color 0.2s ease;
}
.hub-tb-link:after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, transparent, #f0c850, transparent);
  transform: scaleX(0); transition: transform 0.22s ease;
}
.hub-tb-link:hover { color: #dfe7ff; }
.hub-tb-link:hover:after { transform: scaleX(1); }
.hub-tb-link.is-active { color: #f5dc8a; }
.hub-tb-link.is-active:after { transform: scaleX(1); }
.hub-tb-user { display: flex; align-items: center; }
.hub-tb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a5aa8, #16306a);
  border: 1px solid rgba(240, 200, 80, 0.55);
  box-shadow: 0 0 12px rgba(58, 120, 208, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff5d6; font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 700;
  margin-right: 9px;
}
.hub-tb-uname { font-size: 14px; color: #dfe7ff; margin-right: 14px; letter-spacing: 0.4px; }
.hub-tb-logout {
  background: transparent; border: 1px solid rgba(240, 200, 80, 0.4);
  color: #e8d090; border-radius: 8px; padding: 6px 15px;
  font-family: "Alegreya Sans", "Segoe UI", sans-serif;
  font-size: 12px; letter-spacing: 1.5px; cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.hub-tb-logout:hover { border-color: #f0c850; color: #f5dc8a; box-shadow: 0 0 12px rgba(240, 200, 80, 0.25); }

/* ===== Conteúdo ===== */
.hub-content { position: relative; z-index: 1; flex: 1 1 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 24px; }

/* ===== Reveal em cascata (entrada do dashboard) ===== */
.hub-reveal { opacity: 0; animation: hubRise 0.55s ease-out forwards; }
.hub-reveal.d1 { animation-delay: 0.05s; }
.hub-reveal.d2 { animation-delay: 0.14s; }
.hub-reveal.d3 { animation-delay: 0.23s; }
.hub-reveal.d4 { animation-delay: 0.32s; }
.hub-reveal.d5 { animation-delay: 0.41s; }
.hub-reveal.d6 { animation-delay: 0.5s; }
@keyframes hubRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* pulso dourado quando um número vivo muda (players etc.) */
.hub-live-pulse { animation: hubLivePulse 0.9s ease-out 1; }
@keyframes hubLivePulse {
  0% { text-shadow: 0 0 4px rgba(240, 200, 80, 0.2); }
  35% { text-shadow: 0 0 22px rgba(240, 200, 80, 0.95), 0 0 40px rgba(240, 200, 80, 0.4); }
  100% { text-shadow: 0 0 4px rgba(240, 200, 80, 0.2); }
}

/* ===== Painel (glass relíquia) ===== */
/* Moldura: hub-base.css (T1.1). Aqui só o respiro e a transição — o que o
   painel do dashboard tem a mais que a moldura em si. */
.hub-panel {
  padding: 15px 17px; margin-bottom: 16px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hub-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 200, 80, 0.45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(240, 200, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hub-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(240, 200, 80, 0.14);
}
.hub-panel-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: #f5dc8a;
}
.hub-panel-title:before { content: "\25C6"; font-size: 8px; color: #f0c850; margin-right: 8px; vertical-align: 2px; }
.hub-panel-hint { font-size: 11px; color: #7a8aa0; letter-spacing: 1px; }
.hub-empty { font-size: 13px; color: #7a8aa0; padding: 8px 2px; line-height: 1.5; }

/* "ao vivo" (transparência: o painel declara que o dado é vivo) e o estado
   stale (comunicação direta: poll falhou -> avisa e esmaece, não finge) */
.hub-live-hint { display: inline-flex; align-items: center; }
.hub-live-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-right: 5px;
  background: #7fe0a0; box-shadow: 0 0 6px rgba(127, 224, 160, 0.8);
  animation: hubLiveBlink 2.4s ease-in-out infinite;
}
@keyframes hubLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.hub-panel.is-stale .hub-events, .hub-panel.is-stale .hub-ranking,
.hub-panel.is-stale .hub-status-grid { opacity: 0.45; }
.hub-panel.is-stale .hub-panel-hint { color: #e8b74a; }
.hub-status-badge.is-reconnecting { color: #e8b74a; }
.hub-status-badge.is-reconnecting .hub-status-dot { animation: hubLiveBlink 1s ease-in-out infinite; }

/* ===== aba Início: 2 colunas ===== */
.hub-inicio { display: flex; align-items: flex-start; }
.hub-col-left { flex: 1 1 auto; min-width: 0; }
.hub-col-right { flex: 0 0 336px; margin-left: 18px; }

/* Destaque — arte real do jogo com zoom lento + véu pra leitura */
.hub-feature {
  position: relative; overflow: hidden; min-height: 250px; border-radius: 16px; margin-bottom: 16px;
  border: 1px solid rgba(240, 200, 80, 0.32);
  background: linear-gradient(135deg, #1b3468, #101f4e 60%, #0a1438);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  display: flex; align-items: flex-end;
}
.hub-feature-art {
  position: absolute; top: -5%; left: -3%; right: -3%; bottom: -5%;
  background: url('/brand/hero-bg.jpg') center 20% no-repeat;
  background-size: cover;
  animation: hubHeroDrift 26s ease-in-out infinite alternate;
}
@keyframes hubHeroDrift { from { transform: scale(1); } to { transform: scale(1.07) translateY(-8px); } }
.hub-feature:after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(100deg, rgba(4, 9, 28, 0.94) 18%, rgba(4, 9, 28, 0.6) 52%, rgba(4, 9, 28, 0.18)),
    linear-gradient(0deg, rgba(4, 9, 28, 0.85), transparent 55%);
}
.hub-feature-body { position: relative; z-index: 2; padding: 26px 28px; }
/* Forma: hub-base.css (T1.1). Aqui o TOM de destaque -- o único selo em
   ouro CHEIO, porque é o que anuncia a novidade da home. O padding é maior de
   propósito: ele é lido a metros de distância, não dentro de uma lista. */
.hub-feature-tag {
  color: #241a04; background: linear-gradient(180deg, #f7df8e, #d9ae3e);
  padding: 4px 14px; margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(240, 200, 80, 0.35);
}
.hub-feature-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 28px; font-weight: 700; color: #fff5d6;
  margin-bottom: 9px; line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 34px rgba(240, 200, 80, 0.25);
}
.hub-feature-sum { font-size: 15px; color: #d5e0f4; max-width: 560px; line-height: 1.55; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }

/* ===== Banner dos Eventos Ativos (spec 2026-10-03, components/vitrine-eventos.js)
   O banner é o mesmo cartão do destaque — a MESMA arte do mundo ao fundo e o
   mesmo véu de leitura (Lucas, 03/10: "só o banner com o texto e a mesma imagem
   de fundo") — e dentro dele os slides de texto se sobrepõem e trocam por
   opacidade, ancorados embaixo como o destaque sempre foi. Altura FIXA de
   propósito: com textos de tamanhos diferentes, uma altura que segue o conteúdo
   faria a página pular a cada 10 s; o texto é que se ajusta (título e resumo em
   até 2 linhas). */
.hub-vitrine { display: block; min-height: 0; height: 304px; }
.hub-vitrine-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
/* O que sai some rápido e o que entra aparece logo depois: num fade cruzado
   inteiro os dois textos ficariam meio-transparentes um sobre o outro. */
.hub-vitrine-slide {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.hub-vitrine-slide.is-ativo {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s ease 0.2s, visibility 0s linear 0s;
}
.hub-vitrine .hub-feature-body { flex: 1 1 auto; min-width: 0; padding: 20px 28px 40px; }
.hub-vitrine .hub-feature-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-vitrine .hub-feature-sum {
  font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-vitrine-fatos { margin-bottom: 8px; }
.hub-vitrine-fato {
  font-size: 13px; line-height: 1.55; color: #dfe7ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.hub-vitrine-fato-rotulo { color: #f5dc8a; font-weight: 700; margin-right: 6px; }
.hub-vitrine-fato-rotulo:after { content: ":"; }
.hub-vitrine-ver { margin-top: 12px; }

/* As bolinhas. A borda TRANSPARENTE é a área de toque (o ponto que se vê é só o
   miolo, recortado por background-clip): um ponto de 10px seria um alvo
   impossível no celular. O anel dourado é sombra INTERNA para ficar colado no
   ponto, e não na borda invisível. `content-box` porque o hub é border-box: lá
   a borda de 7px comeria os 10px do ponto e ele sumiria (medido na vitrine). */
.hub-vitrine-dots { position: absolute; z-index: 3; left: 21px; bottom: 7px; }
.hub-vitrine-dot {
  position: relative; display: inline-block; vertical-align: middle;
  box-sizing: content-box;
  width: 10px; height: 10px; margin: 0; padding: 0; overflow: hidden;
  border: 7px solid transparent; border-radius: 999px;
  background-color: rgba(6, 13, 38, 0.65); background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(240, 200, 80, 0.65);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.2s ease;
}
.hub-vitrine-dot:hover { background-color: rgba(240, 200, 80, 0.4); }
.hub-vitrine-dot:focus { outline: none; box-shadow: inset 0 0 0 2px #f7df8e; }
.hub-vitrine-dot.is-ativo { width: 36px; background-color: rgba(240, 200, 80, 0.16); }
/* A pílula enche no tempo do slide (a duração vem do JS, do mesmo número do
   timer) e congela quando o banner pausa. */
.hub-vitrine-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #d9ae3e, #f7df8e);
  animation-name: hubVitrineEncher; animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.hub-vitrine.is-pausado .hub-vitrine-fill { animation-play-state: paused; }
@keyframes hubVitrineEncher { from { width: 0; } to { width: 100%; } }

/* Notícias — vêm do fórum (Evento · Novidade · Changelog); a linha inteira é o
   link do assunto. */
.hub-news-item {
  display: flex; align-items: center; padding: 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease;
}
.hub-news-item:last-child { border-bottom: 0; }
.hub-news-item:hover { transform: translateX(4px); background-color: rgba(240, 200, 80, 0.04); }
.hub-news-item:focus { outline: none; background-color: rgba(240, 200, 80, 0.07); }
.hub-news-ver {
  flex: none; margin-right: 12px; padding: 3px 9px; border-radius: 7px;
  min-width: 86px; box-sizing: border-box; text-align: center;
  font-family: "Cinzel", Georgia, serif; font-size: 11px; font-weight: 700; color: #f0c850;
  background: rgba(240, 200, 80, 0.1); border: 1px solid rgba(240, 200, 80, 0.25);
}
.hub-news-ver.is-evento { color: #ff9a4d; background: rgba(255, 154, 77, 0.1); border-color: rgba(255, 154, 77, 0.34); }
.hub-news-ver.is-novidade { color: #5aa0ff; background: rgba(90, 160, 255, 0.1); border-color: rgba(90, 160, 255, 0.36); }
.hub-news-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hub-news-title {
  font-size: 14px; color: #e6edfc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-news-date { font-size: 11px; color: #7a8aa0; margin-top: 2px; }
.hub-news-seta {
  flex: none; margin-left: 10px; font-size: 18px; color: rgba(240, 200, 80, 0.5);
  transition: transform 0.16s ease, color 0.16s ease;
}
.hub-news-item:hover .hub-news-seta { color: #f0c850; transform: translateX(2px); }
.hub-news-mais { font-size: 11px; letter-spacing: 1px; color: #e8d090; text-decoration: none; }
.hub-news-mais:hover { color: #f5dc8a; }

/* Ranking — Heróis de Vidalia */
.hub-rank-row {
  display: flex; align-items: center; padding: 9px 8px; border-radius: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hub-rank-row:last-child { border-bottom: 0; }
.hub-rank-row.is-first { background: linear-gradient(90deg, rgba(240, 200, 80, 0.1), rgba(240, 200, 80, 0.02)); border-bottom-color: transparent; }
.hub-rank-pos {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.06); color: #a8b8d0;
}
.hub-rank-pos.medal-gold {
  background: linear-gradient(160deg, #f9e49a, #c9992e); color: #3a2a08;
  box-shadow: 0 0 14px rgba(240, 200, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hub-rank-pos.medal-silver {
  background: linear-gradient(160deg, #eef3fa, #93a2b8); color: #232c3a;
  box-shadow: 0 0 10px rgba(200, 215, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.hub-rank-pos.medal-bronze {
  background: linear-gradient(160deg, #e8b488, #96603a); color: #2f1c0d;
  box-shadow: 0 0 10px rgba(200, 140, 90, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.hub-rank-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin-left: 12px; }
.hub-rank-name { font-size: 14px; color: #eef2ff; letter-spacing: 0.3px; }
.hub-rank-class { font-size: 11px; color: #8a9ab8; margin-top: 1px; }
.hub-rank-lvl { flex: none; font-size: 12px; color: #a8b8d0; letter-spacing: 0.5px; }
.hub-rank-lvl b { font-family: "Cinzel", Georgia, serif; font-size: 16px; color: #f5dc8a; margin-left: 3px; }

/* JogarCTA — shimmer + pulso de glow */
.hub-play {
  text-align: center; padding: 20px 18px 22px; margin-bottom: 16px; border-radius: 16px;
  border: 1px solid rgba(240, 200, 80, 0.42);
  background:
    radial-gradient(240px 120px at 50% 0%, rgba(90, 160, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(22, 42, 92, 0.66), rgba(9, 18, 46, 0.9));
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hub-play-top {
  display: block; font-family: "Cinzel", Georgia, serif;
  font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: #a8b8d0; margin-bottom: 13px;
}
.hub-play-btn {
  position: relative; overflow: hidden;
  width: 100%; font-family: "Cinzel", Georgia, serif;
  font-size: 26px; font-weight: 700; letter-spacing: 7px; padding: 14px 0 13px;
  animation: hubPlayGlow 2.8s ease-in-out infinite alternate;
}
.hub-play-btn:hover { transform: translateY(-1px) scale(1.01); }
@keyframes hubPlayGlow {
  from { box-shadow: 0 0 22px rgba(58, 120, 208, 0.5), inset 0 0 18px rgba(174, 221, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4); }
  to { box-shadow: 0 0 40px rgba(90, 160, 255, 0.75), 0 0 18px rgba(240, 200, 80, 0.35), inset 0 0 24px rgba(174, 221, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.45); }
}
.hub-play-shine {
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 248, 220, 0.4) 50%, transparent);
  transform: skewX(-18deg);
  animation: hubShine 3.6s ease-in-out infinite;
}
@keyframes hubShine { 0% { left: -80%; } 55% { left: 135%; } 100% { left: 135%; } }
.hub-play-sub { display: block; font-size: 11px; color: #7a8aa0; margin-top: 11px; letter-spacing: 0.5px; }

/* Meus heróis */
.hub-char {
  display: flex; align-items: center; padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.16s ease;
}
.hub-char:last-child { border-bottom: 0; }
.hub-char:hover { background-color: rgba(255, 255, 255, 0.03); }
.hub-char-lvl {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
  border: 1.5px solid; font-family: "Cinzel", Georgia, serif;
  font-size: 14px; font-weight: 700; margin-right: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hub-char-info { display: flex; flex-direction: column; }
.hub-char-name { font-size: 14px; color: #eef2ff; letter-spacing: 0.3px; }
.hub-char-class { font-size: 11px; color: #8a9ab8; margin-top: 1px; }

/* Servidor — status vivo */
.hub-status-badge { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #7a8aa0; }
.hub-status-badge.is-online { color: #7fe0a0; }
.hub-status-badge.is-offline { color: #ff9aa2; }
.hub-status-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: currentColor; }
.hub-status-badge.is-online .hub-status-dot { animation: hubDotPulse 1.9s ease-out infinite; }
.hub-status-badge.is-offline .hub-status-dot { box-shadow: 0 0 10px currentColor; }
@keyframes hubDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 224, 160, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(127, 224, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 224, 160, 0); }
}
.hub-status-grid { display: flex; }
.hub-stat { flex: 1; text-align: center; padding: 4px 0 2px; }
.hub-stat + .hub-stat { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.hub-stat-num {
  display: block; font-family: "Cinzel", Georgia, serif;
  font-size: 21px; font-weight: 700; color: #f5dc8a;
  text-shadow: 0 0 4px rgba(240, 200, 80, 0.2);
}
.hub-stat-label { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #7a8aa0; margin-top: 4px; }

/* Eventos */
.hub-event { display: flex; align-items: flex-start; padding: 9px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.hub-event:last-child { border-bottom: 0; }
.hub-event.is-live { background: linear-gradient(90deg, rgba(240, 200, 80, 0.08), transparent); border-radius: 8px; border-bottom-color: transparent; }
.hub-event-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin: 5px 11px 0 2px; box-shadow: 0 0 8px currentColor; }
.hub-event.is-live .hub-event-dot { animation: hubDotPulseGold 1.6s ease-out infinite; }
@keyframes hubDotPulseGold {
  0% { box-shadow: 0 0 0 0 rgba(240, 200, 80, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(240, 200, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 200, 80, 0); }
}
.hub-event-info { display: flex; flex-direction: column; }
.hub-event-title { font-size: 13px; color: #e6edfc; }
.hub-event-meta { font-size: 11px; color: #8a9ab8; margin-top: 2px; }
.hub-event-live {
  font-size: 10px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;
  color: #f5dc8a; text-shadow: 0 0 10px rgba(240, 200, 80, 0.5);
}
.hub-event-until { font-size: 11px; color: #8a9ab8; }

/* ===== aba Loja ===== */
.hub-loja { max-width: 900px; margin: 0 auto; }
.hub-loja-manifesto {
  border-color: rgba(240, 200, 80, 0.42); text-align: center; padding: 24px 26px;
  background:
    radial-gradient(320px 140px at 50% 0%, rgba(240, 200, 80, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(11, 21, 52, 0.78), rgba(13, 23, 56, 0.86));
}
.hub-loja-motto-title {
  display: block; font-family: "Cinzel", Georgia, serif;
  font-size: 21px; font-weight: 700; color: #fff5d6; line-height: 1.3;
  text-shadow: 0 0 22px rgba(240, 200, 80, 0.3);
}
.hub-loja-motto-sub { display: block; font-size: 14px; color: #a8b8d0; line-height: 1.6; margin-top: 9px; max-width: 640px; margin-left: auto; margin-right: auto; }
.hub-loja-grid { display: flex; align-items: stretch; }
.hub-pack {
  /* coluna flex + CTA com margin-top:auto = botao no rodape em TODOS os cards.
     Sem isto, a faixa sem bonus (R$ 20) perde a linha "base + bonus" e o botao
     dela sobe sozinho, desalinhando a fileira. */
  position: relative; flex: 1; display: flex; flex-direction: column;
  text-align: center; padding: 24px 12px 18px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(16, 28, 62, 0.6), rgba(9, 17, 42, 0.85));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hub-pack + .hub-pack { margin-left: 12px; }
.hub-pack:hover { transform: translateY(-3px); border-color: rgba(240, 200, 80, 0.45); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(240, 200, 80, 0.1); }
.hub-pack.is-featured { border-color: rgba(240, 200, 80, 0.6); box-shadow: 0 0 24px rgba(240, 200, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
/* Forma: hub-base.css (T1.1). Aqui o que faz dele uma FITA: posição sobre a
   borda do cartão e largura fixa, com o padding zerado nas laterais porque o
   texto é centrado na fita. */
.hub-pack-flag {
  position: absolute; top: -10px; left: 50%; margin-left: -56px; width: 112px;
  text-align: center; padding: 3px 0;
  color: #241a04; background: linear-gradient(180deg, #f7df8e, #d9ae3e);
  box-shadow: 0 2px 10px rgba(240, 200, 80, 0.4);
}
/* selo da faixa de topo: azul-cristal, pra ler como "mais cristais" e nao
   disputar a atencao com a moldura dourada da faixa ancora (R$ 100). */
.hub-pack-flag.is-best {
  color: #08172e; background: linear-gradient(180deg, #b9dcff, #4a86e8);
  box-shadow: 0 2px 10px rgba(90, 160, 255, 0.45);
}
.hub-pack.is-best { border-color: rgba(120, 180, 255, 0.45); }
.hub-pack.is-best:hover { border-color: rgba(140, 200, 255, 0.7); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(90, 160, 255, 0.18); }
.hub-pack-gem {
  display: block; margin: 8px auto 16px; transform: rotate(45deg); border-radius: 4px;
  background: linear-gradient(135deg, #9cc4ff, #3a70d8 55%, #1a3a8a);
  border: 1px solid rgba(216, 240, 255, 0.6);
  box-shadow: 0 0 18px rgba(90, 160, 255, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.5);
}
.hub-pack-gem.s1 { width: 26px; height: 26px; }
.hub-pack-gem.s2 { width: 32px; height: 32px; }
.hub-pack-gem.s3 { width: 40px; height: 40px; }
.hub-pack-gem.s4 { width: 48px; height: 48px; }
.hub-pack-name { display: block; font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 700; color: #f5dc8a; margin-bottom: 4px; }
.hub-pack-price { display: block; font-family: "Cinzel", Georgia, serif; font-size: 20px; font-weight: 700; color: #f5dc8a; letter-spacing: 0.5px; margin: 10px 0 6px; }
/* Segunda moeda do card (trilho internacional). Menor e mais apagada de
   proposito: o preco em real continua sendo o principal para a maioria, e o
   valor em dolar existe para quem vem de fora nao achar que a loja so vende
   em BRL. Mesmo peso visual nos dois faria o card competir consigo mesmo. */
.hub-pack-price-alt { font-size: 14px; font-weight: 600; color: #cbb78a; opacity: 0.85; }
/* "50.000 + 15.000 de bonus" — o bonus e o que a faixa tem de diferente, entao
   e ele que ganha o destaque dentro da linha. */
.hub-pack-split { display: block; font-size: 11.5px; color: #8a9ab8; margin-bottom: 3px; }
.hub-pack-split b { font-weight: 700; color: #7bd18f; }
.hub-pack-note { display: block; font-size: 11px; color: #8a9ab8; margin-bottom: 12px; }
.hub-pack-cta {
  display: inline-block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #a8b8d0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 5px 14px;
}
.hub-loja-note { font-size: 12px; color: #7a8aa0; line-height: 1.55; margin-top: 14px; text-align: center; }
.hub-codigo-row { display: flex; align-items: center; }
.hub-codigo-wrap { flex: 1; margin-bottom: 0; }
.hub-codigo-btn { flex: none; margin-left: 12px; }
.hub-codigo-msg { border-radius: 9px; padding: 8px 12px; font-size: 12px; margin-top: 10px; text-align: center; }
.hub-codigo-msg.ok { background: rgba(60, 160, 90, 0.15); border: 1px solid #3ca05a; color: #9ae8b0; }
.hub-codigo-msg.err { background: rgba(200, 60, 70, 0.15); border: 1px solid #c83c46; color: #ff9aa2; }

/* ---- recarga de cristais (cash top-up, Fase 2 do beta) ---- */
.hub-recarga-hint { color: #7bd18f; }
.hub-recarga-loading { flex: 1; text-align: center; color: #8a9ab8; font-size: 13px; padding: 22px 0; }
.hub-pack-crystals { display: block; font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: 700; color: #9cc4ff; margin-bottom: 4px; }
/* brinde do pacote (o Pacote de Recarga): secundário ao cristal, que é a manchete */
.hub-pack-extras { display: block; font-size: 11.5px; line-height: 1.5; color: #a9b8d4; margin-bottom: 12px; }
.hub-pack-extras b { font-weight: 700; color: #e6d38a; }
/* A pele do botão vem de .hub-acao--ouro --mini (hub.css); aqui fica só o que é
   POSIÇÃO no card. `filter: brightness()` saiu junto — é proibido pelo
   cabeçalho deste arquivo (Chromium antigo não tem) e o hover simplesmente não
   acontecia no navegador do Lucas. */
.hub-pack-btn, .hub-pack-cta { margin-top: auto; align-self: center; }
.hub-pack-cta.is-off { color: #7bd18f; border-color: rgba(123, 209, 143, 0.4); }

/* ---- carteira de saldo (plano 47) ---- */
/* O saldo e a manchete do painel: cristal (e credito da loja, nao ouro/cash),
   mesma familia tipografica dos totais dos cards. */
.hub-carteira-hint { color: #9cc4ff; }
.hub-carteira-saldo { text-align: center; margin: 4px 0 16px; }
.hub-carteira-rotulo { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a9ab8; margin-bottom: 4px; }
.hub-carteira-valor { display: block; font-family: "Cinzel", Georgia, serif; font-size: 26px; font-weight: 700; color: #9cc4ff; text-shadow: 0 0 18px rgba(90, 160, 255, 0.35); }
.hub-carteira-devedora { display: block; font-size: 12px; color: #ff9aa2; margin-top: 8px; }
/* Seis faixas na fileira: card mais enxuto que o de cristal (sem gema, sem nota). */
.hub-carteira-faixa { padding: 16px 8px 14px; }
.hub-carteira-faixa .hub-pack-name { font-size: 16px; }
.hub-carteira-faixa .hub-pack-crystals { font-size: 13px; margin-bottom: 12px; }
/* "Tentar por Pix" mora dentro da mensagem de recusa; margem pra nao colar no texto. */
.hub-recarga-retry { margin-top: 8px; }

.hub-recarga-panel {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(240, 200, 80, 0.35);
  background: linear-gradient(180deg, rgba(16, 28, 62, 0.7), rgba(9, 17, 42, 0.9));
}
.hub-recarga-panel-head { font-size: 14px; color: #e8e2d0; margin-bottom: 14px; text-align: center; }
.hub-recarga-panel-head b { color: #f5dc8a; }
.hub-recarga-amount { color: #9cc4ff; font-weight: 700; }
.hub-recarga-split { color: #7bd18f; font-size: 12px; }
/* `gap` em flex NÃO existe no Chromium do Maxthon (chegou no Chrome 84) — é a
   primeira regra do cabeçalho deste arquivo, e estava sendo violada aqui. O
   resultado no navegador do Lucas: os dois selects encostados e, embaixo,
   "Confirmar recarga" grudado em "Cancelar". Folga volta a ser MARGEM. */
.hub-recarga-fields { display: flex; }
.hub-recarga-field { flex: 1; display: block; min-width: 0; }
.hub-recarga-field + .hub-recarga-field { margin-left: 14px; }
.hub-recarga-field > span { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8a9ab8; margin-bottom: 6px; }
.hub-recarga-field select.hub-input { width: 100%; box-sizing: border-box; }
.hub-recarga-field input.hub-input { width: 100%; box-sizing: border-box; }
/* O aviso do codigo de parceiro: some quando nao ha nada a dizer, e nunca
   empurra os botoes -- e a mesma linha que diz "aplicado" ou "nao vale". */
.hub-recarga-codigo-aviso { margin-top: 8px; font-size: 12px; min-height: 16px; }
.hub-recarga-codigo-aviso.ok { color: #7fd88f; }
.hub-recarga-codigo-aviso.err { color: #e8a0a0; }
/* Tres botoes (cancelar · carteira · pagamento) com .hub-acao nowrap: sem
   quebra de linha a fileira saia pela borda da caixa (foto do Lucas, 19/09).
   Espacamento por margem, nao `gap` — o Chromium do Maxthon ignora gap em flex. */
.hub-recarga-actions { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.hub-recarga-actions .hub-acao { margin-top: 12px; }
.hub-recarga-actions .hub-acao + .hub-acao { margin-left: 12px; }
/* Cartão com 3DS (plano 65, Fase 2): o formulário do Mercado Pago e o quadro do
   banco. 500x600 no PC e 100%x440 no celular, como a doc do MP indica. */
.hub-recarga-cartao { margin-top: 14px; }
.hub-cartao-dica { margin: 0 0 10px; font-size: 13px; color: #a8b8d0; text-align: center; }
.hub-cartao-teste { margin: 0 0 8px; padding: 6px 10px; border: 1px dashed #e0b050;
  border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #f0c870; text-align: center; }
.hub-cartao-iframe { display: block; width: 500px; max-width: 100%; height: 600px; margin: 0 auto;
  border: 0; border-radius: 8px; background: #fff; }
@media (max-width: 980px) { .hub-cartao-iframe { width: 100%; height: 440px; } }
/* Sem regra de pele própria: confirmar e cancelar são .hub-acao--ouro e
   .hub-acao--fantasma (ver hub.css). Era aqui que nascia o desalinhamento —
   um tinha `border: 0` e o outro `border: 1px`, com fontes diferentes. */
@media (max-width: 640px) {
  .hub-recarga-fields { display: block; }
  .hub-recarga-field + .hub-recarga-field { margin-left: 0; margin-top: 10px; }
}

/* ===== aba Fórum (T3.1 do plano 32) =====
   Sem linguagem nova: painel é .hub-panel e a fileira segue o desenho da
   vitrine do Mercado. O que separa esta tela das outras é a HIERARQUIA
   (seção > assunto > mensagem), não a paleta.
   Contrato de compat do hub vale aqui igual: sem gap, sem var(), sem grid,
   sem filter -- o Chromium 47 do Maxthon ignora os quatro em silêncio. */
.hub-forum { max-width: 1040px; margin: 0 auto; }

.fo-cabeca { text-align: left; padding: 22px 24px 20px; }
.fo-titulo {
  font-family: "Cinzel", Georgia, serif; font-size: 26px; font-weight: 700;
  color: #fff5d6; margin: 0 0 6px; text-shadow: 0 0 24px rgba(240, 200, 80, 0.22);
}
.fo-sub { font-size: 16px; color: #a8b8d0; line-height: 1.6; margin: 0; }

/* A trilha é o "voltar" do fórum: sem ela só o botão do navegador sai do
   assunto -- e ele troca a ABA inteira, não o nível. */
.fo-trilha {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px; font-size: 14px; color: #7a8aa0;
}
/* Alvo de volta explícito. A trilha diz ONDE você está; ela é pequena e de
   peso baixo de propósito, e usá-la como botão obriga a mira fina. Este é o
   clique. */
.fo-voltar {
  flex: none; margin-right: 14px; padding: 5px 14px; font-size: 13px;
}
.fo-trilha-link {
  display: inline-block; background: none; border: 0; padding: 0 2px;
  font-family: inherit; font-size: 14px; color: #9db4e0; cursor: pointer;
}
.fo-trilha-link:hover { color: #d8e4ff; text-decoration: underline; }
.fo-trilha-sep { display: inline-block; padding: 0 4px; color: #5a6a86; }
.fo-trilha-atual { display: inline-block; padding: 0 2px; color: #cdd8ee; }

/* Seção e assunto são BOTÕES (não <a>): a navegação é interna à aba, e um
   link com href='#' rouba o hash que escolhe a aba do hub. */
.fo-secao, .fo-topico {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 13px 10px; background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: inherit; color: inherit; cursor: pointer;
  transition: background-color 0.15s ease;
}
.fo-secao:last-child, .fo-topico:last-child { border-bottom: 0; }
.fo-secao:hover, .fo-topico:hover { background-color: rgba(120, 170, 255, 0.07); }
.fo-secao-info, .fo-topico-info { display: block; flex: 1 1 auto; min-width: 0; }
.fo-secao-nome, .fo-topico-titulo {
  display: block; font-size: 18px; color: #eef2ff; margin-bottom: 4px;
}
.fo-secao-desc, .fo-topico-meta { display: block; font-size: 15px; color: #93a3c0; }
.fo-secao-num, .fo-topico-num {
  flex: none; text-align: right; font-size: 14px; color: #8494b0;
  padding-left: 16px;
}
.fo-secao-quando, .fo-topico-quando { display: block; margin-top: 2px; color: #6d7d99; }
.fo-topico-resp { display: block; color: #9db4e0; }
.fo-topico.is-fixado { background-color: rgba(240, 200, 80, 0.05); }

/* Forma: hub-base.css (T1.1). Aqui o TOM neutro e o encaixe na linha do
   título, que é onde este selo vive. */
.fo-selo {
  margin-left: 8px; vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.16); color: #b9c6de;
}
.fo-selo.is-fixado { color: #f5dc8a; border-color: rgba(240, 200, 80, 0.4); }
.fo-selo.is-trancado { color: #d9a0a0; border-color: rgba(217, 160, 160, 0.4); }
.fo-selo.is-resolvido { color: #9fd8b0; border-color: rgba(159, 216, 176, 0.4); }

/* A mensagem: a abertura ganha a borda dourada porque é o que a pessoa veio
   ler; as respostas descem em peso. */
.fo-post { padding: 18px 22px; margin-bottom: 12px; }
.fo-post.is-abertura { border-color: rgba(240, 200, 80, 0.3); }
.fo-post-cab {
  display: flex; align-items: baseline;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fo-post-autor {
  flex: 1 1 auto; font-family: "Cinzel", Georgia, serif; font-size: 18px;
  font-weight: 700; color: #f5dc8a;
}
.fo-post-quando { flex: none; font-size: 14px; color: #8494b0; }
.fo-post-cab .fo-selo { flex: none; margin-right: 10px; }
.fo-post-corpo { font-size: 18px; color: #d5dfF2; line-height: 1.72; }
.fo-par { margin: 0 0 10px; }
.fo-par:last-child { margin-bottom: 0; }
.fo-vazio { color: #7a8aa0; font-style: italic; }

.fo-aviso { padding: 16px 20px; text-align: center; }
.fo-aviso-txt { margin: 0; font-size: 16px; color: #a8b8d0; line-height: 1.6; }
.fo-aviso.is-erro { border-color: rgba(217, 160, 160, 0.35); }
.fo-aviso.is-erro .fo-aviso-txt { color: #e6bcbc; }

.fo-carregando {
  display: flex; align-items: center; justify-content: center;
  padding: 26px; font-size: 16px; color: #8a9ab8;
}
.fo-spin {
  display: inline-block; width: 14px; height: 14px; margin-right: 10px;
  border: 2px solid rgba(240, 200, 80, 0.25); border-top-color: #f5dc8a;
  border-radius: 50%; animation: fo-girar 0.8s linear infinite;
}
@keyframes fo-girar { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .fo-secao, .fo-topico { padding: 12px 6px; }
  .fo-secao-num, .fo-topico-num { font-size: 10px; padding-left: 8px; }
  .fo-post { padding: 15px 16px; }
}

/* A caixa de escrever. Mesmos campos do resto do hub (`.hub-input`), com
   rótulo curto em cima -- placeholder sozinho some no instante em que a pessoa
   digita, e aí ninguém lembra o que era aquele campo. */
.fo-escrever { padding: 18px 22px; margin-top: 14px; }
.fo-rotulo {
  display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8a9ab8; margin: 12px 0 5px;
}
.fo-escrever .hub-panel-head + .fo-rotulo { margin-top: 4px; }
.fo-campo { width: 100%; margin-bottom: 2px; }
/* `font: inherit` no textarea: sem isto ele nasce monospace pelo default do
   navegador e o formulário fala duas fontes. E o input do título NÃO pode se
   chamar `.fo-titulo` — essa é a classe do <h2> da tela, e a colisão dava ao
   campo a fonte Cinzel de 22px. */
textarea.fo-campo { resize: vertical; min-height: 110px; line-height: 1.65;
  font-family: inherit; font-size: 16px; }
input.fo-campo-titulo { font-family: inherit; font-size: 16px; }
.fo-erro { font-size: 14px; color: #e6bcbc; margin: 8px 0 0; }
.fo-escrever .hub-acao { margin-top: 14px; }

/* Os sinais (T3.5). Ficam no RODAPÉ da mensagem e em peso menor que o texto:
   eles comentam o post, não competem com ele. */
.fo-post-pe {
  display: flex; align-items: center; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fo-sinal {
  display: inline-flex; align-items: center; background: none;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
  padding: 7px 15px; margin-right: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: #8a9ab8;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fo-sinal:hover { color: #d8e4ff; border-color: rgba(255, 255, 255, 0.28); }
.fo-sinal[disabled] { opacity: 0.5; cursor: default; }
.fo-sinal:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.4); }
/* O mudo é o mesmo desenho sem interação: quem não entrou vê o número, e a
   ausência de contorno diz que não há o que clicar. */
.fo-sinal.is-mudo { border-color: transparent; cursor: default; }
.fo-sinal.is-on { color: #f5dc8a; border-color: rgba(240, 200, 80, 0.45); }

/* O voto veio do CARACTERE (▲/▼), e a lição do ♥ que morava aqui continua
   valendo: o glifo pequeno demais vira ruído ao lado do número. Foi medido —
   um quadrado rotacionado com duas bordas desenhou uma SETA na tela, e o ♥ a
   12px virou dois tracinhos que se liam como "11". Os dois glifos EXISTEM na
   fonte (medido pintando cada um num canvas: 255 e 343 pixels acesos contra
   159 do tofu) — o que faltava era TAMANHO, e é por isso que `.fo-polegar`
   tem `font-size` próprio em vez de herdar o do botão.
   Um <img> seria uma requisição a mais por post, e o Maxthon não tem
   `mask-image` para recolorir SVG. */

/* A mensagem que resolveu o assunto ganha a borda verde — a mesma cor do selo
   "resolvido" da lista, para os dois lados falarem do mesmo estado. */
.fo-post.is-melhor { border-color: rgba(159, 216, 176, 0.45); }
.fo-post.is-melhor .fo-post-cab { border-bottom-color: rgba(159, 216, 176, 0.22); }

.fo-dono {
  display: flex; align-items: center; padding: 14px 20px; margin-top: 14px;
}
.fo-dono-txt { flex: 1 1 auto; font-size: 16px; color: #a8b8d0; }
.fo-dono .hub-acao { flex: none; margin-left: 14px; }

@media (max-width: 640px) {
  .fo-dono { display: block; }
  .fo-dono .hub-acao { margin: 12px 0 0; width: 100%; }
}

/* A ficha de reporte e o guia. O reporte não é seção do fórum: o cartão dele
   fica no fim da Comunidade, marcado como privado, e abre uma tela própria. */
.fo-secao.is-reporte { border-top: 1px solid rgba(240, 200, 80, 0.18); }
.fo-secao.is-reporte .fo-secao-nome { color: #f5dc8a; }
.fo-selo.is-privado {
  color: #9fd8b0; border-color: rgba(159, 216, 176, 0.4);
}

.fo-guia { padding: 18px 22px; margin-bottom: 14px; }
.fo-guia-txt { font-size: 16px; color: #a8b8d0; line-height: 1.7; margin: 12px 0 0; }
.fo-guia-lista {
  margin: 12px 0 0; padding-left: 20px; font-size: 16px; color: #cdd8ee;
  line-height: 1.75;
}
.fo-guia-lista li { margin-bottom: 6px; }
.fo-guia-lista b { color: #eef2ff; }
.fo-guia-nota {
  border-left: 2px solid rgba(240, 200, 80, 0.35); padding-left: 12px;
  margin-top: 14px; color: #8a9ab8;
}

/* Duas colunas que viram uma no celular. Sem `gap` (o Chromium do Maxthon
   ignora) — a folga é margem, como no resto do hub. */
.fo-linha { display: flex; margin-top: 4px; }
.fo-meio { display: block; flex: 1 1 50%; }
.fo-meio + .fo-meio { margin-left: 14px; }

.fo-emojis { margin: 6px 0 4px; }
.fo-sinal.fo-emoji {
  padding: 3px 8px; margin: 0 4px 4px 0; font-size: 15px; line-height: 1.2;
}

.fo-anexos { margin: 4px 0 10px; }
.fo-anexo {
  display: inline-flex; align-items: center; margin: 0 8px 6px 0;
  padding: 5px 6px 5px 13px; border-radius: 15px; font-size: 13px;
  color: #cdd8ee; border: 1px solid rgba(159, 216, 176, 0.35);
  background: rgba(159, 216, 176, 0.08);
}
.fo-anexo-x {
  background: none; border: 0; margin-left: 6px; padding: 0 4px;
  color: #8a9ab8; font-size: 15px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.fo-anexo-x:hover { color: #e6bcbc; }
.fo-anexo-vazio { font-size: 13px; color: #7a8aa0; }
.fo-anexar { display: inline-block; cursor: pointer; }

/* "Anexar print" e "Enviar" são de pesos diferentes e não podem dividir a
   linha: anexar é um passo do preenchimento, enviar é o fim do formulário.
   Lado a lado, a mão erra o alvo. */
.fo-ficha .fo-enviar { display: block; margin-top: 20px; }
.fo-anexar { margin-top: 4px; }

.fo-obrigado { border-color: rgba(159, 216, 176, 0.4); }

/* ---- suporte: escolher o assunto (plano 36) ----------------------------- */
/* O cartão do assunto reusa `.fo-secao` de propósito: é a mesma ação de
   "entrar em alguma coisa", e um componente novo só criaria uma segunda
   gramática de clique na mesma tela. */
.fo-secao.is-assunto .fo-secao-nome { color: #cdd8ee; }
.fo-secao.is-assunto:hover .fo-secao-nome { color: #eef2ff; }
.fo-secao.is-assunto .fo-secao-num { color: #7a8aa0; }

/* Os links das políticas: uma faixa de botões-fantasma dentro do painel de
   ajuda. Quebram em várias linhas no celular sem `gap` (Maxthon ignora). */
.fo-politicas { margin-top: 16px; }
.fo-politicas .fo-rotulo { margin-bottom: 8px; }
.fo-politica { margin: 0 8px 8px 0; }

/* ---- dossiê da compra (reembolso) --------------------------------------- */
/* Fica dentro da ficha, logo abaixo da compra escolhida: é a resposta para
   "isto vai ser aceito?" no momento exato em que a pergunta aparece. A cor da
   borda carrega o veredito, e o texto o repete — quem não distingue as cores
   continua lendo "parece elegível". */
.fo-dossie { margin: 2px 0 10px; }
.fo-dossie-cx {
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  padding: 14px 16px; background: rgba(10, 16, 30, 0.5);
}
.fo-dossie-cx.is-ok { border-color: rgba(159, 216, 176, 0.45); }
.fo-dossie-cx.is-nao { border-color: rgba(217, 160, 160, 0.45); }
.fo-dossie-cx.is-duvida { border-color: rgba(240, 200, 80, 0.4); }
.fo-dossie-t {
  margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #cdd8ee;
}
.fo-dossie-cx.is-ok .fo-dossie-t { color: #9fd8b0; }
.fo-dossie-cx.is-nao .fo-dossie-t { color: #e6bcbc; }
.fo-dossie-cx.is-duvida .fo-dossie-t { color: #f5dc8a; }
.fo-dossie-l {
  display: flex; justify-content: space-between; font-size: 15px;
  padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fo-dossie-l:last-child { border-bottom: 0; }
.fo-dossie-l span { color: #8a9ab8; }
.fo-dossie-l b { color: #cdd8ee; font-weight: 500; text-align: right; }
.fo-dossie-n {
  margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #a8b8d0;
}

/* O aceite da política. Caixa e texto no MESMO <label> para o toque valer nos
   dois — alvo de 14px no celular é alvo que ninguém acerta. */
.fo-aceite {
  display: flex; align-items: flex-start; margin-top: 16px;
  font-size: 15px; line-height: 1.6; color: #a8b8d0; cursor: pointer;
}
.fo-aceite input { margin: 4px 10px 0 0; flex: none; }
.fo-aceite b { color: #eef2ff; }

@media (max-width: 640px) {
  .fo-linha { display: block; }
  .fo-meio + .fo-meio { margin-left: 0; }
  .fo-dossie-l { display: block; }
  .fo-dossie-l b { display: block; text-align: left; }
}

/* ===== Fórum, segunda rodada (T3.6) =====
   Mesmo contrato de compat do resto do hub: sem `gap`, sem `var()`, sem `grid`,
   sem `filter` — o Chromium 47 do Maxthon ignora os quatro em SILÊNCIO, e um
   layout que depende deles vira uma pilha de blocos sem aviso nenhum.
   A folga é margem; a coluna é flex. */

/* --- o selo de não-lidos na aba do topo -------------------------------
   Nasce escondido e só aparece com número: mostrar "0" não se lê como "em
   dia" — lê-se como "tem alguma coisa aqui". `[hidden]` explícito porque o
   display do próprio seletor venceria a regra do navegador. */
.hub-tb-link { position: relative; }
.hub-tb-selo {
  display: inline-block; margin-left: 6px; padding: 0 5px; min-width: 8px;
  border-radius: 9px; background: #d8a838; color: #16203c;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  vertical-align: middle;
}
.hub-tb-selo[hidden] { display: none; }

/* --- o resumo de não-lidos, no alto do fórum -------------------------
   Um contador que só sobe deixa de ser informação: o botão que o zera nasce ao
   lado dele, e não escondido numa tela de preferências. */
.fo-resumo {
  display: flex; align-items: center; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.fo-resumo-txt { flex: 1 1 auto; font-size: 16px; color: #a8b8d0; }
.fo-resumo-txt b { color: #f5dc8a; }
.fo-resumo .hub-acao { flex: none; margin-left: 14px; }

.fo-mini { padding: 7px 15px; font-size: 14px; }

/* O selo por seção e o pontinho por assunto dizem a MESMA coisa em dois pesos:
   na seção, quantos; na linha, que tem. Um número por linha de assunto seria
   um número que sempre diz "1". */
.fo-novos {
  display: inline-block; margin-left: 8px; padding: 0 6px;
  border-radius: 9px; background: rgba(240, 200, 80, 0.9); color: #16203c;
  font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: middle;
}
.fo-ponto {
  display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: #f0c850; vertical-align: middle;
}
.fo-secao.is-novo .fo-secao-nome, .fo-topico.is-novo .fo-topico-titulo {
  color: #fff5d6; font-weight: 600;
}

/* --- a barra da lista: buscar, ordenar, recortar ---------------------
   Ela é criada UMA vez por seção; trocar de ordem só redesenha o miolo. Refazer
   a barra junto tiraria o foco do campo de busca a cada tecla digitada. */
/* Sem cartão: a barra é ferramenta, não conteúdo. Dentro de um `.hub-panel`
   ela pesava tanto quanto a lista que filtra — numa seção com três avisos era
   o maior bloco da tela. Uma linha (busca + ordem) e a fileira de recortes. */
.fo-barra { margin: 2px 0 18px; }
/* A busca ocupa a linha dela; as duas fileiras de chips vêm abaixo. */
.fo-barra-linha { display: block; margin-bottom: 12px; }
/* Cada fileira é `flex` com o rótulo numa coluna de largura FIXA — é o que
   alinha "ORDENAR POR" e "MOSTRAR" um debaixo do outro. Sem a largura fixa os
   dois rótulos começam em x diferentes e a barra lê como zigue-zague. */
.fo-grupo-bt { display: flex; align-items: flex-start; margin-bottom: 4px; }
.fo-barra-rotulo {
  flex: none; width: 104px; padding-top: 8px; margin: 0 10px 0 2px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6d7d99;
}
.fo-grupo-chips { flex: 1 1 auto; min-width: 0; }
.fo-busca { position: relative; display: block; max-width: 560px; }
.fo-busca-campo { width: 100%; padding-right: 34px; font-size: 15px; }
.fo-busca-x {
  position: absolute; right: 6px; top: 50%; margin-top: -13px;
  width: 26px; height: 26px; padding: 0; background: none; border: 0;
  color: #7a8aa0; font-size: 18px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.fo-busca-x:hover { color: #e6bcbc; }

.fo-chip {
  display: inline-block; margin: 0 6px 6px 0; padding: 7px 15px;
  background: none; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px; font-family: inherit; font-size: 14px; color: #8a9ab8;
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.fo-chip:hover { color: #d8e4ff; border-color: rgba(255, 255, 255, 0.28); }
.fo-chip:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.4); }
/* O aceso é dito pela COR *e* pelo preenchimento: só a cor deixaria de fora
   quem não distingue as duas — o mesmo motivo do ♡/♥ do voto anterior. */
.fo-chip.is-on {
  color: #16203c; background: rgba(240, 200, 80, 0.9);
  border-color: rgba(240, 200, 80, 0.9); font-weight: 600;
}
/* A ordenação e o recorte são perguntas diferentes; a coluna de rótulo à
   esquerda é o que impede que se leiam como uma fileira só de nove botões. */
.fo-filtros { margin-top: 2px; }

/* --- paginação -------------------------------------------------------
   O servidor sempre paginou; a tela é que pedia sempre a primeira página. Sem
   estes dois botões, a resposta nº 31 de um assunto era INALCANÇÁVEL. */
.fo-paginas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; margin-top: 12px;
}
.fo-paginas-txt { flex: 1 1 auto; text-align: center; font-size: 14px; color: #8a9ab8; }
.fo-paginas .hub-acao { flex: none; }
.fo-paginas .hub-acao[disabled] { opacity: 0.35; cursor: default; }

/* --- votos na LINHA da lista (leitura, sem botão) --------------------
   A linha inteira é um botão que abre o assunto; um botão dentro de outro
   rouba o clique de quem só queria entrar. */
.fo-votinhos { margin-left: 8px; }
.fo-votinho { display: inline-block; margin-left: 8px; font-size: 14px; }
.fo-votinho.is-mais { color: #9fd8b0; }
.fo-votinho.is-menos { color: #c69ba0; }

/* --- a mensagem: número, autor, quando ------------------------------- */
.fo-post-ordem {
  flex: none; margin-right: 10px; padding: 1px 7px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); color: #8494b0;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
/* `time` com `title`: o relativo serve pra varrer a lista, e é péssimo quando a
   pergunta é QUANDO. A data por extenso mora no repouso do mouse, onde não
   disputa espaço com o texto. */
.fo-quando, .fo-post-quando time { cursor: help; }
.fo-editado { margin-left: 5px; color: #7a8aa0; font-style: italic; cursor: help; }
.fo-topico-quem { display: block; margin-top: 1px; color: #7a8aa0; }

/* --- 👍 / 👎 ----------------------------------------------------------
   Dois botões com número cada um (decisão do Lucas, 04/09). O triângulo vem do
   CARACTERE e não de um <img>: seria uma requisição por post, e o Maxthon não
   tem `mask-image` para recolorir SVG. A lição do ♥ anterior vale aqui — o
   glifo pequeno demais vira ruído ao lado do número, então ele tem tamanho
   próprio.
   O aceso é dito pela cor E pelo contorno cheio: cor sozinha deixa de fora
   quem não distingue verde de vermelho. */
.fo-polegar {
  display: inline-block; margin-right: 7px; font-size: 14px; line-height: 1;
  position: relative; top: -1px;
}
.fo-voto.is-mais.is-on {
  color: #9fd8b0; border-color: rgba(159, 216, 176, 0.55);
  background: rgba(159, 216, 176, 0.1);
}
.fo-voto.is-menos.is-on {
  color: #e0a8a8; border-color: rgba(224, 168, 168, 0.55);
  background: rgba(224, 168, 168, 0.1);
}
.fo-voto.is-mais:hover { color: #9fd8b0; }
.fo-voto.is-menos:hover { color: #e0a8a8; }
.fo-conta { font-variant-numeric: tabular-nums; }

/* Editar e apagar ficam à DIREITA, longe do voto: são a única dupla de cliques
   do post que mexe no conteúdo, e vizinhas do voto seriam clicadas por engano. */
.fo-post-pe .fo-editar, .fo-post-pe .fo-apagar { margin-left: 0; margin-right: 0; }
.fo-post-pe .fo-editar { margin-left: auto; }
.fo-post-pe .fo-apagar { margin-left: 8px; }
.fo-apagar:hover { color: #e6bcbc; border-color: rgba(230, 188, 188, 0.45); }

.fo-editor-pe { margin-top: 12px; }
.fo-editor-pe .hub-acao + .hub-acao { margin-left: 8px; }

/* --- anexos: a galeria da mensagem -----------------------------------
   Miniatura, não a foto inteira no meio do texto: um print de 4K empurraria a
   conversa três telas para baixo. `object-fit` não existe no Chromium 47 — o
   recorte é o `overflow: hidden` do botão com a imagem em altura fixa. */
.fo-galeria { margin-top: 12px; }
.fo-thumb {
  display: inline-block; overflow: hidden; width: 108px; height: 76px;
  margin: 0 8px 8px 0; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  transition: border-color 0.15s ease;
}
.fo-thumb:hover { border-color: rgba(240, 200, 80, 0.55); }
.fo-thumb:focus { outline: none; box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.4); }
.fo-thumb img { display: block; width: 108px; min-height: 76px; }

/* A lupa. Some no Esc e no clique fora — as duas saídas, porque quem abriu com
   o mouse fecha com o mouse. Clicar NA imagem não fecha: quem quer olhar de
   perto clica nela. */
.fo-lupa {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(4, 8, 20, 0.92);
}
.fo-lupa-img {
  max-width: 96%; max-height: 92%; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}
.fo-lupa-x {
  position: absolute; right: 18px; top: 14px; width: 38px; height: 38px;
  padding: 0; background: none; border: 0; color: #cdd8ee;
  /* 28 e o degrau da escala do hub; 30 nao existe nela. */
  font-size: 28px; line-height: 1; cursor: pointer; font-family: inherit;
}
.fo-lupa-x:hover { color: #fff5d6; }

/* --- anexos: subir print numa mensagem -------------------------------
   Aqui a miniatura APARECE (o anexo de post é público e tem rota que o serve),
   diferente dos chips da ficha privada de bug, cujo print mora em pasta sem
   rota pública — um <img> lá daria imagem quebrada em toda ficha. */
.fo-anexar-bloco { margin-top: 12px; }
.fo-anexo-mini {
  position: relative; display: inline-block; overflow: hidden;
  width: 76px; height: 56px; margin: 0 8px 8px 0;
  border: 1px solid rgba(159, 216, 176, 0.35); border-radius: 8px;
  background: rgba(0, 0, 0, 0.25); vertical-align: top;
}
.fo-anexo-mini img { display: block; width: 76px; min-height: 56px; }
.fo-anexo-mini .fo-anexo-x {
  position: absolute; right: 0; top: 0; margin: 0; padding: 0 5px;
  background: rgba(4, 8, 20, 0.75); color: #e6bcbc; line-height: 18px;
}
.fo-anexo-erro { font-size: 14px; color: #e6bcbc; margin: 6px 0 0; }
.fo-anexar.is-subindo { opacity: 0.55; pointer-events: none; }

/* --- AVISOS: o sinal pessoal (plano 35 §2) ---------------------------
   Vem antes das seções porque é o que a pessoa veio ver quando o selo da aba
   está aceso. A linha reusa `.fo-secao` — mesma natureza (fileira clicável),
   mesma pele, nenhuma linguagem visual nova. */
.fo-avisos { padding: 4px 10px 14px; margin-bottom: 16px; }
.fo-avisos .hub-panel-head { padding-left: 12px; }
.fo-avisos .hub-acao { margin: 10px 0 0 12px; }
.fo-aviso-icone {
  display: inline-block; width: 24px; margin-right: 6px; font-size: 15px;
}
.fo-aviso-linha .fo-secao-nome { color: #cdd8ee; font-weight: 400; }
.fo-aviso-linha .fo-secao-nome b { color: #f5dc8a; font-weight: 700; }
.fo-aviso-linha .fo-secao-nome i { color: #eef2ff; font-style: normal; }
/* Não lido ganha a barra dourada na borda: a cor sozinha (que o `is-novo` já
   dá) some para quem não a distingue. */
.fo-aviso-linha.is-novo { border-left: 3px solid rgba(240, 200, 80, 0.75); }
.fo-aviso-linha:not(.is-novo) { opacity: 0.62; }

/* --- SELO DE EQUIPE ---------------------------------------------------
   Num fórum de servidor, "a equipe respondeu" é a informação mais valiosa da
   tela: sem ele, quem chega num assunto com oito respostas não sabe qual é a
   oficial. Cor E borda, como todo estado desta tela — verde é o tom que o
   `is-resolvido` já usa para "isto encerra o assunto". */
.fo-selo.is-equipe {
  color: #9fd8b0; border-color: rgba(159, 216, 176, 0.55);
  background: rgba(159, 216, 176, 0.1);
}
.fo-post.is-equipe { border-color: rgba(159, 216, 176, 0.32); }
.fo-post.is-equipe .fo-post-cab { border-bottom-color: rgba(159, 216, 176, 0.2); }
.fo-abertura-meta .fo-selo.is-equipe { margin-left: 8px; }

/* A menção no corpo do texto. Marcada pelo `comMencoes()`, que roda DEPOIS do
   escape — a marca é a única coisa que este código escreve. */
.fo-mencao { color: #9db4e0; font-weight: 600; }

/* --- o cartão do ASSUNTO -------------------------------------------
   Título e texto de abertura num cartão só. Separados (título num cartão,
   "#1" noutro) a pergunta parecia só mais uma mensagem — o Lucas leu a tela
   como "confusa entre o título, a escrita e as respostas" (04/09). O título é
   o destaque; as respostas vêm abaixo, com rótulo próprio e em peso menor. */
.fo-post.is-abertura { padding: 26px 30px 22px; }
.fo-post.is-abertura .fo-titulo { font-size: 28px; line-height: 1.25; margin-bottom: 10px; }
.fo-abertura-meta {
  margin: 0 0 18px; padding-bottom: 14px; font-size: 15px; color: #a8b8d0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fo-abertura-meta b { color: #f5dc8a; font-weight: 700; }

.fo-respostas-rotulo {
  margin: 28px 0 12px 4px; font-family: "Cinzel", Georgia, serif;
  font-size: 16px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #b9c6de;
}

/* Nos Avisos a coluna da direita é o voto — a única coisa que o jogador faz
   lá — e não "0 respostas" em toda linha. */
.fo-topico-votos { display: block; margin-bottom: 3px; }
.fo-topico-votos .fo-votinho { font-size: 15px; margin-left: 12px; }
.fo-topico-votos .fo-votinho:first-child { margin-left: 0; }

@media (max-width: 640px) {
  .fo-busca { max-width: none; }
  /* Em 375px a coluna de 104px come metade da fileira: o rótulo vira uma
     linha inteira acima dos chips. */
  .fo-grupo-bt { display: block; }
  .fo-barra-rotulo { display: block; width: auto; padding: 0 0 4px; margin: 0; }
  .fo-post-corpo { font-size: 16px; }
  .fo-post.is-abertura { padding: 20px 16px 18px; }
  .fo-post.is-abertura .fo-titulo { font-size: 24px; }
  .fo-resumo { display: block; }
  .fo-resumo .hub-acao { margin: 10px 0 0; width: 100%; }
  .fo-paginas { padding: 10px 12px; }
  .fo-paginas-txt { font-size: 11px; }
  /* No celular o rodapé da mensagem quebra em duas linhas em vez de espremer
     cinco botões numa fileira que ninguém acerta com o dedo. */
  .fo-post-pe { display: block; }
  .fo-post-pe .fo-sinal { margin-bottom: 6px; }
  .fo-post-pe .fo-editar { margin-left: 0; }
  .fo-thumb, .fo-thumb img { width: 88px; }
  .fo-thumb { height: 62px; }
  .fo-thumb img { min-height: 62px; }
}

/* ===== aba Download ===== */
.hub-download { max-width: 900px; margin: 0 auto; }
.hub-dl-hero { display: flex; align-items: stretch; }
.hub-dl-card {
  flex: 1; text-align: center; padding: 28px 24px; margin-bottom: 16px; border-radius: 16px;
  border: 1px solid rgba(240, 200, 80, 0.28);
  background: linear-gradient(180deg, rgba(15, 28, 64, 0.75), rgba(10, 20, 50, 0.88));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hub-dl-card:hover {
  transform: translateY(-3px); border-color: rgba(240, 200, 80, 0.5);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(240, 200, 80, 0.14);
}
.hub-dl-card + .hub-dl-card { margin-left: 16px; }
.hub-dl-badge {
  width: 58px; height: 58px; border-radius: 14px; margin: 0 auto 15px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Cinzel", Georgia, serif; font-size: 16px; font-weight: 700; letter-spacing: 1px;
  color: #241a04; background: linear-gradient(160deg, #f7df8e, #cf9f30);
  box-shadow: 0 4px 16px rgba(240, 200, 80, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.hub-dl-title { font-family: "Cinzel", Georgia, serif; font-size: 18px; font-weight: 700; color: #fff5d6; margin-bottom: 9px; }
.hub-dl-desc { font-size: 14px; color: #a8b8d0; line-height: 1.55; margin-bottom: 18px; }
.hub-dl-btn { display: inline-block; text-decoration: none; font-family: "Cinzel", Georgia, serif; font-size: 14px; font-weight: 700; letter-spacing: 3px; }
.hub-steps { margin: 0; padding-left: 22px; }
.hub-steps li { font-size: 14px; color: #dfe7ff; line-height: 1.5; margin-bottom: 9px; }
.hub-req-grid { display: flex; }
.hub-req { flex: 1; text-align: center; padding: 6px; }
.hub-req + .hub-req { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.hub-req-k { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #7a8aa0; margin-bottom: 6px; }
.hub-req-v { display: block; font-size: 13px; color: #dfe7ff; }
.hub-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 11px 2px; }
.hub-faq-item:last-child { border-bottom: 0; }
.hub-faq-item > summary {
  position: relative; cursor: pointer; font-size: 14px; color: #f5dc8a;
  list-style: none; outline: none; padding-right: 22px;
}
.hub-faq-item > summary::-webkit-details-marker { display: none; }
.hub-faq-item > summary:after { content: "+"; position: absolute; right: 4px; top: -1px; color: #f0c850; font-size: 16px; }
.hub-faq-item[open] > summary:after { content: "\2013"; }
.hub-faq-item > p { font-size: 13px; color: #a8b8d0; line-height: 1.55; margin-top: 8px; padding-left: 2px; }
.hub-dl-support { text-align: center; padding: 10px 0 6px; }
.hub-dl-support-link { color: #e8d090; font-size: 13px; text-decoration: none; letter-spacing: 0.4px; }
.hub-dl-support-link:hover { color: #f5dc8a; }

/* ===== Footer ===== */
.hub-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; max-width: 1180px; width: 100%; margin: 0 auto;
  font-size: 12px; color: #7a8aa0; letter-spacing: 1px;
}
.hub-footer:before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 200, 80, 0.3) 30%, rgba(240, 200, 80, 0.3) 70%, transparent);
}
.hub-footer-link { color: #e8d090; text-decoration: none; margin-left: 14px; }
.hub-footer-link:hover { color: #f5dc8a; }

/* degradê pra telas menores (entre 900 e ~1080): a coluna direita encolhe */
@media (max-width: 1080px) { .hub-col-right { flex-basis: 300px; } }

/* ===== Mobile (<=900px): dashboard dentro do APK (?app=1) e telas estreitas =====
   Rodada 2026-07-17 (hub no app). O webview do APK rende ~640-960 CSS px —
   abaixo do gate isDesktop, que agora só decide QUEM vê o dashboard; o layout
   estreito é responsabilidade destes blocos. Mesmas restrições do arquivo:
   flexbox + margins (sem grid, sem gap, sem var()). */
@media (max-width: 900px) {
  /* aba Início empilha: conteúdo primeiro, painéis da direita abaixo */
  .hub-inicio { flex-direction: column; }
  .hub-col-left { width: 100%; }
  .hub-col-right { flex: 1 1 auto; width: 100%; margin-left: 0; margin-top: 16px; }
  /* JOGAR movido pro topo (inicio.js) mantém a MESMA largura cheia que tinha na
     coluna — só reordena, sem encolher (align-items:flex-start não estica sozinho). */
  .hub-inicio > .hub-play { width: 100%; box-sizing: border-box; margin-top: 0; }

  /* topbar quebra em 2 linhas: marca+usuário em cima, navegação embaixo */
  .hub-topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; }
  .hub-tb-nav {
    order: 3; width: 100%; justify-content: center; flex-wrap: wrap;
    padding: 4px 0 2px;
  }
  .hub-tb-link { margin: 0 2px; padding: 7px 10px; font-size: 12px; letter-spacing: 1px; }
  .hub-tb-uname { display: none; }

  .hub-content { padding: 16px 12px; }

  /* destaque legível em tela estreita */
  .hub-feature { min-height: 190px; }
  .hub-feature-body { padding: 18px 16px; }
  .hub-feature-title { font-size: 21px; }
  .hub-feature-sum { font-size: 13px; }

  /* banner: mais alto (o texto quebra em mais linhas) e as bolinhas
     centralizadas, com área de toque maior. */
  .hub-vitrine { height: 316px; }
  .hub-vitrine .hub-feature-body { padding: 16px 16px 46px; }
  .hub-vitrine .hub-feature-sum { font-size: 13px; }
  .hub-vitrine-dots { left: 0; right: 0; bottom: 6px; text-align: center; }
  .hub-vitrine-dot { border-width: 12px; width: 12px; height: 12px; }
  .hub-vitrine-dot.is-ativo { width: 38px; }

  /* JOGAR sem estourar a largura */
  .hub-play-btn { font-size: 20px; letter-spacing: 4px; }

  /* loja: 4 packs viram 2 por linha */
  .hub-loja-grid { flex-wrap: wrap; justify-content: space-between; }
  .hub-pack { flex: 0 1 48.5%; margin-bottom: 12px; }
  .hub-pack + .hub-pack { margin-left: 0; }

  /* download: cards empilham (o margin-bottom que já existe separa) */
  .hub-dl-hero { flex-direction: column; }
  .hub-dl-card + .hub-dl-card { margin-left: 0; }

  /* requisitos empilham com divisória horizontal */
  .hub-req-grid { flex-direction: column; }
  .hub-req + .hub-req { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }

  /* footer centrado quando aperta */
  .hub-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ── Fórum oficial (spec 2026-10-02): lista estilo Gamesow, etiquetas, papéis.
   Sem `gap` de flexbox nem `object-fit`: o Chromium 47 do Maxthon não os
   conhece — espaço é margem, e o ícone cabe na caixa por max-width/max-height
   (centralizado pelo flex, sem esticar). As 12 cores repetem
   `world/forum_oficial.PALETA` (um teste confere).
   As regras de cor ficam no FIM de propósito: empatam em especificidade com
   `.fo-topico.is-novo .fo-topico-titulo` e precisam vencer. ── */
.fo-secao.is-gamesow { align-items: center; }
.fo-secao-icone {
  flex: none; width: 56px; height: 56px; margin-right: 14px; border-radius: 10px;
  overflow: hidden; border: 1px solid rgba(240, 200, 80, 0.3); background: #101d4a;
  display: flex; align-items: center; justify-content: center;
}
.fo-secao-icone img { max-width: 100%; max-height: 100%; display: block; }
.fo-monograma { font-size: 24px; font-weight: 700; color: #f0c850; }
.fo-monograma.is-avisos { background: #3a1f5a; }
.fo-monograma.is-guias { background: #1f5a3a; }
.fo-monograma.is-comunidade { background: #1f3a5a; }
.fo-secao-cont { flex: none; width: 96px; text-align: center; font-size: 14px; color: #8494b0; }
.fo-secao-cont b { color: #9db4e0; }
.fo-secao-ult { flex: none; width: 210px; padding-left: 12px; font-size: 13px; text-align: left; overflow: hidden; }
.fo-secao-ult-tit { display: block; color: #cdd8ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-secao-ult-meta { display: block; color: #6d7d99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-ult-quando { color: #6d7d99; }
.fo-secao.is-oculta, .fo-ger-linha.is-oculta { opacity: 0.6; }
.fo-selo.is-oculta { color: #d9a0a0; border-color: rgba(217, 160, 160, 0.4); }
.fo-selo.is-admin { color: #0a1438; background: #f0c850; border-color: #f0c850; }
.fo-selo.is-editor { color: #0a1438; background: #5aa0ff; border-color: #5aa0ff; }
.fo-cabeca-secao { display: flex; align-items: center; }
.fo-cabeca-txt { flex: 1 1 auto; min-width: 0; }
.fo-gerenciar-bt { margin-top: 10px; }
.fo-midia { margin-right: 6px; }
.fo-etq {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px;
  font-size: 12px; font-weight: 700; color: #0a1438; vertical-align: middle;
}
.fo-org-linha > *, .fo-ger-nova > *, .fo-ger-acoes > * { margin: 0 8px 8px 0; }
.fo-org-linha, .fo-ger-nova { display: flex; flex-wrap: wrap; align-items: center; }
.fo-org-sel { display: inline-flex; align-items: center; font-size: 13px; color: #93a3c0; }
.fo-org-sel span { margin-right: 6px; }
.fo-org-sel .fo-campo, .fo-mini-sel { width: auto; margin: 0; padding: 4px 6px; }
.fo-org-dica { margin-left: 10px; font-size: 12px; color: #6d7d99; }
.fo-ger-linha {
  display: flex; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fo-ger-linha .fo-secao-icone { width: 40px; height: 40px; }
.fo-ger-nome { flex: 1 1 auto; min-width: 0; }
.fo-ger-grupo { font-size: 12px; color: #6d7d99; margin-left: 6px; }
.fo-ger-acoes { flex: none; display: inline-flex; align-items: center; }
.fo-sec-icone-linha { display: flex; align-items: center; margin-bottom: 10px; }
.fo-sec-icone-linha > * { margin-right: 10px; }
.fo-sec-previa {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #101d4a;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240, 200, 80, 0.3);
}
.fo-sec-previa img { max-width: 100%; max-height: 100%; }
.fo-check { display: flex; align-items: center; margin: 6px 0 12px; color: #93a3c0; cursor: pointer; }
.fo-check input { margin-right: 6px; }
@media (max-width: 720px) {
  .fo-secao-ult { display: none; }
  .fo-secao-cont { width: 64px; }
  .fo-secao-icone { width: 44px; height: 44px; margin-right: 10px; }
}
.fo-etq-vermelho { background: #ff6a5a; }
.fo-etq-laranja { background: #ff9a4d; }
.fo-etq-dourado { background: #f0c850; }
.fo-etq-creme { background: #f5dc8a; }
.fo-etq-verde { background: #5ad07a; }
.fo-etq-ciano { background: #4fd1d9; }
.fo-etq-azul { background: #5aa0ff; }
.fo-etq-lilas { background: #b48cff; }
.fo-etq-rosa { background: #ff9aa2; }
.fo-etq-branco { background: #ffffff; }
.fo-etq-prata { background: #dfe7ff; }
.fo-etq-cinza { background: #a8b8d0; }
.fo-topico .fo-topico-titulo.fo-tit-vermelho, .fo-titulo.fo-tit-vermelho { color: #ff6a5a; }
.fo-topico .fo-topico-titulo.fo-tit-laranja, .fo-titulo.fo-tit-laranja { color: #ff9a4d; }
.fo-topico .fo-topico-titulo.fo-tit-dourado, .fo-titulo.fo-tit-dourado { color: #f0c850; }
.fo-topico .fo-topico-titulo.fo-tit-creme, .fo-titulo.fo-tit-creme { color: #f5dc8a; }
.fo-topico .fo-topico-titulo.fo-tit-verde, .fo-titulo.fo-tit-verde { color: #5ad07a; }
.fo-topico .fo-topico-titulo.fo-tit-ciano, .fo-titulo.fo-tit-ciano { color: #4fd1d9; }
.fo-topico .fo-topico-titulo.fo-tit-azul, .fo-titulo.fo-tit-azul { color: #5aa0ff; }
.fo-topico .fo-topico-titulo.fo-tit-lilas, .fo-titulo.fo-tit-lilas { color: #b48cff; }
.fo-topico .fo-topico-titulo.fo-tit-rosa, .fo-titulo.fo-tit-rosa { color: #ff9aa2; }
.fo-topico .fo-topico-titulo.fo-tit-branco, .fo-titulo.fo-tit-branco { color: #ffffff; }
.fo-topico .fo-topico-titulo.fo-tit-prata, .fo-titulo.fo-tit-prata { color: #dfe7ff; }
.fo-topico .fo-topico-titulo.fo-tit-cinza, .fo-titulo.fo-tit-cinza { color: #a8b8d0; }
/* ---- Rodada 2: o post RICO (tabs/forum-rico.js) --------------------------
   A cor chega como CHAVE da paleta e vira classe `fo-cor-<chave>` — as mesmas
   classes pintam o texto dentro do editor (Quill), que roda nesta página.
   Sem `gap` e sem `object-fit`: quem LÊ está no Chromium 47 do Maxthon. */
.fo-rico { word-wrap: break-word; overflow-wrap: break-word; }
.fo-rico .fo-par { margin: 0 0 10px; }
.fo-rico-h1, .fo-rico-h2 { font-family: 'Cinzel', serif; line-height: 1.3; }
.fo-rico-h1 { font-size: 1.45em; color: #f5dc8a; margin: 16px 0 10px; }
.fo-rico-h2 { font-size: 1.18em; color: #f0c850; margin: 14px 0 8px; }
.fo-rico-h1:first-child, .fo-rico-h2:first-child { margin-top: 0; }
.fo-alinhar-center { text-align: center; }
.fo-alinhar-right { text-align: right; }
.fo-alinhar-justify { text-align: justify; }
.fo-rico-lista { margin: 4px 0 12px 26px; padding: 0; }
.fo-rico-lista li { margin: 3px 0; }
.fo-rico-linha { border: 0; border-top: 1px solid rgba(240, 200, 80, .35); margin: 18px 0; }
.fo-rico-img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: middle; }
.fo-rico-ampliar { display: inline-block; max-width: 100%; padding: 0; margin: 0;
  background: none; border: 0; cursor: zoom-in; }
.fo-rico-link { color: #7fb4ff; text-decoration: underline; }
.fo-rico-link:hover { color: #a9ccff; }
.fo-spoiler { margin: 10px 0; padding: 8px 12px; border: 1px dashed rgba(240, 200, 80, .5);
  border-radius: 8px; background: rgba(6, 12, 36, .55); }
.fo-spoiler-titulo { cursor: pointer; color: #f0c850; font-weight: 700; }
.fo-spoiler[open] .fo-spoiler-titulo { margin-bottom: 8px; }
.fo-tam-small { font-size: .82em; }
.fo-tam-large { font-size: 1.3em; }
.fo-tam-huge { font-size: 1.75em; line-height: 1.25; }
.fo-cor-vermelho { color: #ff6a5a; }
.fo-cor-laranja { color: #ff9a4d; }
.fo-cor-dourado { color: #f0c850; }
.fo-cor-creme { color: #f5dc8a; }
.fo-cor-verde { color: #5ad07a; }
.fo-cor-ciano { color: #4fd1d9; }
.fo-cor-azul { color: #5aa0ff; }
.fo-cor-lilas { color: #b48cff; }
.fo-cor-rosa { color: #ff9aa2; }
.fo-cor-branco { color: #ffffff; }
.fo-cor-prata { color: #dfe7ff; }
.fo-cor-cinza { color: #a8b8d0; }

/* ── Ícones desenhados das seções (pedido do Lucas 02/10, tabs/forum-icones.js):
   o traço dourado no quadrado, sobre a cor do grupo, com um halo suave por
   trás; no repouso do mouse a linha inteira acende o desenho. `filter` e
   `transform` vão também com -webkit- (o Chromium 47 do Maxthon só conhece
   esses). Sem `gap` e sem `object-fit`. ── */
.fo-icone-desenho {
  color: #f0c850; background-color: #1f3a5a;
  background-image: radial-gradient(circle at 50% 40%, rgba(240, 200, 80, 0.22), rgba(240, 200, 80, 0) 66%);
}
.fo-icone-desenho.is-avisos { background-color: #3a1f5a; }
.fo-icone-desenho.is-guias { background-color: #1f5a3a; }
.fo-icone-desenho.is-comunidade { background-color: #1f3a5a; }
.fo-icone-desenho.is-reporte { background-color: #5a1f2c; }
.fo-desenho {
  display: block; width: 34px; height: 34px; overflow: visible;
  -webkit-transition: -webkit-transform 0.25s ease, -webkit-filter 0.25s ease;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.fo-secao:hover .fo-desenho {
  -webkit-transform: scale(1.08); transform: scale(1.08);
  -webkit-filter: drop-shadow(0 0 4px rgba(240, 200, 80, 0.55));
}
.fo-ger-linha .fo-desenho { width: 26px; height: 26px; }
.fo-sec-previa .fo-desenho { width: 34px; height: 34px; }
.fo-sec-desenhos { margin: 4px 0 12px; line-height: 0; }
.fo-sec-desenho {
  display: inline-block; vertical-align: top; width: 46px; height: 46px; padding: 5px;
  margin: 0 6px 6px 0; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(240, 200, 80, 0.22); background: #101d4a; color: #b9c6e4;
  -webkit-transition: border-color 0.15s ease, color 0.15s ease; transition: border-color 0.15s ease, color 0.15s ease;
}
.fo-sec-desenho:hover { border-color: rgba(240, 200, 80, 0.6); color: #f0c850; }
.fo-sec-desenho.is-on {
  border-color: #f0c850; color: #f0c850; background: #1c2b63;
  box-shadow: 0 0 0 2px rgba(240, 200, 80, 0.3);
}
.fo-sec-desenho .fo-desenho { width: 34px; height: 34px; }
@media (max-width: 720px) {
  .fo-desenho { width: 28px; height: 28px; }
}