/* ============================================================================
 * MENU SUPERIOR "CARTAO" (opcao C, 03/10/2026) — folha do core/topbar_cartao.js.
 * Mock: techterra-online-backend/docs/mock-mapa-compartilhado-v2.html (itens 33-36).
 * Tudo aqui so' vale com `#top-bar.tbc-ativo` (o JS liga quando monta): sem o
 * modulo, a barra fica exatamente como antes. Carregada antes do mobile.css; as
 * regras de celular daqui usam seletor mais especifico pra vencer as de la'.
 * ========================================================================== */

/* ---------- o cartao: seletor de personagem + energias numa pilula so' ---------- */
#top-bar.tbc-ativo .tbc-cartao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 12px 3px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(201, 168, 76, 0.45);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
#top-bar.tbc-ativo .tbc-cartao:hover { border-color: var(--gold-light, #f3da9c); background: rgba(201, 168, 76, 0.08); }
#top-bar.tbc-ativo .tbc-cartao.tbc-vazio { display: none; }
#top-bar.tbc-ativo .tbc-cartao.tbc-sem-ficha { padding-left: 10px; }

/* o seletor (app.js renderNavCharSelector) vira o "rosto" do cartao */
#top-bar.tbc-ativo .tbc-cartao #nav-char-selector .nav-char-btn {
    padding: 0;
    gap: 9px;
    background: none;
    border: none;
}
#top-bar.tbc-ativo .tbc-cartao .nav-char-img,
#top-bar.tbc-ativo .tbc-cartao .nav-grp-brasao {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold, #c9a84c);
}
#top-bar.tbc-ativo .tbc-cartao .nav-char-name,
#top-bar.tbc-ativo .tbc-cartao .nav-grp-nome {
    display: flex;
    flex-direction: column;
    font: 700 0.85rem 'Cinzel', serif;
    color: var(--gold-light, #f3da9c);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}
#top-bar.tbc-ativo .tbc-cartao .nav-char-name::after,
#top-bar.tbc-ativo .tbc-cartao .nav-grp-nome::after {
    content: 'Toque para abrir ▾';
    font: 400 0.66rem 'Lora', serif;
    color: var(--parchment-dark, #a89878);
    letter-spacing: 0;
}
#top-bar.tbc-ativo .tbc-cartao .nav-char-arrow { display: none; }

/* as energias (personagens.js renderEnergyHUD) entram menores, dentro do cartao */
#top-bar.tbc-ativo .tbc-cartao #nav-status {
    order: 0;
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    gap: 2px;
}
#top-bar.tbc-ativo .tbc-cartao .energy-bar {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    gap: 0;
}
#top-bar.tbc-ativo .tbc-cartao .energy-dial { transform: scale(0.8); margin: -5px -3px; }
#top-bar.tbc-ativo .tbc-cartao .energy-dial-legenda { display: none; }

/* aviso de recebimentos (o mesmo numero do badge do #btn-personagens) */
#top-bar.tbc-ativo .tbc-cartao-dot {
    position: absolute;
    top: -5px;
    left: 30px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffd97a 0%, #c9a84c 100%);
    color: #1a0e08;
    font: 700 10px/17px system-ui, sans-serif;
    text-align: center;
    pointer-events: none;
}
#top-bar.tbc-ativo .tbc-cartao-dot[hidden] { display: none; }

/* ---------- direita: so' os lugares que se visita, com nome ---------- */
#top-bar.tbc-ativo #nav-right { gap: 6px; }
#top-bar.tbc-ativo #nav-right > .nav-btn {
    position: relative;
    padding: 7px 12px;
    text-transform: none;
}
#top-bar.tbc-ativo #nav-right > .nav-btn .tbc-rot b {
    font: 700 0.72rem 'Cinzel', serif;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
#top-bar.tbc-ativo #nav-right > .nav-btn .tbc-rot small { display: none; }
/* contadores que a base ancora EMBAIXO (passe/quests) sobem pro canto de cima: embaixo cobririam o nome */
#top-bar.tbc-ativo #nav-right > .nav-btn > .nav-btn-badge:not(.nav-btn-badge-notif) { top: -8px; bottom: auto; right: -6px; }
/* progresso da temporada no botao do Passe (passe.js pintarProgressoBotao): a % ate' a
   ultima etapa ao lado do nome e uma barrinha embaixo; completo vira ✓ verde */
