/* ——— Menu inferior ———
   Uma fonte só para o jogo (index.html) e as estatísticas (stats.html): mesmos
   cinco itens, mesmo tamanho e a aba atual sempre em destaque. Carregado por
   último nas duas páginas para valer sobre os ajustes antigos de cada uma. */
:root {
    --wb-nav-space: calc(86px + env(safe-area-inset-bottom, 0px));
}

#app-bottom-nav.app-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    /* Acima da loja (13000), que agora é uma aba do menu; telas que precisam
       da tela inteira escondem o menu com data-footer-nav="hide". */
    z-index: 13500;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: min(94vw, 420px);
    margin: 0;
    padding: 6px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(8, 20, 45, 0.94) 0%, rgba(6, 16, 36, 0.92) 100%);
    background: linear-gradient(180deg, rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 10), 255) clamp(0, calc(g - 16), 255) clamp(0, calc(b - 27), 255) / 0.94) 0%, rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r - 12), 255) clamp(0, calc(g - 20), 255) clamp(0, calc(b - 36), 255) / 0.92) 100%); /* wb-theme */
    border: 1px solid rgba(129, 176, 243, 0.38);
    border: 1px solid rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 2), 255) clamp(0, calc(g - 8), 255) clamp(0, calc(b - 12), 255) / 0.38); /* wb-theme */
    box-shadow: 0 20px 34px -24px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#app-bottom-nav.app-bottom-nav.hidden {
    display: none !important;
}

#app-bottom-nav .app-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: #b9d6ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 54), 255) clamp(0, calc(g + 30), 255) b); /* wb-theme */
    background: transparent;
    transform: none;
}

#app-bottom-nav .app-nav-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-bottom-nav .app-nav-btn i {
    font-size: 1.2rem;
    line-height: 1;
    color: #89e2ff;
    color: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r + 6), 255) clamp(0, calc(g + 42), 255) b); /* wb-theme */
}

#app-bottom-nav .app-nav-btn--store,
#app-bottom-nav .app-nav-btn--store i {
    color: #ffd166;
    color: rgb(from var(--wb-warm, rgb(255 209 102)) r g b); /* wb-theme */
}

#app-bottom-nav .app-nav-btn:hover,
#app-bottom-nav .app-nav-btn:focus-visible {
    background: rgba(31, 76, 149, 0.45);
    background: rgb(from var(--wb-surface, rgb(18 36 72)) clamp(0, calc(r + 13), 255) clamp(0, calc(g + 40), 255) clamp(0, calc(b + 77), 255) / 0.45); /* wb-theme */
}

#app-bottom-nav .app-nav-btn:active {
    transform: translateY(1px);
}

/* Aba atual: fundo claro e texto branco, igual em todas as telas */
#app-bottom-nav .app-nav-btn.app-nav-btn--active {
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
    background: rgba(113, 221, 255, 0.18);
    background: rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 18), 255) clamp(0, calc(g + 37), 255) b / 0.18); /* wb-theme */
    box-shadow: inset 0 0 0 1px rgba(113, 221, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgb(from var(--wb-accent, rgb(131 184 255)) clamp(0, calc(r - 18), 255) clamp(0, calc(g + 37), 255) b / 0.45); /* wb-theme */
}

#app-bottom-nav .app-nav-btn.app-nav-btn--active i {
    color: #ffffff;
    color: rgb(from var(--wb-ink, rgb(235 244 255)) clamp(0, calc(r + 20), 255) clamp(0, calc(g + 11), 255) b); /* wb-theme */
}

#app-bottom-nav .app-nav-btn--store.app-nav-btn--active {
    background: rgba(255, 209, 102, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.5);
}

/* Loja e Configurações abrem com o menu à vista: o conteúdo para antes dele */
body.wb-has-bottom-nav #store-modal {
    padding-bottom: var(--wb-nav-space);
}

body.wb-has-bottom-nav #store-modal .stats-modal-content.st-modal {
    max-height: calc(100dvh - 32px - var(--wb-nav-space));
}

body.wb-has-bottom-nav #quick-settings-modal.screen.wb-sheet-screen {
    padding-bottom: var(--wb-nav-space);
}

body.wb-has-bottom-nav #quick-settings-modal .wb-sheet {
    max-height: calc(100dvh - 32px - var(--wb-nav-space));
}

/* ——— Banner nativo do app (AdMob) ———
   O banner e um overlay do WebView, fora do HTML. Quando ele aparece, o
   ads-analytics.js marca body.wb-banner-visible e publica a altura real em
   --wb-banner-height (60px ate o AdMob informar). O menu sobe e o fim das
   telas ganha o espaco do banner: nada fica coberto. O banner so entra em
   ranking, stats e arena de duelos; no menu e na partida ele nao aparece. */
body.wb-banner-visible #app-bottom-nav.app-bottom-nav {
    bottom: calc(var(--wb-banner-height, 60px) + 10px + env(safe-area-inset-bottom, 0px));
}

body.wb-banner-visible .screen {
    padding-bottom: calc(
        var(--wb-banner-height, 60px) + 80px + env(safe-area-inset-bottom, 0px)
    );
}

body.wb-banner-visible.stats-page .stats-container {
    padding-bottom: calc(
        120px + var(--wb-banner-height, 60px) + env(safe-area-inset-bottom, 0px)
    );
}