/* O que a barra do CASSINO acrescenta à `barra.css` da exchange. Nada aqui
 * redefine regra de lá: só o selo da marca, o item externo, a capa na busca
 * e a fonte dos números. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/barra/fontes/JetBrainsMono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* selo CASINO ao lado do wordmark: mesma tinta, contorno fino, nunca cor cheia */
.oc-b .oc-barra-marca { display: inline-flex; align-items: center; gap: 9px; }
.oc-b .oc-marca-selo {
  font: 600 9.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .16em;
  padding: 4px 6px 3px 7px;
  border: 1px solid var(--ocb-fio-forte);
  border-radius: 3px;
  color: var(--ocb-tinta-2);
  transform: translateY(.5px);
}

/* item externo (Exchange ↗): a seta anda 1px no hover, e só ela */
.oc-b .oc-barra-ext { display: inline-flex; margin-left: 5px; opacity: .7; transition: transform .18s var(--ocb-mola), opacity .18s; }
.oc-b .oc-barra-item:hover .oc-barra-ext { transform: translate(1px, -1px); opacity: 1; }

/* capa do jogo na lista da busca: 28px, canto de 5, no lugar do ícone */
.oc-b .oc-busca-capa { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; display: block; background: var(--ocb-superficie-2); }
.oc-b .oc-barra-cel .oc-busca-capa + * { margin-left: 0; }

/* o ativo depois do número grande do menu de conta */
.oc-b .oc-cabeca-ativo { margin-left: 6px; font-size: 13px; letter-spacing: .04em; }

/* Telefone estreito: o selo fica (compromisso de marca), compacto e sem caixa; a largura volta pela pílula de saldo,
 * que mostra só o número (a unidade está no menu de conta). Sem isto a cadeia passava da borda direita em 390 px. */
@media (max-width: 479px) {
  .oc-b.oc-barra .oc-marca-selo { font-size: 8px; letter-spacing: .12em; padding: 0; border: 0; background: none; margin-left: 5px; }
  .oc-b.oc-barra [data-oc-saldo] .oc-saldo-ativo { display: none; }
}
.oc-b .oc-barra-cel.oc-externo .oc-barra-ext { margin-left: auto; opacity: .6; }