#top-bar.tbc-ativo #btn-passe .passe-prog b {
    font: 700 0.68rem system-ui, sans-serif;
    color: var(--gold-light, #f3da9c);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
#top-bar.tbc-ativo #btn-passe .passe-prog i {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 3px;
    height: 2px;
    border-radius: 1px;
    background: rgba(201, 168, 76, 0.22);
    overflow: hidden;
}
#top-bar.tbc-ativo #btn-passe .passe-prog i::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--passe-pct, 0%);
    background: linear-gradient(90deg, #9c7a26, #ffd97a);
}
#top-bar.tbc-ativo #btn-passe .passe-prog.completo b { color: #9be3a6; }
#top-bar.tbc-ativo #btn-passe .passe-prog.completo i::after { background: #7fd08e; }
#top-bar.tbc-ativo #btn-passe:hover .passe-prog b { color: inherit; }
html[data-viewport="mobile"] .mob-nav #btn-passe .passe-prog b {
    font: 700 9.5px system-ui, sans-serif;
    color: var(--gold-light, #f3da9c);
    line-height: 1;
}
html[data-viewport="mobile"] .mob-nav #btn-passe .passe-prog.completo b { color: #9be3a6; }
/* no celular a % ocupa o lugar do nome (o icone ja' diz que e' o Passe), com a barrinha embaixo */
html[data-viewport="mobile"] .mob-nav #btn-passe:has(.passe-prog) .mob-nav-label { display: none; }
html[data-viewport="mobile"] .mob-nav #btn-passe .passe-prog i {
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 5px;
    height: 2px;
    border-radius: 1px;
    background: rgba(201, 168, 76, 0.22);
    overflow: hidden;
}
html[data-viewport="mobile"] .mob-nav #btn-passe .passe-prog i::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--passe-pct, 0%);
    background: linear-gradient(90deg, #9c7a26, #ffd97a);
}
/* Passe vencido: so' "Encerrado" no lugar da % (passe.js pintarProgressoBotao) */
#btn-passe .passe-prog.encerrado i { display: none; }
#btn-passe .passe-enc {
    font: 700 0.6rem 'Cinzel', serif !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cfc6b4 !important;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(160, 150, 130, 0.45);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
}
#btn-passe:has(.passe-prog.encerrado) { filter: saturate(0.35); }
html[data-viewport="mobile"] .mob-nav #btn-passe .passe-enc { font-size: 8px !important; padding: 1px 5px; }

/* ---------- TEMA DO PASSE NA BARRA (proposta 37, aprovada em 03/10/2026; passe.js aplicarTemaNaBarra) ----------
   A pele inteira mora num ::before (papel de parede do passe + veu escuro + cor da tipagem): assim o
   "apagado" do passe vencido descolore so' o fundo, nunca os botoes. */
html #top-bar.tbc-passe-tema {
    background: transparent;
    border-bottom-color: var(--passe-pri);
    box-shadow: 0 2px 22px var(--passe-glow), inset 0 0 0 1px color-mix(in srgb, var(--passe-pri) 35%, transparent);
    isolation: isolate;
}
html #top-bar.tbc-passe-tema::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.55) 35%, rgba(10, 8, 6, 0.55) 65%, rgba(10, 8, 6, 0.86) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--passe-sec) 55%, transparent), rgba(10, 8, 6, 0.35)),
        var(--passe-img, none) center 38% / cover no-repeat,
        var(--passe-sec);
    transition: filter 0.3s, opacity 0.3s;
}
html #top-bar.tbc-passe-tema::after { background: linear-gradient(90deg, transparent, var(--passe-pri), transparent); height: 2px; bottom: -2px; }
/* vencido e nenhum passe novo publicado: a barra do anterior, apagada */
html #top-bar.tbc-passe-tema.tbc-passe-vencido::before { filter: grayscale(1) brightness(0.62); opacity: 0.75; }
html #top-bar.tbc-passe-tema.tbc-passe-vencido { border-bottom-color: #5d564c; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
html #top-bar.tbc-passe-tema.tbc-passe-vencido::after { background: linear-gradient(90deg, transparent, #6d665a, transparent); }
/* nome da temporada no canto da barra */
.tbc-passe-selo {
    position: absolute;
    right: 12px;
    bottom: 3px;
    z-index: 1;
    font: 700 0.55rem 'Cinzel', serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--passe-pri) 80%, #fff);
    text-shadow: 0 1px 3px #000;
    pointer-events: none;
    opacity: 0.85;
}
#top-bar.tbc-passe-vencido .tbc-passe-selo { color: #8a8274; }
#top-bar:not(.tbc-passe-tema) .tbc-passe-selo,
html[data-viewport="mobile"] .tbc-passe-selo { display: none; }

/* com um menu aberto, os baloes presos nos botoes (novidades, eventos) nao passam por cima dele */
#top-bar.tbc-ativo.tbc-pop-aberto .nov-balao,
#top-bar.tbc-ativo.tbc-pop-aberto .cp-balao { display: none !important; }
#top-bar.tbc-ativo #nav-right > .nav-btn:hover .tbc-rot b { color: inherit; }
/* PC estreito: volta a ser so' icone, pra caber numa linha */
@media (max-width: 1250px) {
    #top-bar.tbc-ativo #nav-right > .nav-btn .tbc-rot { display: none; }
    #top-bar.tbc-ativo #nav-right > .nav-btn { padding: 8px 12px; }
}

