:root { --cab-a: #00c8ff; --cab-ar: 0, 200, 255; --cab-b: #9fe9ff; --cab-bg: #050c16; --cab-mu: #6f8aa6; --cab-tx2: #b9cde0; --cab-r: 0; --cab-f: "Exo 2", Arial, sans-serif; --cab-fb: "Inter", Arial, sans-serif; }
/* cabeçalho das páginas internas: brasão da seção, trilha, título e o ícone grande apagado ao fundo.
   Substitui a faixa grande com o nome do servidor (o nome já está no logo do menu). Cores do site em --cab-*. */
.cab.cab { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; column-gap: 20px; row-gap: 2px;
  margin: 0 0 22px; padding: 18px 26px 18px 18px; border-radius: var(--cab-r);
  background: radial-gradient(55% 160% at 0% 50%, rgba(var(--cab-ar), .22), rgba(var(--cab-ar), 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2)), var(--cab-bg);
  border: 1px solid rgba(var(--cab-ar), .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 44px -30px rgba(var(--cab-ar), .75); }
.cab > .cab-ln { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cab-a), rgba(var(--cab-ar), .35) 45%, rgba(var(--cab-ar), 0) 85%); }
.cab > .cab-mk { position: absolute; z-index: -1; right: -18px; top: 50%; width: 170px; height: 170px; margin-top: -85px; color: var(--cab-a); opacity: .07; pointer-events: none; }
.cab > .cab-mk svg { width: 100%; height: 100%; }
.cab-em { position: relative; grid-row: 1 / span 4; align-self: center; display: grid; place-items: center; width: 68px; height: 76px; color: var(--cab-a);
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--cab-b), rgba(var(--cab-ar), .3) 55%, rgba(var(--cab-ar), .75)); }
.cab-em::before { content: ""; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 32%, rgba(var(--cab-ar), .5), var(--cab-bg) 74%); }
.cab-em svg { position: relative; width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(var(--cab-ar), .8)); }
.cab-tx { display: grid; gap: 4px; min-width: 0; }
.cab .cab-trilha, .cab .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; border: 0; font: 600 12px/1.3 var(--cab-fb); letter-spacing: .04em; color: var(--cab-mu); }
.cab .cab-trilha a, .cab .crumbs a { color: var(--cab-b); text-decoration: none; }
.cab .cab-trilha a:hover, .cab .crumbs a:hover { color: #fff; text-decoration: underline; }
.cab .cab-trilha i { width: 5px; height: 5px; border-top: 1.5px solid var(--cab-mu); border-right: 1.5px solid var(--cab-mu); transform: rotate(45deg); opacity: .8; }
.cab .crumbs .i { width: 12px; height: 12px; color: var(--cab-mu); }
.cab.cab h1, .cab.cab .page-header-title { margin: 0; padding: 0; font: 700 31px/1.08 var(--cab-f); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: none; -webkit-text-fill-color: currentColor; filter: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 26px rgba(var(--cab-ar), .4); overflow-wrap: anywhere; }
.cab.cab .page-header-sub, .cab.cab p { margin: 2px 0 0; max-width: 680px; font: 400 14px/1.5 var(--cab-fb); letter-spacing: normal; text-transform: none; color: var(--cab-tx2); }
/* cabeçalho da Arena (crumbs, título e o link do moderador) e do baú virtual: o brasão entra à esquerda */
.cab.cab-ar > .crumbs, .cab.cab-ar > .ar-head-row, .cab.cab-bv > nav, .cab.cab-bv > .crumbs, .cab.cab-bv > h1, .cab.cab-bv > p { grid-column: 2; }
.cab.cab-ar .ar-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cab.cab-ar::before, .cab.cab-ar::after { display: none; }
@media (max-width: 640px) {
  .cab { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 12px; }
  .cab-em { width: 52px; height: 58px; } .cab-em svg { width: 26px; height: 26px; }
  .cab.cab h1, .cab.cab .page-header-title { font-size: 23px; }
  .cab.cab .page-header-sub, .cab.cab p { font-size: 13px; }
  .cab > .cab-mk { width: 120px; height: 120px; margin-top: -60px; }
}
.cab-esp { height: 24px; }
/* páginas com o menu do lado: o cabeçalho fica no topo, na largura toda (igual ao Rankings) */
.main-section.cab-sec { flex-wrap: wrap; }
.main-section > .cab.cab-topo { flex: 0 0 100%; width: 100%; max-width: 100%; box-sizing: border-box; grid-column: 1 / -1; margin: 0 0 22px; }
/* baú virtual, baú de guild e minhas compras: o cabeçalho na largura toda e o status da conta embaixo, à direita */
.bv-head.bv-head { flex-wrap: wrap; gap: 14px; }
.bv-head > .cab.cab-bv { flex: 1 1 100%; width: 100%; box-sizing: border-box; margin: 0; }
.bv-head > .bv-status { margin-left: auto; }
/* MU GAME Easy: a faixa da página continua (arte e online), mais baixa e com o brasão */
.ph.cab-ph { height: 132px; }
.ph.cab-ph .wrap { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.ph.cab-ph .ph-txt { flex: 1 1 auto; }
.ph.cab-ph .ph-online { margin-left: auto; }
.ph.cab-ph h1 { margin: 4px 0 2px; font-size: 32px; }
@media (max-width: 640px) { .ph.cab-ph { height: auto; padding: 16px 0; } .ph.cab-ph .wrap { flex-wrap: wrap; gap: 12px; } .ph.cab-ph .cab-em { width: 52px; height: 58px; } }