/* ==========================================================================
   O cabeçalho único do site (assets/js/cabecalho.js). Tudo com o prefixo cbh- e com as próprias cores, para
   não brigar com o style.css das outras páginas (que também tem .btn, .brand...). As fontes (Barlow Condensed
   e Manrope) são as que todas as páginas públicas já carregam.
   ========================================================================== */
.cbh {
  --cbh-h: 68px; --cbh-deep: #03132f; --cbh-ink: #eef2ff; --cbh-dim: #b9c6e6; --cbh-accent: #ffc428; --cbh-line: rgba(255, 255, 255, .12);
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--cbh-h);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--cbh-ink); line-height: 1.4;
  background: linear-gradient(rgba(2, 11, 29, .82), rgba(2, 11, 29, 0));
  transition: background .25s ease, box-shadow .25s ease;
}
.cbh *, .cbh *::before, .cbh *::after { box-sizing: border-box }
.cbh.cbh-solido { background: rgba(3, 16, 40, .95); box-shadow: 0 1px 0 var(--cbh-line), 0 12px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(10px) }
.cbh-espaco { height: 68px }
.cbh a { color: inherit; text-decoration: none }
.cbh button { font: inherit; color: inherit; cursor: pointer; margin: 0 }
.cbh :focus-visible { outline: 3px solid #24ddff; outline-offset: 3px; border-radius: 6px }
.cbh-row { height: 100%; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 20px }
.cbh-brand { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 900; font-size: 27px; letter-spacing: .03em; line-height: 1; white-space: nowrap }
.cbh-brand strong { color: #fff; font-weight: 900 }
.cbh-brand em { color: var(--cbh-accent); font-style: italic }
.cbh-links { display: flex; gap: 4px; margin-right: auto }
.cbh-links a, .cbh-links button {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cbh-dim); padding: 8px 9px; border-radius: 8px; border: 0; background: none; text-align: left; transition: color .15s ease, background .15s ease;
}
.cbh-links a:hover, .cbh-links a.on { color: #fff; background: rgba(255, 255, 255, .08) }
.cbh-links a.on { color: var(--cbh-accent) }
.cbh-links .cbh-nm { display: none }
.cbh-links .cbh-nm-user { font-family: Manrope, system-ui, sans-serif; font-size: 14px !important; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; padding: 10px 14px 12px; border-bottom: 1px solid var(--cbh-line); margin-bottom: 4px }
.cbh-end { display: flex; align-items: center; gap: 12px }
/* idioma: um botão pequeno (globo + PT/EN) que abre as duas opções */
.cbh-lang { position: relative }
.cbh-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cbh-line); background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--cbh-ink); transition: border-color .15s ease, background .15s ease }
.cbh-lang-btn:hover, .cbh-lang-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1) }
.cbh-lang-btn svg { width: 17px; height: 17px; fill: currentColor; opacity: .85 }
.cbh-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; padding: 6px; border-radius: 14px; background: rgba(3, 16, 40, .98); border: 1px solid var(--cbh-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: grid; gap: 2px; z-index: 2 }
.cbh-lang-menu[hidden] { display: none }
.cbh-lang-menu button { text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--cbh-dim) }
.cbh-lang-menu button:hover { background: rgba(255, 255, 255, .08); color: #fff }
.cbh-lang-menu button[aria-checked="true"] { color: var(--cbh-accent) }
.cbh-lang-menu button[aria-checked="true"]::after { content: " ✓" }
.cbh-acts { display: flex; align-items: center; gap: 6px }
.cbh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font-weight: 800; font-size: 14.5px; line-height: 1; padding: 10px 16px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.cbh-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none }
.cbh-btn:hover { transform: translateY(-2px) }
.cbh-accent { background: var(--cbh-accent); color: #1a1200 !important; box-shadow: 0 10px 30px rgba(255, 196, 40, .32) }
.cbh-accent:hover { box-shadow: 0 16px 40px rgba(255, 196, 40, .5) }
.cbh-ghost { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04) }
.cbh-ghost:hover, .cbh-ghost[aria-current="page"] { border-color: #fff; background: rgba(255, 255, 255, .1) }
.cbh-quiet { padding-inline: 12px }
.cbh-quiet:hover, .cbh-quiet[aria-current="page"] { color: var(--cbh-accent) }
.cbh-cash svg { color: var(--cbh-accent) }
/* o jogador conectado */
.cbh-user { display: inline-flex; align-items: center; gap: 9px; margin-left: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid transparent; flex: none; transition: background .15s ease, border-color .15s ease }
.cbh-user:hover, .cbh-user[aria-current="page"] { background: rgba(255, 255, 255, .08); border-color: var(--cbh-line) }
.cbh-face { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #ffc428, #ff7a9c); flex: none }
.cbh-face img { width: 32px; height: 32px; object-fit: cover; border-radius: 50% }
.cbh-who { display: grid; line-height: 1.15; flex: none }
.cbh-who strong { font-size: 14px; font-weight: 800; color: #fff; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cbh-who small { font-size: 12px; font-weight: 600; color: var(--cbh-dim) }
.cbh-sair { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--cbh-dim) }
.cbh-sair:hover { color: #fff; border-color: var(--cbh-line); background: rgba(255, 255, 255, .06) }
.cbh-sair svg { width: 20px; height: 20px; fill: currentColor }
.cbh-menu { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--cbh-line); background: rgba(255, 255, 255, .06); flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 }
.cbh-menu span { width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease }
.cbh-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.cbh-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.cbh-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* as seções vão para o menu (botão de três traços) abaixo de 1260 px; com login, já abaixo de 1340 px,
   porque a barra tem mais botões */
@media (max-width: 1260px) {
  .cbh .cbh-menu { display: flex }
  .cbh .cbh-links { position: absolute; left: 12px; right: 12px; top: calc(var(--cbh-h) + 4px); flex-direction: column; gap: 2px; padding: 10px; border-radius: 18px; background: rgba(3, 16, 40, .98); border: 1px solid var(--cbh-line); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); display: none; margin: 0 }
  .cbh .cbh-links.open { display: flex }
  .cbh .cbh-links a, .cbh .cbh-links button { font-size: 20px; padding: 12px 14px }
  .cbh .cbh-end { margin-left: auto }
}
@media (min-width: 1261px) and (max-width: 1340px) {
  .cbh.cbh-logado .cbh-menu { display: flex }
  .cbh.cbh-logado .cbh-links { position: absolute; left: 12px; right: 12px; top: calc(var(--cbh-h) + 4px); flex-direction: column; gap: 2px; padding: 10px; border-radius: 18px; background: rgba(3, 16, 40, .98); border: 1px solid var(--cbh-line); box-shadow: 0 24px 50px rgba(0, 0, 0, .5); display: none; margin: 0 }
  .cbh.cbh-logado .cbh-links.open { display: flex }
  .cbh.cbh-logado .cbh-links a { font-size: 20px; padding: 12px 14px }
  .cbh.cbh-logado .cbh-end { margin-left: auto }
}
@media (max-width: 1060px) {
  .cbh.cbh-logado .cbh-quiet, .cbh.cbh-logado .cbh-ghost { display: none }
  .cbh.cbh-logado .cbh-links .cbh-nm:not(.cbh-nm-dl):not(.cbh-nm-sair) { display: block }
}
@media (max-width: 900px) {
  .cbh .cbh-quiet, .cbh .cbh-ghost { display: none }
  .cbh .cbh-links .cbh-nm:not(.cbh-nm-dl):not(.cbh-nm-sair) { display: block }
  .cbh-who { display: none }
}
@media (max-width: 700px) {
  .cbh-row { padding: 0 16px }
  .cbh .cbh-dl, .cbh .cbh-sair { display: none }
  .cbh .cbh-links .cbh-nm-dl { display: block; color: var(--cbh-accent) }
  .cbh .cbh-links .cbh-nm-sair { display: block }
  .cbh-user { margin-left: 0; padding-right: 4px }
}
@media (max-width: 560px) {
  .cbh .cbh-user { display: none }
  .cbh .cbh-links .cbh-nm-user { display: block }
}
@media (max-width: 420px) {
  .cbh-brand { font-size: 21px }
  .cbh-row, .cbh-end { gap: 8px }
}
@media (prefers-reduced-motion: reduce) { .cbh, .cbh * { transition: none !important } }