/* ---------- menus suspensos (cartao e engrenagem) ---------- */
#top-bar.tbc-ativo .tbc-ancora { position: relative; display: flex; }
#top-bar.tbc-ativo .tbc-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1300;
    min-width: 260px;
    padding: 6px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(30, 23, 14, 0.99), rgba(16, 12, 8, 0.99));
    border: 1px solid rgba(201, 168, 76, 0.45);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
    cursor: default;
}
#top-bar.tbc-ativo .tbc-pop[hidden] { display: none; }
#top-bar.tbc-ativo .tbc-pop-cartao { left: 0; right: auto; }
/* o da engrenagem mora no #top-bar (fora do #nav-right): ancora no canto direito da barra */
#top-bar.tbc-ativo .tbc-pop-ajustes { top: calc(100% + 4px); right: 22px; }
#top-bar.tbc-ativo .tbc-pop-tit {
    font: 700 0.6rem 'Cinzel', serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #7d705a);
    padding: 8px 10px 2px;
}
/* os botoes movidos pra dentro do menu viram linhas: icone + nome + linha de apoio */
#top-bar.tbc-ativo .tbc-pop .nav-btn {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 7px;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
    color: var(--gold, #c9a84c);
}
#top-bar.tbc-ativo .tbc-pop .nav-btn:hover {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--gold, #c9a84c);
    transform: none;
}
#top-bar.tbc-ativo .tbc-pop .nav-btn[hidden] { display: none; }
/* Quests desligado (quests.js desabilita enquanto a feature esta' fora) nao ocupa linha */
#top-bar.tbc-ativo .tbc-pop .nav-btn:disabled { display: none; }
#top-bar.tbc-ativo .tbc-pop .nav-btn svg { flex: 0 0 auto; width: 18px; height: 18px; }
#top-bar.tbc-ativo .tbc-pop .tbc-rot { display: flex; flex-direction: column; text-align: left; min-width: 0; }
#top-bar.tbc-ativo .tbc-pop .tbc-rot b { font: 600 0.82rem 'Lora', serif; color: var(--text-light, #e8dcc4); }
#top-bar.tbc-ativo .tbc-pop .tbc-rot small { font: 400 0.7rem 'Lora', serif; color: var(--parchment-dark, #a89878); }
/* badges que vieram junto com o botao (novidades, recebimentos) ficam no fim da linha */
#top-bar.tbc-ativo .tbc-pop .nav-btn-badge { position: static; margin-left: auto; }
#top-bar.tbc-ativo .tbc-btn-ajustes { padding: 8px 10px; }

/* ---------- celular: o cartao e' a linha de cima ---------- */
html[data-viewport="mobile"] #top-bar.tbc-ativo #nav-center { flex: 1 1 auto; min-width: 0; gap: 8px; }
html[data-viewport="mobile"] #top-bar.tbc-ativo #nav-compass { display: none; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao { flex: 1 1 auto; min-width: 0; gap: 6px; padding: 2px 8px 2px 3px; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao #nav-char-selector { min-width: 0; flex: 1 1 auto; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .nav-char-img,
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .nav-grp-brasao { width: 34px; height: 34px; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .nav-char-name,
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .nav-grp-nome { max-width: none; font-size: 0.78rem; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao #nav-status {
    flex: 0 0 auto;
    min-height: 0;
    justify-content: flex-end;
}
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .energy-dial { transform: scale(0.7); margin: -7px -6px; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-cartao .energy-info-btn { display: none; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-pop-cartao { left: 0; right: 0; min-width: 0; }
html[data-viewport="mobile"] #top-bar.tbc-ativo .tbc-pop .nav-btn { min-height: var(--mob-tap, 44px); }
html[data-viewport="mobile"] #top-bar.tbc-ativo #btn-zoom-out-text { display: none; }

/* barra de baixo (mobile_shell.js): nome embaixo do icone */
html[data-viewport="mobile"] .mob-nav.tbc-mob .nav-btn {
    flex-direction: column;
    gap: 3px;
}
html[data-viewport="mobile"] .mob-nav.tbc-mob .mob-nav-label {
    font: 700 9.5px 'Cinzel', serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: none;
    line-height: 1;
}
/* a Novidades agora tem slot proprio, com o contador nela: o ponto que o novidades.js
   acende no "⋯" (quando ela morava na gaveta) ficaria repetido no "Ajustes" */
html[data-viewport="mobile"] .mob-nav.tbc-mob .mob-burger.nov-tem::after { display: none; }
/* com o nome embaixo o icone sobe: os contadores (passe "3/20") vao pro lado dele, sem cobri-lo */
html[data-viewport="mobile"] .mob-nav.tbc-mob .nav-btn-badge:not(.nav-btn-badge-notif) { top: 2px; right: calc(50% - 34px); }
html[data-viewport="mobile"] .mob-nav.tbc-mob #btn-novidades .nav-btn-badge { top: 2px; right: calc(50% - 26px); }
/* gaveta "Ajustes": Quests desligado nao ocupa linha */
html[data-viewport="mobile"] .mob-drawer .nav-btn:disabled { display: none; }