/* =============================================================================
   Bombom II - Identidade Visual (direcao 1b/Bayram sobre o Padrao Back 2U Games)
   =============================================================================
   Camada de identidade do site do jogador. Carregada depois de xmutarn.min.css e
   de app.css, entao vence por ordem de origem sem precisar de !important.

   Nao e usada pelo painel de controle (Xttdenc.Dashboard) nem pelo portal de
   suporte (Xttdenc.Web.Support): cada um serve o proprio wwwroot.

   Indice
     01 Fontes
     02 Tokens
     03 Tema (mapeia os tokens para as variaveis do xmutarn)
     04 Base
     05 Tipografia
     06 Movimento e foco
     07 Botoes
     08 Campos de formulario
     09 Cards
     10 Tags, status e adesivos
     11 Navegacao e rodape
     12 Os quatro estados de tela
     13 Feedback, dialogos e progresso
     14 360 px
     15 Ancora do pular para o conteudo
     16 Sombras utilitarias
     17 Card de noticia
     18 Home de lancamento
   ========================================================================== */

/* == 01 Fontes ============================================================= */
/* Fredoka: titulos e numeros. Plus Jakarta Sans: todo o resto.
   latin-ext e obrigatorio para o turco: g-breve, s-cedilha e I-com-ponto.

   Os arquivos principais sao variaveis: um por subconjunto cobre toda a faixa de peso. O launcher
   do jogo, porem, embute um Chromium anterior ao 62, que e quando a fonte variavel passou a valer;
   la o @font-face inteiro e descartado e o site cai na fonte do sistema — foi assim que o
   sublinhado das abas saiu desalinhado em turco, com o rotulo turco caindo noutra fonte.

   Por isso a folha traz os dois: quem entende fonte variavel recebe os arquivos variaveis; quem
   nao entende recebe as instancias estaticas, uma por peso usado (Fredoka 400/600/700, Plus
   Jakarta Sans 400/600/700/800) e por subconjunto. O navegador so baixa os pesos que a pagina
   pedir, e nenhum navegador baixa os dois conjuntos.

   Ao usar um peso novo, gere a instancia estatica correspondente — sem ela, o launcher desenha
   aquele peso na fonte do sistema. */

@supports (font-variation-settings: normal) {
    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 300 700;
        font-display: swap;
        src: url("fonts/fredoka/latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 300 700;
        font-display: swap;
        src: url("fonts/fredoka/latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}

@supports not (font-variation-settings: normal) {
    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("fonts/fredoka/static/400-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("fonts/fredoka/static/400-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("fonts/fredoka/static/600-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("fonts/fredoka/static/600-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/fredoka/static/700-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Fredoka";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/fredoka/static/700-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/400-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/400-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/600-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/600-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/700-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/700-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/800-latin-ext.woff2") format("woff2");
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("fonts/plus-jakarta-sans/static/800-latin.woff2") format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
}

/* == 02 Tokens ============================================================= */

:root {
    /* Base quente. */
    --bb-cream: #FFF6E5;
    --bb-white: #FFFFFF;
    --bb-sand: #F1EBE3;
    --bb-sand-line: #E9DCC9;
    --bb-muted: #7A675A;
    --bb-secondary: #5D4B3E;
    --bb-ink: #2B1D12;
    --bb-ink-hover: #3D2B1C;
    --bb-ink-active: #1A110A;
    --bb-ink-soft: #D9C9B3;

    /* Acao e destaque. Duas versoes do coral: fundo e texto. */
    --bb-coral: #D62839;
    --bb-coral-hover: #C1202F;
    --bb-coral-active: #A81A29;
    --bb-coral-text: #B51E2D;
    --bb-coral-light: #FFE1E1;
    --bb-coral-disabled: #F1C7CB;
    --bb-sun: #FFC933;

    /* Pasteis e semanticas: fundo + texto sempre pareados. */
    --bb-sky-bg: #DFF0FF;
    /* O documento pede 5,0:1 sobre o ceu claro; #1C6FB8 entrega 4,49:1 medido, entao
       o azul desce um passo para cumprir a propria regra de contraste. */
    --bb-sky-fg: #1A66AA;
    --bb-mint-bg: #E6F7EE;
    --bb-mint-fg: #1F7A47;
    --bb-mint-dot: #1F9D55;
    --bb-sunlight-bg: #FFF1BF;
    --bb-sunlight-fg: #7A5A00;
    --bb-peach-bg: #FFE9D6;
    --bb-peach-fg: #8A3D00;
    --bb-lilac-bg: #EFE6FF;
    --bb-lilac-fg: #6B3FB5;
    --bb-disabled-fg: #B3A496;

    /* Tipografia. */
    --bb-font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
    --bb-font-text: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

    /* Raios. */
    --bb-radius-tag: 0.625rem;    /* 10 - tag quadrada       */
    --bb-radius-field: 0.875rem;  /* 14 - campo, imagem      */
    --bb-radius-counter: 1.125rem;/* 18 - contador           */
    --bb-radius-card: 1.375rem;   /* 22 - card               */
    --bb-radius-surface: 1.625rem;/* 26 - banda, dialogo     */
    --bb-radius-pill: 999px;      /*     - botao, pilula     */

    /* Sombras: sempre marrom quente, nunca preto. */
    --bb-shadow-rest: 0 10px 30px rgba(120, 60, 0, .08);
    --bb-shadow-raised: 0 16px 36px rgba(120, 60, 0, .14);
    --bb-shadow-coral: 0 12px 26px rgba(214, 40, 57, .30);
    --bb-shadow-coral-raised: 0 14px 28px rgba(214, 40, 57, .34);
    --bb-shadow-sticker: 0 6px 0 rgba(43, 29, 18, .12);

    /* Movimento: tres duracoes, uma curva. */
    --bb-ease: cubic-bezier(.2, .8, .2, 1);
    --bb-micro: .15s;
    --bb-normal: .2s;
    --bb-surface: .3s;

    /* Foco de teclado. */
    --bb-focus: var(--bb-sky-fg);

    /* Altura da barra fixa do celular. Um valor so, usado pela barra e pelo
       espacador que reserva o lugar dela no fim do conteudo. */
    --bb-mobile-bar-h: 3.375rem;
}

/* == 03 Tema =============================================================== */
/* O site inteiro roda em x-main-theme="game". Aqui esse tema deixa de ser
   escuro e passa a carregar a base quente da identidade: com isso toda
   ocorrencia das classes theme-fg e theme-bg nas paginas muda de uma vez. */

[x-main-theme=game] {
    --theme-primary: var(--bb-ink);
    --theme-secondary: var(--bb-secondary);
    --theme-hint: var(--bb-muted);
    --theme-disabled: var(--bb-disabled-fg);
    --theme-dividers: var(--bb-sand-line);
    --theme-foreground: var(--bb-white);
    --theme-background: var(--bb-cream);
    --theme-card: var(--bb-white);
    /* Definidos por app.css para o tema escuro; recolocados em tom quente. */
    --theme-dividers-2: var(--bb-sand);
    --theme-card-2: var(--bb-cream);
    --theme-card-3: var(--bb-sand);
    --theme-mid-opacity: rgba(255, 246, 229, .82);
    --theme-high-opacity: rgba(255, 246, 229, .96);
}

/* Paleta de destaque: coral. */
[x-featured-theme=bombom] {
    --theme-50: #FFF3F4;
    --theme-100: var(--bb-coral-light);
    --theme-200: #F5B9BE;
    --theme-300: #EE8B93;
    --theme-400: #E45A66;
    --theme-500: var(--bb-coral);
    --theme-600: var(--bb-coral-hover);
    --theme-700: var(--bb-coral-text);
    --theme-800: var(--bb-coral-active);
    --theme-900: #8E1522;
}

[x-accent-theme=bombom] {
    --theme-A100: var(--bb-coral-light);
    --theme-A200: #E45A66;
    --theme-A400: var(--bb-coral);
    --theme-A700: var(--bb-coral-active);
}

/* theme-fg-A400 e usado como cor de texto (links, "Suporte" na navegacao).
   Sobre creme e branco o coral de fundo nao chega a 4,5:1, entao texto usa
   sempre a versao escura. O mesmo vale para o featured. */
.theme-fg-A400,
.theme-fg-A200 {
    color: var(--bb-coral-text) !important;
}

.theme-fg-500,
.theme-fg-600,
.theme-fg-700 {
    color: var(--bb-coral-text) !important;
}

/* theme-fg-dividers pinta TEXTO com a cor de linha (#E9DCC9): sobre branco da 1,35:1, e o
   markup usa isso em 26 lugares — inclusive no rotulo dos oito botoes de /download-all, que
   ficavam praticamente invisiveis. Como cor de texto ela vira o apagado da identidade, que
   cumpre 4,5:1. Quem quer a linha de verdade usa borda ou theme-bg-dividers. */
.theme-fg-dividers {
    color: var(--bb-muted) !important;
}

/* Cores nomeadas do xmutarn. São as cores do Material, montadas para fundo
   escuro: sobre creme e branco nenhuma delas alcança 4,5:1 (o rosa fica em
   4,35:1, o laranja em 2,2:1). Aqui cada uma vira o par correspondente da
   identidade, todas medidas acima de 4,5:1 sobre branco e sobre creme. */
.fg-red,
.fg-pink { color: var(--bb-coral-text) !important; }

.fg-amber { color: var(--bb-sunlight-fg) !important; }

.fg-orange { color: var(--bb-peach-fg) !important; }

.fg-green,
.fg-light-green,
.fg-teal { color: var(--bb-mint-fg) !important; }

.fg-blue,
.fg-light-blue,
.fg-cyan { color: var(--bb-sky-fg) !important; }

.fg-indigo,
.fg-purple,
.fg-deep-purple { color: var(--bb-lilac-fg) !important; }

.fg-black,
.fg-grey,
.fg-blue-grey { color: var(--bb-ink) !important; }

.fg-white { color: var(--bb-white) !important; }

/* Fundos sólidos: os que carregam texto branco usam o tom escuro do par
   (o verde-menta claro só chega a 3,5:1 com branco); o sol leva texto tinta. */
.bg-red,
.bg-pink { background: var(--bb-coral) !important; }

.bg-green,
.bg-light-green,
.bg-teal { background: var(--bb-mint-fg) !important; }

.bg-blue,
.bg-light-blue,
.bg-cyan { background: var(--bb-sky-fg) !important; }

.bg-indigo,
.bg-purple,
.bg-deep-purple { background: var(--bb-lilac-fg) !important; }

.bg-orange { background: var(--bb-peach-fg) !important; }

.bg-amber { background: var(--bb-sun) !important; color: var(--bb-ink) !important; }

.bg-grey,
.bg-blue-grey { background: var(--bb-sand) !important; color: var(--bb-ink) !important; }

/* == 04 Base =============================================================== */

html {
    background-color: var(--bb-cream);
}

body {
    font-family: var(--bb-font-text);
    background-color: var(--bb-cream);
    color: var(--bb-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--bb-coral-text);
    transition: color var(--bb-micro) var(--bb-ease);
}

a:hover {
    color: var(--bb-coral);
}

/* Links que ja recebem cor por classe utilitaria nao sao recoloridos. */
a[class*="theme-fg-"],
a[class*="fg-"],
a.btn,
a.toolbar--nav--item,
a.list--item {
    color: inherit;
}

hr,
.border-divider {
    border-color: var(--bb-sand-line);
}

::-moz-selection {
    background: var(--bb-coral-light);
    color: var(--bb-coral-text);
}

::selection {
    background: var(--bb-coral-light);
    color: var(--bb-coral-text);
}

/* == 05 Tipografia ========================================================= */
/* Fredoka onde antes era Bebas Neue; Plus Jakarta Sans onde era Raleway. */

.typo-use-bebas-neue {
    font-family: var(--bb-font-display);
}

.typo-use-raleway,
.typo-use-roboto {
    font-family: var(--bb-font-text);
}

/* Titulo e sempre Fredoka, mesmo dentro de um bloco de texto. */
.typo-h1,
.typo-h2,
.typo-h3,
.typo-h4,
.typo-h5,
.typo-h6,
.typo-h1__sm, .typo-h2__sm, .typo-h3__sm, .typo-h4__sm,
.typo-h1__md, .typo-h2__md, .typo-h3__md, .typo-h4__md,
.typo-h1__lg, .typo-h2__lg, .typo-h3__lg, .typo-h4__lg,
.card--header--title,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bb-font-display);
    letter-spacing: -.01em;
}

/* Escala do documento: display 68, titulo 36, secao 30, card 20.
   Bebas Neue era condensada e caixa alta; Fredoka e larga e arredondada, entao
   os tamanhos herdados do xmutarn precisam descer para nao estourar a linha.
   Os seletores repetem os prefixos de familia do xmutarn so para empatar a
   especificidade - a ordem de carga decide. */
.typo-h1 {
    font-size: 4.25rem;
    line-height: 1.02;
}

.typo-h1,
.typo-use-roboto .typo-h1, .typo-use-roboto.typo-h1,
.typo-use-bebas-neue .typo-h1, .typo-use-bebas-neue.typo-h1,
.typo-use-raleway .typo-h1, .typo-use-raleway.typo-h1 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.typo-h2 {
    font-size: 2.75rem;
    line-height: 1.06;
}

.typo-h2,
.typo-use-roboto .typo-h2, .typo-use-roboto.typo-h2,
.typo-use-bebas-neue .typo-h2, .typo-use-bebas-neue.typo-h2,
.typo-use-raleway .typo-h2, .typo-use-raleway.typo-h2 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.typo-h3 {
    font-size: 2.25rem;
    line-height: 1.1;
}

.typo-h3,
.typo-use-roboto .typo-h3, .typo-use-roboto.typo-h3,
.typo-use-bebas-neue .typo-h3, .typo-use-bebas-neue.typo-h3,
.typo-use-raleway .typo-h3, .typo-use-raleway.typo-h3 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.typo-h4 {
    font-size: 1.75rem;
    line-height: 1.15;
}

.typo-h4,
.typo-use-roboto .typo-h4, .typo-use-roboto.typo-h4,
.typo-use-bebas-neue .typo-h4, .typo-use-bebas-neue.typo-h4,
.typo-use-raleway .typo-h4, .typo-use-raleway.typo-h4 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.typo-h5 {
    font-size: 1.375rem;
    line-height: 1.25;
}

.typo-h5,
.typo-use-roboto .typo-h5, .typo-use-roboto.typo-h5,
.typo-use-bebas-neue .typo-h5, .typo-use-bebas-neue.typo-h5,
.typo-use-raleway .typo-h5, .typo-use-raleway.typo-h5 {
    font-weight: 600;
    letter-spacing: 0;
}

.typo-h6 {
    font-size: 1.25rem;
    line-height: 1.3;
}

.typo-h6,
.typo-use-roboto .typo-h6, .typo-use-roboto.typo-h6,
.typo-use-bebas-neue .typo-h6, .typo-use-bebas-neue.typo-h6,
.typo-use-raleway .typo-h6, .typo-use-raleway.typo-h6 {
    font-weight: 600;
    letter-spacing: 0;
}

/* Corpo: 15-16/1.5, legenda 13, rotulo 11-12 em caixa alta. */
.typo-subtitle-1 { font-size: 1.125rem; line-height: 1.55; }
.typo-subtitle-2 { font-size: 1rem; line-height: 1.5; }
.typo-body-1 { font-size: 1rem; line-height: 1.55; }
.typo-body-2 { font-size: .9375rem; line-height: 1.5; }
.typo-caption-1 { font-size: .8125rem; line-height: 1.5; }
.typo-caption-2 { font-size: .75rem; line-height: 1.45; }

/* Numeros nunca fazem o layout pular: caixa de largura fixa. */
.typo-h1, .typo-h2, .typo-h3, .typo-h4,
.bb-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* O turco transforma i em I-com-ponto na caixa alta - so funciona com lang
   correto no html, que o App.razor passa a emitir. Nome de dominio e nome de
   plataforma ficam fora do uppercase. */
.bb-no-upper,
[lang="en"] {
    text-transform: none !important;
}

@media (min-width: 576px) {
    .typo-h1__sm { font-size: 4.25rem; line-height: 1.02; }
    .typo-h2__sm { font-size: 2.75rem; line-height: 1.06; }
    .typo-h3__sm { font-size: 2.25rem; line-height: 1.1; }
    .typo-h4__sm { font-size: 1.75rem; line-height: 1.15; }
}

@media (min-width: 768px) {
    .typo-h1__md { font-size: 4.25rem; line-height: 1.02; }
    .typo-h2__md { font-size: 2.75rem; line-height: 1.06; }
    .typo-h3__md { font-size: 2.25rem; line-height: 1.1; }
    .typo-h4__md { font-size: 1.75rem; line-height: 1.15; }
}

@media (min-width: 992px) {
    .typo-h1__lg { font-size: 4.25rem; line-height: 1.02; }
    .typo-h2__lg { font-size: 2.75rem; line-height: 1.06; }
    .typo-h3__lg { font-size: 2.25rem; line-height: 1.1; }
    .typo-h4__lg { font-size: 1.75rem; line-height: 1.15; }
}

/* == 06 Movimento e foco =================================================== */
/* Tres duracoes (150/200/300 ms) e uma curva. Excecoes justificadas: o
   esqueleto (1,2 s, linear, continuo) e o pulso do ponto online (2 s). */

@keyframes bbShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes bbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); }
    70% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); }
}

@keyframes bbStripe {
    to { background-position: 28px 0; }
}

@keyframes bbSpin {
    to { transform: rotate(360deg); }
}

/* Anel de foco unico em todo o site, so para navegacao por teclado. */
:focus-visible,
.btn:focus-visible,
.input--field:focus-visible,
.toolbar--nav--item:focus-visible,
.list--item:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--bb-focus);
    outline-offset: 3px;
    border-radius: inherit;
}

/* Link "pular para o conteudo": aparece no primeiro Tab. */
.bb-skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-ink);
    color: var(--bb-white);
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--bb-normal) var(--bb-ease);
}

.bb-skip-link:focus,
.bb-skip-link:focus-visible {
    transform: translateY(0);
    color: var(--bb-white);
}

/* Nada se o sistema pedir para reduzir movimento - inclusive o esqueleto. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* == 07 Botoes ============================================================= */
/* Pilula, Fredoka, alvo minimo 44 px. Responde em menos de 100 ms (cor e
   elevacao) e a acao trava enquanto processa.

   Sobre os seletores: enquanto o xmutarn ainda estiver na pagina, esta folha
   precisa alcancar a especificidade dele para valer - o mais alto la e
   .btn_flat:not([disabled]):not(.btn_disabled):not(.btn_color-accent):not(.btn_color-primary)
   (0,5,0), usado na cor do texto do secundario. Dai o prefixo de tema e as
   cadeias de :not() abaixo. Quando o xmutarn sair, tudo isto vira .btn,
   .btn_outlined e .btn_flat puros: nada mais muda. */

.btn {
    font-family: var(--bb-font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: var(--bb-radius-pill);
    min-height: 2.75rem;
    transition: background-color var(--bb-normal) var(--bb-ease),
                box-shadow var(--bb-normal) var(--bb-ease),
                transform var(--bb-normal) var(--bb-ease),
                color var(--bb-normal) var(--bb-ease),
                border-color var(--bb-normal) var(--bb-ease);
}

/* Metrica unica: o tamanho do botao nao depende mais da familia tipografica. */
.typo-use-bebas-neue .btn,
.btn.typo-use-bebas-neue,
.typo-use-raleway .btn,
.btn.typo-use-raleway,
.typo-use-roboto .btn,
.btn.typo-use-roboto {
    padding: 0 2.25em;
    height: 3.0375em;
    font-family: var(--bb-font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    border-radius: var(--bb-radius-pill);
}

/* O xmutarn pinta hover e ativo com um veu branco por cima. No coral isso
   clareia; a identidade escurece. O veu sai e a cor muda direto. */
.btn::before {
    display: none;
}

/* --- Primario: coral ------------------------------------------------------ */

[x-main-theme=game] .btn,
[x-main-theme=game] .btn.btn_color-featured,
[x-main-theme=game] .btn.btn_color-accent {
    background-color: var(--bb-coral);
    color: var(--bb-white);
    box-shadow: var(--bb-shadow-coral);
}

/* Botao pintado por classe utilitaria (bg-blue, bg-green, bg-amber...) nao e coral: o halo
   rosa em volta de uma cara azul ou verde era o defeito mais visivel da pagina de download.
   Recebe a sombra neutra quente. */
[x-main-theme=game] .btn.bg-red,
[x-main-theme=game] .btn.bg-pink,
[x-main-theme=game] .btn.bg-blue,
[x-main-theme=game] .btn.bg-light-blue,
[x-main-theme=game] .btn.bg-cyan,
[x-main-theme=game] .btn.bg-green,
[x-main-theme=game] .btn.bg-light-green,
[x-main-theme=game] .btn.bg-teal,
[x-main-theme=game] .btn.bg-amber,
[x-main-theme=game] .btn.bg-orange,
[x-main-theme=game] .btn.bg-indigo,
[x-main-theme=game] .btn.bg-purple,
[x-main-theme=game] .btn.bg-deep-purple,
[x-main-theme=game] .btn.bg-grey,
[x-main-theme=game] .btn.bg-blue-grey {
    box-shadow: var(--bb-shadow-rest);
}

[x-main-theme=game] .btn.bg-red:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-pink:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-blue:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-light-blue:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-cyan:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-green:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-light-green:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-teal:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-amber:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-orange:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-indigo:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-purple:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-deep-purple:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-grey:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn.bg-blue-grey:not([disabled]):not(.btn_disabled):hover {
    box-shadow: var(--bb-shadow-raised);
    filter: brightness(.92);
}

[x-main-theme=game] .btn:not([disabled]):not(.btn_disabled):not(.btn_flat):not(.btn_outlined):not(.btn_outlined-color):hover {
    background-color: var(--bb-coral-hover);
    box-shadow: var(--bb-shadow-coral-raised);
    transform: translateY(-1px);
}

[x-main-theme=game] .btn:not([disabled]):not(.btn_disabled):not(.btn_flat):not(.btn_outlined):not(.btn_outlined-color):active {
    background-color: var(--bb-coral-active);
    box-shadow: none;
    transform: translateY(0);
}

/* --- Tinta: acao secundaria sobre pastel ---------------------------------- */

[x-main-theme=game] .btn.btn_color-primary {
    background-color: var(--bb-ink);
    box-shadow: none;
}

[x-main-theme=game] .btn.btn_color-primary:not([disabled]):not(.btn_disabled):hover {
    background-color: var(--bb-ink-hover);
}

[x-main-theme=game] .btn.btn_color-primary:not([disabled]):not(.btn_disabled):active {
    background-color: var(--bb-ink-active);
}

/* --- Secundario: branco com borda tinta de 2 px --------------------------- */

.btn_outlined,
.btn_outlined-color {
    border-width: 2px;
}

[x-main-theme=game] .btn_flat,
[x-main-theme=game] .btn_outlined,
[x-main-theme=game] .btn_outlined-color {
    box-shadow: none;
}

[x-main-theme=game] .btn_outlined:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_outlined-color:not([disabled]):not(.btn_disabled) {
    background-color: var(--bb-white);
}

[x-main-theme=game] .btn_flat:not([disabled]):not(.btn_disabled) {
    background-color: transparent;
}

[x-main-theme=game] .btn_outlined:not(.btn_color-featured):not(.btn_color-accent),
[x-main-theme=game] .btn_outlined-color:not(.btn_color-featured):not(.btn_color-accent) {
    border-color: var(--bb-ink);
}

[x-main-theme=game] .btn_outlined.btn_color-featured,
[x-main-theme=game] .btn_outlined.btn_color-accent,
[x-main-theme=game] .btn_outlined-color.btn_color-featured,
[x-main-theme=game] .btn_outlined-color.btn_color-accent {
    border-color: var(--bb-coral);
}

[x-main-theme=game] .btn_flat:not([disabled]):not(.btn_disabled):not(.btn_color-accent):not(.btn_color-primary):not(.btn_color-featured),
[x-main-theme=game] .btn_outlined:not([disabled]):not(.btn_disabled):not(.btn_color-accent):not(.btn_color-primary):not(.btn_color-featured),
[x-main-theme=game] .btn_outlined-color:not([disabled]):not(.btn_disabled):not(.btn_color-accent):not(.btn_color-primary):not(.btn_color-featured) {
    color: var(--bb-ink);
}

/* Variantes de destaque em coral - no coral de texto, o unico que alcanca
   4,5:1 sobre branco e sobre creme. */
[x-main-theme=game] .btn_flat.btn_color-accent:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_flat.btn_color-featured:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_outlined.btn_color-accent:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_outlined.btn_color-featured:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_outlined-color.btn_color-accent:not([disabled]):not(.btn_disabled),
[x-main-theme=game] .btn_outlined-color.btn_color-featured:not([disabled]):not(.btn_disabled) {
    color: var(--bb-coral-text);
}

[x-main-theme=game] .btn_flat:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn_outlined:not([disabled]):not(.btn_disabled):hover,
[x-main-theme=game] .btn_outlined-color:not([disabled]):not(.btn_disabled):hover {
    background-color: var(--bb-cream);
    box-shadow: none;
    transform: translateY(-1px);
}

[x-main-theme=game] .btn_flat:not([disabled]):not(.btn_disabled):active,
[x-main-theme=game] .btn_outlined:not([disabled]):not(.btn_disabled):active,
[x-main-theme=game] .btn_outlined-color:not([disabled]):not(.btn_disabled):active {
    background-color: var(--bb-sand);
    transform: translateY(0);
}

/* --- Desabilitado e processando ------------------------------------------- */

.btn[disabled],
.btn_disabled {
    background-color: var(--bb-coral-disabled) !important;
    color: var(--bb-white) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

.btn_outlined[disabled],
.btn_outlined.btn_disabled,
.btn_flat[disabled],
.btn_flat.btn_disabled {
    background-color: var(--bb-white) !important;
    border-color: var(--bb-sand-line) !important;
    color: var(--bb-disabled-fg) !important;
}

/* Enquanto processa: o rotulo diz o que esta acontecendo e o clique nao repete. */
.btn[aria-busy="true"] {
    cursor: progress;
    opacity: .85;
    pointer-events: none;
}

.btn--icon {
    margin-right: .5em;
    margin-left: -.15em;
}

/* --- Pecas de apoio ------------------------------------------------------- */

/* Indicador circular reutilizavel dentro de botoes e toasts. */
.bb-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bbSpin .8s linear infinite;
}

.bb-spinner_ink {
    border-color: var(--bb-sand-line);
    border-top-color: var(--bb-ink);
}

/* Botao so-icone: circulo de 44 px, sempre com rotulo acessivel. */
.bb-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-cream);
    color: var(--bb-ink);
    cursor: pointer;
    transition: background-color var(--bb-normal) var(--bb-ease);
}

.bb-btn-icon:hover {
    background: var(--bb-sand);
}


/* == 08 Campos de formulario =============================================== */
/* 52 px, raio 14, borda areia de 2 px. O rotulo fica sempre visivel: o
   xmutarn so o levantava no foco, a identidade exige rotulo permanente. */

[x-main-theme=game] .input {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--bb-secondary);
    border-color: var(--bb-sand-line);
}

[x-main-theme=game] .input--field {
    min-height: 3.25rem;
    background-color: var(--bb-white);
    color: var(--bb-ink);
    transition: border-color var(--bb-micro) var(--bb-ease);
}

[x-main-theme=game] .input--field:not(.input--field_outlined),
[x-main-theme=game] .input--field_outlined {
    padding: 1.55em .875em .55em .875em;
    border: 2px solid var(--bb-sand-line);
    border-radius: var(--bb-radius-field);
}

[x-main-theme=game] .input--field:not(.input--field_outlined) ~ .input--label,
[x-main-theme=game] .input--field_outlined ~ .input--label {
    left: .95em;
}

.input--field:focus {
    color: var(--bb-ink);
    border-color: var(--bb-ink);
    outline: 0;
}

.input--field:focus-visible {
    outline: 3px solid var(--bb-focus);
    outline-offset: 3px;
}

.input--field::-moz-placeholder { color: #9A8A7A; }
.input--field::placeholder { color: #9A8A7A; }

/* Rotulo sempre no alto do campo: nunca so placeholder.

   A duracao e a curva entram como propriedades separadas, sem o atalho "transition": o xmutarn
   declara "all .3s linear" aqui, e trocar o atalho inteiro levaria junto a animacao do proprio
   rotulo subindo. Assim so o ritmo muda, e o foco passa a terminar de uma vez — antes a borda
   parava em 150 ms na curva da identidade e a cor do rotulo seguia ate 300 ms em linear. */
[x-main-theme=game] .input--label {
    top: 1.15em;
    color: var(--bb-muted);
    font-weight: 700;
    transform-origin: left center;
    transform: translateY(-.78em) scale(.8);
    transition-duration: var(--bb-micro);
    transition-timing-function: var(--bb-ease);
}

/* No foco o rotulo nao se move: so a cor muda.

   O xmutarn anima o rotulo de dentro do campo para cima ao focar, e compensa o encolhimento com
   translate(-15%, ...) porque a origem da transformacao dele e o centro — o scale puxa a borda
   esquerda para dentro e o -15% devolve. A identidade ancora a origem em "left center" e ja deixa
   o rotulo no alto o tempo todo, entao aquele -15% deixou de ser compensacao e virou deslocamento
   puro: ao focar, o rotulo saltava 6,8 px para fora do campo.

   Os dois seletores repetem os do xmutarn para empatar em especificidade — esta folha vem depois,
   entao vence por ordem, sem !important. */
[x-main-theme=game] .input--label_active,
[x-main-theme=game] .input--field:focus ~ .input--label {
    transform: translateY(-.78em) scale(.8);
}

.input--field:focus ~ .input--label {
    color: var(--bb-ink);
}

.input--description {
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--bb-muted);
}

/* Erro em duas partes, ao lado do campo, sem apagar o que foi digitado. */
.input_color-alert {
    color: var(--bb-coral-text) !important;
    border-color: var(--bb-coral) !important;
}

.input_color-alert .input--field,
.input--field[aria-invalid="true"] {
    border-color: var(--bb-coral) !important;
}

.input_color-alert .input--description {
    color: var(--bb-coral-text);
}

.input_color-success {
    color: var(--bb-mint-fg) !important;
    border-color: var(--bb-mint-dot) !important;
}

.input_color-warning {
    color: var(--bb-sunlight-fg) !important;
    border-color: var(--bb-sun) !important;
}

/* Desabilitado explica o motivo: campo apagado, descricao em tom normal. */
.input--field[disabled],
.input--field[readonly] {
    background-color: #F7F1E6 !important;
    border-color: var(--bb-sand) !important;
    color: var(--bb-disabled-fg) !important;
    cursor: not-allowed;
}

select.input--field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5em;
    background-image: linear-gradient(45deg, transparent 50%, var(--bb-muted) 50%),
                      linear-gradient(135deg, var(--bb-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 1.45rem, calc(100% - .8rem) 1.45rem;
    background-size: .4rem .4rem, .4rem .4rem;
    background-repeat: no-repeat;
}

textarea.input--field {
    line-height: 1.5;
}

/* == 09 Cards ============================================================== */
/* Raio 22 e sombra quente. Card clicavel inteiro sobe 3 px em 200 ms; card
   informativo nao se move. */

/* O raio precisa do prefixo de tema: o app.css declara [x-main-theme="game"] .card com raio
   de 15 px (0,2,0) e vencia o .card simples daqui, entao nenhum card do site chegava aos 22 px
   que a identidade define. */
.card,
[x-main-theme=game] .card {
    border-radius: var(--bb-radius-card);
}

.card:not(.card_hide-structure),
[x-main-theme=game] .card {
    border: none;
    background-color: var(--theme-card, var(--bb-white));
    box-shadow: var(--bb-shadow-rest);
}

.card_hide-structure,
[x-main-theme=game] .card_hide-structure {
    background-color: transparent;
    box-shadow: none;
}

a > .card:not(.card_hide-structure),
a .card:not(.card_hide-structure),
.card_clickable {
    transition: transform var(--bb-normal) var(--bb-ease),
                box-shadow var(--bb-normal) var(--bb-ease);
}

a:hover > .card:not(.card_hide-structure),
a:hover .card:not(.card_hide-structure),
.card_clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--bb-shadow-raised);
}

.card--header--title {
    color: var(--bb-ink);
}

.card--header--summary {
    color: var(--bb-secondary);
}

.card--header--small {
    color: var(--bb-muted);
    opacity: 1;
}

/* Midia: o preto do xmutarn vira areia, para o vazio ficar quente. */
.card--media {
    background-color: var(--bb-sand);
    border-radius: var(--bb-radius-field);
}

.card--media:first-child {
    border-top-right-radius: var(--bb-radius-card);
    border-top-left-radius: var(--bb-radius-card);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.card--media:last-child {
    border-bottom-right-radius: var(--bb-radius-card);
    border-bottom-left-radius: var(--bb-radius-card);
}

.card--media:first-child:last-child {
    border-radius: var(--bb-radius-card);
}

.card--action {
    padding: .75rem 1rem 1rem;
}

/* Card de recompensa: creme sobre branco, item em disco. */
.bb-reward {
    padding: 1.375rem 1.25rem;
    border-radius: var(--bb-radius-card);
    background: var(--bb-cream);
    text-align: center;
}

.bb-reward--disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.75rem;
    height: 4.75rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--bb-white);
    box-shadow: 0 8px 20px rgba(120, 60, 0, .10);
}

/* == 10 Tags, status e adesivos ============================================ */
/* Cor sempre pareada (fundo e texto da mesma familia). Icone so quando
   substitui uma palavra. */

/* A linha de etiqueta + data no topo dos cards de publicacao, e o esqueleto dela. O respiro estava
   em style= no markup, onde a reserva do launcher (secao 20) nao alcanca. */
.bb-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: .5rem;
}

.bb-tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5625rem;
    border-radius: var(--bb-radius-pill);
    font-family: var(--bb-font-text);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.bb-tag_news { background: var(--bb-coral-light); color: var(--bb-coral-text); }
.bb-tag_event { background: var(--bb-mint-bg); color: var(--bb-mint-fg); }
.bb-tag_maintenance { background: var(--bb-sand); color: var(--bb-secondary); }
.bb-tag_update { background: var(--bb-sky-bg); color: var(--bb-sky-fg); }
.bb-tag_promo { background: var(--bb-sunlight-bg); color: var(--bb-sunlight-fg); }
.bb-tag_tournament { background: var(--bb-lilac-bg); color: var(--bb-lilac-fg); }
.bb-tag_android { background: var(--bb-peach-bg); color: var(--bb-peach-fg); }
.bb-tag_ios { background: var(--bb-lilac-bg); color: var(--bb-lilac-fg); }
.bb-tag_windows { background: var(--bb-sky-bg); color: var(--bb-sky-fg); }

/* Rotulo de secao: quadrado, caixa alta, entressilaba aberta. */
.bb-label {
    display: inline-block;
    padding: .25rem .625rem;
    border-radius: .5rem;
    background: var(--bb-coral-light);
    color: var(--bb-coral-text);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Status de servidor: so o verde pulsa, e nunca em mais de tres pontos. */
.bb-status {
    display: inline-flex;
    align-items: center;
    gap: .5625rem;
    font-size: .875rem;
}

.bb-status--dot {
    flex: none;
    width: .5625rem;
    height: .5625rem;
    border-radius: 50%;
    background: var(--bb-muted);
}

.bb-status_online .bb-status--dot {
    background: var(--bb-mint-dot);
    animation: bbPulse 2s infinite;
}

.bb-status_soon .bb-status--dot { background: var(--bb-sun); }
.bb-status_maintenance .bb-status--dot { background: var(--bb-sky-fg); }
.bb-status_offline .bb-status--dot { background: var(--bb-coral); }

.bb-status--note {
    color: var(--bb-muted);
}

/* Adesivo: um por bloco, so lancamento e promocao. Nunca em navegacao nem
   em formulario. */
.bb-sticker {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .875rem;
    border-radius: var(--bb-radius-tag);
    background: var(--bb-sun);
    color: var(--bb-ink);
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: .9375rem;
    transform: rotate(-3deg);
    box-shadow: var(--bb-shadow-sticker);
}

.bb-sticker_coral {
    background: var(--bb-coral);
    color: var(--bb-white);
    transform: rotate(3deg);
    box-shadow: 0 6px 0 rgba(43, 29, 18, .14);
}

/* Contador: caixa fixa, numeros tabulares, aria-live desligado. */
.bb-countdown {
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.bb-countdown--box {
    width: 4.625rem;
    padding: .625rem 0 .5rem;
    border-radius: var(--bb-radius-field);
    background: var(--bb-white);
    border-bottom: 3px solid var(--bb-coral);
    text-align: center;
}

.bb-countdown--box:last-child {
    border-bottom-color: var(--bb-sun);
}

.bb-countdown--value {
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--bb-coral);
    font-variant-numeric: tabular-nums;
}

.bb-countdown--box:last-child .bb-countdown--value {
    color: var(--bb-ink);
}

.bb-countdown--unit {
    margin-top: .25rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-muted);
}

/* Superficies pastel reutilizaveis (plataformas, avisos, destaques). */
.bb-surface_sky { background-color: var(--bb-sky-bg); color: var(--bb-sky-fg); }
.bb-surface_mint { background-color: var(--bb-mint-bg); color: var(--bb-mint-fg); }
.bb-surface_sun { background-color: var(--bb-sunlight-bg); color: var(--bb-sunlight-fg); }
.bb-surface_coral { background-color: var(--bb-coral-light); color: var(--bb-coral-text); }
.bb-surface_peach { background-color: var(--bb-peach-bg); color: var(--bb-peach-fg); }
.bb-surface_lilac { background-color: var(--bb-lilac-bg); color: var(--bb-lilac-fg); }
.bb-surface_cream { background-color: var(--bb-cream); color: var(--bb-ink); }

/* == 11 Navegacao e rodape ================================================ */
/* Barra principal: branca, texto tinta, linha de base areia. O item atual e
   coral, sublinhado em 3 px pelo desktop.css. */
[x-main-theme=game] .toolbar_dark-color,
.toolbar:not(.toolbar_dark-color) {
    background-color: var(--bb-white);
}

.toolbar {
    color: var(--bb-ink);
    font-family: var(--bb-font-text);
    font-weight: 600;
    box-shadow: 0 1px 0 var(--bb-sand);
    transition: transform var(--bb-surface) var(--bb-ease);
}

.toolbar--nav--item {
    border-radius: var(--bb-radius-pill);
    color: var(--bb-ink);
    transition: color var(--bb-micro) var(--bb-ease),
                background-color var(--bb-normal) var(--bb-ease);
}

.toolbar--nav--item:hover:not(.toolbar--nav_underline .toolbar--nav--item:hover) {
    background-color: rgba(43, 29, 18, .06);
}

/* O avatar nao estica com a linha. Para a equipe, sem o nome ao lado, os botoes de distribuicao e idioma
   sao mais altos que a imagem: o link virava 45x55 e o hover saia uma capsula em volta dela, em vez de um
   circulo. */
.toolbar--nav--item.avatar {
    align-self: center;
}

/* Sem o nome, o link tem o tamanho da imagem e o fundo do hover fica escondido atras dela: o hover vira um
   anel circular em volta, na mesma cor dos outros itens da barra. */
.toolbar--nav--item.avatar > .avatar--image:first-child {
    transition: box-shadow var(--bb-normal) var(--bb-ease);
}

.toolbar--nav--item.avatar:hover > .avatar--image:first-child {
    box-shadow: 0 0 0 .3125rem rgba(43, 29, 18, .06);
}

.toolbar--nav--item.avatar:active > .avatar--image:first-child {
    box-shadow: 0 0 0 .3125rem rgba(43, 29, 18, .12);
}

.toolbar--nav--item:active:not(.toolbar--nav_underline .toolbar--nav--item:active) {
    background-color: rgba(43, 29, 18, .12);
}

.toolbar--nav--item:focus:not(.toolbar--nav_underline .toolbar--nav--item:focus) {
    background-color: rgba(43, 29, 18, .08);
}

.toolbar--nav--item_active:not(.toolbar--nav_underline .toolbar--nav--item_active) {
    background-color: var(--bb-cream);
}

.toolbar--nav_underline .toolbar--nav--item:hover,
.toolbar--nav_underline .toolbar--nav--item:focus {
    opacity: 1;
    color: var(--bb-coral-text);
}

.toolbar--nav_underline .toolbar--nav--item_active {
    color: var(--bb-coral);
}

.toolbar--nav--item_bordered {
    border-color: var(--bb-sand-line);
}

.toolbar--nav--item_dark {
    background-color: var(--bb-cream);
}

/* Barra inferior de celular: clara, com linha de topo em vez de bloco escuro. */
/* O xmutarn poe overflow-x: auto na barra de navegacao. Como overflow-x nao-visible
   forca overflow-y a computar auto, o nav recorta nos dois eixos e a sombra coral do
   botao final aparecia cortada em aresta reta. A barra de desktop so existe a partir
   de lg, onde ha espaco de sobra, entao o recorte nao serve para nada aqui. */
.toolbar--nav {
    overflow: visible;
}

/* CTA da barra: pilula coral chapada, como no mockup de navegacao da identidade.
   A sombra de heroi nao cabe numa barra de 76 px e era ela que aparecia cortada. */
.bb-toolbar--cta {
    height: 2.625rem;
    min-height: 2.625rem;
    box-shadow: none;
}

[x-main-theme=game] .bb-toolbar--cta {
    box-shadow: none;
}

[x-main-theme=game] .bb-toolbar--cta:hover {
    box-shadow: none;
}

/* Invólucro da pagina: coluna de altura minima igual a da janela. Sem isto o rodape subia junto
   com o conteudo e paginas curtas (comunidade, entrar, baixar) terminavam com um vao creme de
   varias centenas de pixels embaixo dele. O conteudo cresce; o rodape fica no fim. */
.bb-page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.bb-page-shell > main,
.bb-page-shell > .container {
    flex: 1 0 auto;
}

.bb-page-shell > .bb-footer {
    margin-top: auto;
}

/* Chip de filtro. O ativo era tinta sobre coral (3,28:1) e o alvo tinha 26 px de altura. */
.bb-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-right: .5rem;
    padding: 0 .875rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-sand);
    color: var(--bb-ink);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--bb-micro) var(--bb-ease),
                color var(--bb-micro) var(--bb-ease);
}

.bb-badge:hover {
    background-color: var(--bb-sand-line);
}

.bb-badge_active {
    background-color: var(--bb-coral);
    color: var(--bb-white);
}

.bb-badge_active:hover {
    background-color: var(--bb-coral-hover);
}

/* Respiro entre as secoes da home. A identidade define 56 px entre secoes; sem isto o bloco de
   suporte encostava nos cards de publicacao. */
.bb-home-support {
    padding-top: 3.5rem;
}

/* Grade de cards de publicacao — home, lista e listagem por categoria, inclusive o esqueleto de
   carregamento. O .flex-row do xmutarn so monta calha horizontal (margem negativa no pai,
   padding nas colunas), entao sem row-gap as linhas encostam uma na outra. A regra antiga mirava
   .bb-home-publications, classe que sumiu no redesenho: virou seletor morto e o respiro se perdeu
   junto. O valor iguala a calha horizontal de 30 px, para o respiro ser o mesmo nos dois eixos. */
.bb-card-grid {
    row-gap: 1.875rem;
}

/* Cards da mesma linha com a mesma altura: sem isto o card de titulo mais longo fica mais alto e
   a linha termina desalinhada. */
.bb-card-grid > [class*="flex-col"] {
    display: flex;
}

.bb-card-grid > [class*="flex-col"] > .card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Tela de erro: o estado 3 dos quatro estados, agora com uma pagina de verdade por tras. */
.bb-error-state {
    padding: 2.5rem 1.5rem 3rem;
}

.bb-error-state--art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.5rem;
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-coral-light);
    color: var(--bb-coral-text);
    font-size: 2.25rem;
}

.bb-error-state--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2rem;
}

/* Cabecalho do celular: a marca e o acesso a conta no topo. Abaixo de lg o site
   nao tinha cabecalho nenhum e a pagina abria sem nada que a identificasse. */
.bb-mobile-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 3.75rem;
    padding: 0 12px 0 16px;
    background-color: var(--bb-white);
    border-bottom: 1px solid var(--bb-sand);
}

.bb-mobile-header--brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.bb-mobile-header--brand img {
    height: 2.25rem;
    width: auto;
}

/* 44 px, nao 40: era o unico alvo de toque da home abaixo do minimo, e o cabecalho tem 60 px de
   altura — os 44 cabem com 8 px de respiro em cima e embaixo. */
.bb-mobile-header--action {
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    font-size: .8125rem;
}

.bb-mobile-header--account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 2.75rem;
    padding: 0 8px;
    border-radius: var(--bb-radius-pill);
    color: var(--bb-ink);
    text-decoration: none;
}

.bb-mobile-header--avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.bb-mobile-header--name {
    max-width: 8rem;
    font-size: .8125rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Barra fixa de navegacao do celular.

   Os itens sao colunas de largura igual. Com padding fixo (o que havia antes) cinco itens somavam
   390 px e o quinto saia dos 360 px da tela sem rolagem possivel, porque o .container em volta
   recortava. Em colunas iguais qualquer quantidade cabe, e o alvo de toque nunca desce de 44 px. */
.bb-mobile-bar {
    background-color: var(--bb-white) !important;
    border-top: 1px solid var(--bb-sand);
    box-shadow: 0 -6px 24px rgba(120, 60, 0, .08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bb-mobile-bar--items {
    min-height: var(--bb-mobile-bar-h);
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 4px 6px 6px;
}

.bb-mobile-bar--item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 2.75rem;
    padding: 6px 2px 4px;
    border-radius: var(--bb-radius-field);
    color: var(--bb-ink);
    text-decoration: none;
    transition: color var(--bb-micro) var(--bb-ease),
                background-color var(--bb-micro) var(--bb-ease);
}

.bb-mobile-bar--item--icon {
    font-size: 1.125rem;
    line-height: 1;
}

.bb-mobile-bar--item--avatar {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Rotulo curto: o piso de 13 px vale para texto de leitura, nao para rotulo de navegacao — a
   identidade define rotulo em 11-12 px. Sem caixa alta: o turco quebra o i nessa conversao. */
.bb-mobile-bar--item--label {
    max-width: 100%;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-mobile-bar--item:hover {
    background-color: var(--bb-cream);
    color: var(--bb-ink);
}

.bb-mobile-bar--item:active {
    background-color: var(--bb-sand);
}

/* Item atual em coral, com a marca de 3 px que a identidade pede na navegacao. */
.bb-mobile-bar--item_active {
    position: relative;
    color: var(--bb-coral-text);
}

.bb-mobile-bar--item_active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background-color: var(--bb-coral);
}

.bb-mobile-bar--item_staff {
    color: var(--bb-sunlight-fg);
}

.bb-mobile-bar--ribbons {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 6px;
}

/* O espacador embaixo do conteudo reserva exatamente a altura da barra fixa. Antes era um valor
   solto de 4.1875rem que nao batia com a barra e deixava conteudo por baixo dela. */
.bb-mobile-bar-spacer {
    height: calc(var(--bb-mobile-bar-h) + env(safe-area-inset-bottom, 0px));
}

.bb-mobile-bar--ribbon {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border-radius: var(--bb-radius-tag) var(--bb-radius-tag) 0 0;
    color: var(--bb-white);
    font-size: .6875rem;
    font-weight: 700;
}

/* Gaveta de navegacao. */
.navigation-drawer {
    background-color: var(--bb-white);
    border-top-right-radius: var(--bb-radius-surface);
    border-bottom-right-radius: var(--bb-radius-surface);
}

.list--item:hover {
    background-color: var(--bb-cream);
}

.list--item:active,
.list--item_active {
    background-color: var(--bb-sand);
}

/* Rodape: tinta, com o lembrete do endereco oficial. */
.bb-footer {
    background: var(--bb-ink);
    color: var(--bb-ink-soft);
}

.bb-footer a {
    color: var(--bb-ink-soft);
    text-decoration: none;
}

.bb-footer a:hover {
    color: var(--bb-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* As duas fileiras do rodape — redes e links legais. O respiro estava em style= no markup, onde a
   reserva do launcher (secao 20) nao alcanca: virou classe para entrar no mesmo mecanismo. */
.bb-footer--nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.375rem;
}

/* Os links legais do rodape tinham 20 px de altura de alvo — menos da metade dos 44 px que a
   identidade exige no toque. A caixa cresce sem mudar a aparencia do texto. */
.bb-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: .25rem;
}

.bb-footer--logo {
    height: 1.875rem;
    width: auto;
}

/* O slogan fecha o rodape: mesma familia de titulo do heroi, em branco, uma linha acima do
   copyright, que fica na tinta suave. */
.bb-footer--slogan {
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bb-white);
}

/* O e-mail de contato mora dentro do paragrafo do copyright, fora da nav: sem a regra da nav ele
   voltaria aos 20 px de alvo, entao a caixa cresce aqui tambem. */
.bb-footer--slogan + p a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* Abas da recarga (a .navbar do xmutarn): o sublinhado do item ativo e a borda de baixo do proprio
   item, e o xmutarn alinha os itens pela LINHA DE BASE do texto. Basta um rotulo cair em outra
   fonte para a linha de base dele mudar de altura dentro da caixa — e a caixa se desloca, levando
   o sublinhado junto. E o que acontece em turco: os caracteres proprios (ş, ğ, İ) vem do arquivo
   latin-ext da fonte e, enquanto ele nao chega — ou quando o navegador do launcher nem carrega a
   fonte —, aquele rotulo e desenhado com a fonte substituta. Alinhando os itens pela base da
   caixa, os sublinhados coincidem venha a fonte que vier. */
.navbar {
    align-items: flex-end;
}

/* Marca: nunca sobre imagem movimentada sem placa creme. */
.bb-logo-plate {
    display: inline-flex;
    align-items: center;
    padding: .625rem 1.125rem;
    border-radius: var(--bb-radius-field);
    background: var(--bb-cream);
}

/* Base de pagina: creme liso. O documento proibe gradiente de fundo, entao aqui
   nao entra degrade nenhum - a profundidade vem das sombras quentes dos cards. */
.bb-page {
    background-color: var(--bb-cream);
}

/* == 12 Os quatro estados de tela ========================================== */
/* Carregando, vazio, erro e conteudo. O esqueleto tem a forma exata do
   conteudo, entao nada pula quando ele chega. */

.bb-skeleton {
    background: linear-gradient(90deg, #F1EBE3 25%, #FAF6EF 50%, #F1EBE3 75%);
    background-size: 200% 100%;
    animation: bbShimmer 1.2s linear infinite;
    border-radius: .375rem;
}

.bb-skeleton_media {
    border-radius: var(--bb-radius-field);
}

.bb-skeleton_pill {
    border-radius: var(--bb-radius-pill);
}

.bb-skeleton_text {
    height: 1.375rem;
    margin-bottom: .5rem;
}

/* Estado vazio e estado de erro: explicam e oferecem a proxima acao. */
.bb-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.bb-state--art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 20rem;
    height: 10.625rem;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: var(--bb-radius-field);
    background: var(--bb-cream);
}

.bb-state--art img {
    max-height: 9.5rem;
    width: auto;
}

.bb-state_error .bb-state--art {
    align-items: center;
    background: var(--bb-coral-light);
    color: var(--bb-coral-text);
    font-size: 2.5rem;
}

.bb-state--title {
    margin: 0 0 .375rem;
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--bb-ink);
}

.bb-state--text {
    margin: 0 0 .875rem;
    max-width: 26rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--bb-secondary);
}

/* Avisos de conexao: o que aconteceu e o que fazer, sem culpar o jogador. */
.bb-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1.125rem;
    border-radius: var(--bb-radius-field);
    font-size: .875rem;
    line-height: 1.45;
}

.bb-notice b {
    font-weight: 700;
}

.bb-notice_info { background: var(--bb-sky-bg); color: var(--bb-sky-fg); }
.bb-notice_success { background: var(--bb-mint-bg); color: var(--bb-mint-fg); }
.bb-notice_warning { background: var(--bb-sunlight-bg); color: var(--bb-sunlight-fg); }
.bb-notice_error { background: var(--bb-coral-light); color: var(--bb-coral-text); }
.bb-notice_offline { background: var(--bb-sand); color: var(--bb-ink); }

/* == 13 Feedback, dialogos e progresso ===================================== */

/* Diálogo: raio 26, sombra elevada, botao destrutivo nunca em primeiro lugar. */
.dialog .dialog--card .card,
.dialog .new-dialog--card .card {
    border-radius: var(--bb-radius-surface) !important;
    box-shadow: var(--bb-shadow-raised);
}

/* Duas lajes cinza-azuladas soltas atras do cartao, vindas do tema escuro (app.css). Eu as
   tinha apenas repintado de areia, e continuavam aparecendo como dois retangulos sem funcao
   espiando por tras do card. A identidade constroi profundidade com sombra quente, nao com
   blocos de apoio — entao elas saem. */
.dialog--card::before,
.dialog--card::after,
.new-dialog--card::before,
.new-dialog--card::after {
    display: none;
}

.overlay {
    background-color: rgba(43, 29, 18, .55);
    transition: opacity var(--bb-surface) var(--bb-ease);
}

/* O cartao do dialogo acompanha o veu: mesmos 300 ms, mesma curva. O xmutarn traz 0,75 s.

   E o dialogo fechado some de verdade. O xmutarn so zera a opacidade e desliga o ponteiro, entao
   o conteudo continuava na arvore de acessibilidade e na ordem do Tab: paginas apareciam com
   quatro ou cinco <h1> invisiveis, e o teclado parava em botoes que ninguem ve. */
.dialog {
    visibility: hidden;
    transition: opacity var(--bb-surface) var(--bb-ease),
                visibility 0s linear var(--bb-surface);
}

.dialog_open {
    visibility: visible;
    transition: opacity var(--bb-surface) var(--bb-ease),
                visibility 0s linear 0s;
}

/* Lista e item de navegacao: o xmutarn usa 0,4 s ease em seletores de 0,2,0 e 0,3,0. */
.list--item,
.list_padded .list--item,
.toolbar--nav--item:not(.toolbar--nav_underline .toolbar--nav--item) {
    transition: background-color var(--bb-normal) var(--bb-ease),
                color var(--bb-micro) var(--bb-ease);
}

.toolbar--nav_underline .toolbar--nav--item {
    transition: color var(--bb-micro) var(--bb-ease),
                opacity var(--bb-micro) var(--bb-ease);
}

/* A gaveta de navegacao tambem vem com 0,3 s sem curva declarada. */
.navigation-drawer {
    transition: transform var(--bb-surface) var(--bb-ease);
}

/* Toast: tinta, embaixo, acao em Sol. */
.toast {
    background-color: var(--bb-ink);
    color: var(--bb-white);
    border-radius: var(--bb-radius-field);
    font-size: .875rem;
    transition: transform var(--bb-surface) var(--bb-ease);
}

.toast_color-featured,
.toast_color-accent { background-color: var(--bb-coral); }
.toast_color-success { background-color: var(--bb-mint-fg); }
.toast_color-alert { background-color: var(--bb-coral-text); }
.toast_color-warning { background-color: var(--bb-sunlight-fg); }

.toast--content {
    padding: .875rem 1.125rem;
}

.toast--action {
    padding: .375rem .5rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--bb-sun);
    font-family: var(--bb-font-text);
    font-weight: 800;
    font-size: .875rem;
    cursor: pointer;
}

.toast--action:hover {
    background: rgba(255, 255, 255, .08);
}

/* Progresso: 6 px, coral sobre coral claro. Determinado quando da para
   estimar; listrado quando nao da. Nunca "carregando" sem contexto. */
.bb-progress {
    height: .375rem;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-coral-light);
    overflow: hidden;
}

.bb-progress--bar {
    height: 100%;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-coral);
    transition: width var(--bb-surface) var(--bb-ease);
}

.bb-progress_indeterminate .bb-progress--bar {
    width: 100%;
    background: repeating-linear-gradient(90deg, var(--bb-coral) 0 14px, #F28B97 14px 28px);
    animation: bbStripe .8s linear infinite;
}

.meter {
    height: .375rem;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-coral-light);
}

.meter span {
    border-radius: var(--bb-radius-pill);
    background: var(--bb-coral);
}

/* Escada de tamanho do botao. O xmutarn amarra o corpo de cada .btn_size-* a familia
   tipografica do contexto (typo-use-raleway, typo-use-bebas-neue...), e por isso o CTA da barra
   caia para 12 px. Aqui o tamanho depende so do modificador. */
.btn_size-xs,
.typo-use-raleway .btn_size-xs, .btn_size-xs.typo-use-raleway,
.typo-use-bebas-neue .btn_size-xs, .btn_size-xs.typo-use-bebas-neue,
.typo-use-roboto .btn_size-xs, .btn_size-xs.typo-use-roboto { font-size: .8125rem; }

.btn_size-sm,
.typo-use-raleway .btn_size-sm, .btn_size-sm.typo-use-raleway,
.typo-use-bebas-neue .btn_size-sm, .btn_size-sm.typo-use-bebas-neue,
.typo-use-roboto .btn_size-sm, .btn_size-sm.typo-use-roboto { font-size: .875rem; }

.btn_size-md,
.typo-use-raleway .btn_size-md, .btn_size-md.typo-use-raleway,
.typo-use-bebas-neue .btn_size-md, .btn_size-md.typo-use-bebas-neue,
.typo-use-roboto .btn_size-md, .btn_size-md.typo-use-roboto { font-size: 1rem; }

.btn_size-lg,
.typo-use-raleway .btn_size-lg, .btn_size-lg.typo-use-raleway,
.typo-use-bebas-neue .btn_size-lg, .btn_size-lg.typo-use-bebas-neue,
.typo-use-roboto .btn_size-lg, .btn_size-lg.typo-use-roboto { font-size: 1.0625rem; }

.btn_size-xl,
.typo-use-raleway .btn_size-xl, .btn_size-xl.typo-use-raleway,
.typo-use-bebas-neue .btn_size-xl, .btn_size-xl.typo-use-bebas-neue,
.typo-use-roboto .btn_size-xl, .btn_size-xl.typo-use-roboto { font-size: 1.1875rem; }

/* Botao desabilitado: o texto era branco sobre o coral apagado, que e claro — nao se lia.
   O xmutarn aplica a cor com !important, entao a correcao tambem precisa dela. */
.btn[disabled],
.btn_disabled {
    color: var(--bb-white) !important;
}

.btn_outlined[disabled],
.btn_outlined.btn_disabled,
.btn_flat[disabled],
.btn_flat.btn_disabled {
    color: var(--bb-disabled-fg) !important;
}

/* Imagem com width/height declarados (a identidade pede, para o esqueleto reservar o espaco
   exato) precisa disto para nao deformar quando o CSS muda so uma das duas medidas. */
img[width][height] {
    height: auto;
}

/* Titulo de card: duas linhas e reticencias. Antes o titulo era cortado no meio da palavra,
   sem reticencia nenhuma ("REDEMOINHO ESPACIAL FACIL S:"). */
.card--header--title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Caixa de selecao: era o controle cru do sistema, de 13x13 px, encostado no texto. */
.input--checkbox,
input[type="checkbox"] {
    width: 1.375rem;
    height: 1.375rem;
    margin-right: .5rem;
    accent-color: var(--bb-coral);
    cursor: pointer;
}

/* == 14 360 px ============================================================= */
/* Tudo funciona em 360 px: uma coluna, alvos de 44 px com 8 px entre eles e
   a acao principal fixa embaixo com 56 px de altura. */

@media (max-width: 575.98px) {
    .typo-h1,
    .typo-use-raleway .typo-h1,
    .typo-use-bebas-neue .typo-h1 {
        font-size: 2.375rem;
        line-height: 1.05;
    }

    .typo-h2,
    .typo-use-raleway .typo-h2,
    .typo-use-bebas-neue .typo-h2 {
        font-size: 1.9375rem;
        line-height: 1.1;
    }

    .typo-h3,
    .typo-use-raleway .typo-h3,
    .typo-use-bebas-neue .typo-h3 {
        font-size: 1.75rem;
        line-height: 1.15;
    }

    .typo-h4,
    .typo-use-raleway .typo-h4,
    .typo-use-bebas-neue .typo-h4 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .typo-subtitle-1 { font-size: 1rem; }
    .typo-body-1 { font-size: 1rem; }

    .bb-countdown--box {
        width: 4.125rem;
    }


    /* Nada abaixo de 13 px. */
    .typo-caption-2 { font-size: .8125rem; }

    /* Grades largas viram rolagem horizontal com peek do proximo card,
       nunca corte cego. */
    .bb-scroller {
        display: flex;
        gap: .75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
    }

    .bb-scroller > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* Acao principal fixa embaixo. */
.bb-sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 30;
    padding: .75rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(255, 246, 229, 0), var(--bb-cream) 40%);
}

.bb-sticky-cta .btn {
    width: 100%;
    height: 3.5rem;
    font-size: 1.125rem;
}

@media (min-width: 992px) {
    .bb-sticky-cta {
        position: static;
        padding: 0;
        background: none;
    }

    .bb-sticky-cta .btn {
        width: auto;
    }
}

/* == 15 Ancora do pular para o conteudo ==================================== */

#bb-main-content {
    display: block;
    height: 0;
    overflow: hidden;
}

#bb-main-content:focus,
#bb-main-content:focus-visible {
    outline: none;
}

/* == 16 Sombras utilitarias ================================================ */
/* O xmutarn empilha sombras pretas; a identidade so usa marrom quente. */

.shadow-floating,
.menu {
    box-shadow: var(--bb-shadow-rest);
}

.shadow-highlight,
.navigation-drawer {
    box-shadow: var(--bb-shadow-raised);
}

.menu {
    border-radius: var(--bb-radius-field);
    background-color: var(--bb-white);
    overflow: hidden;
}

/* Indicador de carregamento da pagina: coral, no lugar do cinza herdado. O
   componente Loading mantem tambem a classe theme-fg-secondary (que traz
   !important) para o painel de controle, que nao carrega esta folha, seguir
   igual - por isso aqui tambem precisa de !important. */
.bb-loading {
    color: var(--bb-coral) !important;
}

/* == 17 Card de noticia ==================================================== */
/* Superficie branca de raio 22 com sombra quente. O card inteiro e clicavel:
   sobe 3 px em 200 ms, como qualquer card clicavel da identidade. */

.bb-card-surface {
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-white);
    box-shadow: var(--bb-shadow-rest);
    transition: transform var(--bb-normal) var(--bb-ease),
                box-shadow var(--bb-normal) var(--bb-ease);
}

.bb-article-card {
    display: block;
    color: inherit;
}

.bb-article-card:hover {
    color: inherit;
}

.bb-article-card:hover .bb-card-surface {
    transform: translateY(-3px);
    box-shadow: var(--bb-shadow-raised);
}

.bb-article-card:focus-visible {
    outline: 3px solid var(--bb-focus);
    outline-offset: 3px;
    border-radius: var(--bb-radius-card);
}

.bb-article-card .card--media {
    border-radius: var(--bb-radius-field);
}

.bb-article-card .card--header {
    padding-top: 1rem;
    padding-bottom: .5rem;
}

/* == 18 Home de lancamento ================================================= */
/* Blocos da home desenhada para a abertura do Servidor 3: heroi com contagem
   regressiva, faixa de recompensas, cabecalho de secao, ladrilhos de download
   e o painel de suporte com a comunidade.

   Tudo aqui e layout proprio da home, sem a grade do xmutarn: os blocos sao
   grades CSS de coluna minima zero (minmax(0, 1fr)), que e o que impede o
   conteudo largo - a faixa de 12 recompensas, o titulo comprido - de esticar a
   linha alem da tela. */

/* --- Heroi ---------------------------------------------------------------- */

/* A secao ocupa a largura da janela e o corte acontece na borda dela; o conteudo e os circulos
   ficam no .bb-hero--inner, que e o contêiner. Sem isso o circulo azul era fatiado a 1140 px. */
.bb-hero {
    position: relative;
    overflow: hidden;
    padding-top: 1.375rem;
}

.bb-hero--inner {
    position: relative;
}

/* Os dois circulos sao decoracao: ficam atras de tudo e nunca recebem clique. */
.bb-hero--deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.bb-hero--deco_sky {
    left: 50%;
    top: 14.375rem;
    width: 22.5rem;
    height: 22.5rem;
    margin-left: -11.25rem;
    background-color: var(--bb-sky-bg);
}

.bb-hero--deco_sun {
    display: none;
}

.bb-hero--grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.bb-hero--tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem;
}

/* O adesivo do servidor e o .bb-sticker da secao 10; aqui ele so encolhe para
   caber na linha de etiquetas do celular, junto do estado do pre-cadastro. */
.bb-hero--sticker {
    height: auto;
    min-height: 1.75rem;
    padding: 0 .75rem;
    font-size: .8125rem;
    letter-spacing: .04em;
}

/* Pilula de estado do pre-cadastro: e a tag de evento com o ponto que pulsa,
   uma linha abaixo do tamanho da tag para nao competir com o adesivo. */
.bb-hero--kicker {
    font-size: .71875rem;
}

.bb-hero--order {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--bb-muted);
    text-transform: uppercase;
}

.bb-hero--title {
    margin: .875rem 0 0;
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: clamp(2.375rem, 7vw, 4.125rem);
    line-height: 1.04;
    letter-spacing: -.005em;
    color: var(--bb-ink);
}

.bb-hero--title em {
    font-style: normal;
    color: var(--bb-coral);
}

.bb-hero--lead {
    margin: .75rem auto 0;
    max-width: 35rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--bb-secondary);
}

.bb-hero--lead b {
    color: var(--bb-ink);
    font-weight: 700;
}

/* A frase que explica a entrega das recompensas so entra no desktop. No celular
   ela empurrava a contagem regressiva - que e o motivo da pagina existir agora -
   para baixo da dobra. O mesmo texto continua no cartao de recompensas. */
.bb-hero--lead-extra {
    display: none;
}

@media (min-width: 992px) {
    .bb-hero--lead-extra {
        display: inline;
    }
}

.bb-hero--art {
    display: block;
    width: 15.625rem;
    height: auto;
    margin: .625rem auto 0;
    filter: drop-shadow(0 18px 30px rgba(120, 60, 0, .25));
    /* Mesma flutuacao do rei no pre-cadastro: um keyframe so serve as duas telas. */
    animation: bb-float 6s ease-in-out infinite;
}

.bb-hero--actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 1rem;
}

/* No celular as duas acoes ocupam a linha inteira: e o alvo mais facil de
   acertar com o polegar, e nenhuma das duas fica espremida na lateral. */
.bb-hero--actions > .btn {
    width: 100%;
}

@media (min-width: 992px) {
    /* O espaco de baixo e o que a faixa de recompensas invade com a margem negativa. Sem ele a
       faixa subia por cima dos dois botoes do heroi - o de pre-cadastro inclusive. */
    .bb-hero {
        padding-top: 2.75rem;
        padding-bottom: 3.5rem;
    }

    .bb-hero--deco_sky {
        left: auto;
        right: -3.75rem;
        top: 2.25rem;
        width: 38.75rem;
        height: 38.75rem;
        margin-left: 0;
    }

    /* O circulo amarelo fica na faixa da arte, nao na do texto: a 500 px da borda ele caia em cima
       da ultima palavra do titulo, que e justamente a palavra em coral. */
    .bb-hero--deco_sun {
        display: block;
        right: 26rem;
        top: 3rem;
        width: 6rem;
        height: 6rem;
        background-color: var(--bb-sun);
    }

    /* A coluna da arte e proporcional ate 1200 px e so entao trava em 540 px. Fixa desde 992 ela
       comia 540 dos 960 do contentor, e o que sobrava para o texto nao cabia: a contagem quebrava
       em duas fileiras e os dois botoes do heroi saiam um por linha, com o rotulo cortado. */
    .bb-hero--grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
        align-items: end;
        text-align: left;
    }

    .bb-hero--tags {
        justify-content: flex-start;
        gap: .875rem;
        margin-bottom: 1.375rem;
    }

    .bb-hero--sticker {
        min-height: 2rem;
        padding: 0 .875rem;
        font-size: .9375rem;
    }

    .bb-hero--kicker {
        font-size: .75rem;
    }

    .bb-hero--title {
        margin-top: 0;
    }

    .bb-hero--lead {
        margin: 1.25rem 0 0;
        font-size: 1.125rem;
        line-height: 1.55;
    }

    .bb-hero--art {
        width: 100%;
        max-width: 33.75rem;
        margin: 0;
        filter: drop-shadow(0 24px 40px rgba(120, 60, 0, .25));
    }

    .bb-hero--actions {
        flex-direction: row;
        align-items: center;
        gap: .875rem;
        margin-top: 1.75rem;
    }

    .bb-hero--actions > .btn {
        width: auto;
    }
}

@media (min-width: 1200px) {
    .bb-hero--grid {
        grid-template-columns: minmax(0, 1fr) 33.75rem;
    }
}

/* --- Contagem regressiva -------------------------------------------------- */
/* Quatro caixas brancas com a base amarela. O numero usa tabular-nums para a
   largura nao dancar a cada segundo. */

.bb-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

.bb-countdown--box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 5.75rem;
    padding: .75rem 0 .625rem;
    border-radius: var(--bb-radius-field);
    border-bottom: 3px solid var(--bb-sun);
    background-color: var(--bb-white);
    box-shadow: var(--bb-shadow-rest);
    text-align: center;
}

.bb-countdown--value {
    display: block;
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1;
    color: var(--bb-coral);
    font-variant-numeric: tabular-nums;
}

/* Os segundos ficam em tinta: sao o numero que muda o tempo todo, e em coral
   acabavam competindo com o botao de acao, que e o coral que importa. */
.bb-countdown--value_ink {
    color: var(--bb-ink);
}

/* Rotulo em caixa alta: a escala poe rotulo em 11-12 px, e o piso de 13 px vale para texto de
   leitura. Em 10 px estes quatro eram o menor texto do site, logo abaixo dos numeros de 30 px. */
.bb-countdown--label {
    display: block;
    margin-top: .25rem;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--bb-muted);
    text-transform: uppercase;
}

/* No celular a nota ocupa a linha inteira: dividindo a linha com as quatro caixas, elas encolhiam
   abaixo dos 80 px e os rotulos "MINUTOS" e "SEGUNDOS" ficavam colados um no outro. */
.bb-countdown--note {
    flex: 1 0 100%;
    margin: .625rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--bb-muted);
}

.bb-countdown--note b {
    color: var(--bb-ink);
    font-weight: 700;
}

@media (min-width: 992px) {
    .bb-countdown {
        justify-content: flex-start;
        gap: .625rem;
        margin-top: 1.75rem;
    }

    .bb-countdown--box {
        flex: 0 0 auto;
        width: 5.75rem;
        height: 6rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        border-radius: var(--bb-radius-counter);
        border-bottom-width: 4px;
    }

    .bb-countdown--value {
        font-size: 2.5rem;
    }

    .bb-countdown--label {
        margin-top: 0;
        font-size: .75rem;
        letter-spacing: .12em;
    }

    .bb-countdown--note {
        flex: 0 1 auto;
        margin: 0 0 0 .625rem;
        font-size: .8125rem;
        text-align: left;
    }
}

/* --- Faixa de recompensas ------------------------------------------------- */
/* Cartao branco que sobe sobre o heroi. A grade de itens e de colunas iguais
   de minimo zero: quatro no celular, seis no desktop. */

.bb-rewards {
    position: relative;
    z-index: 2;
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-white);
    box-shadow: var(--bb-shadow-rest);
    padding: 1.125rem 1rem 1rem;
}

.bb-rewards--eyebrow {
    margin: 0;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--bb-coral-text);
    text-transform: uppercase;
}

.bb-rewards--title {
    margin: .375rem 0 0;
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--bb-ink);
}

.bb-rewards--text {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--bb-muted);
}

/* Abaixo de 992 px a grade de quatro vira rolagem com peek, como a identidade manda para grades de
   4 e 5 no celular. Em quatro colunas de 68 px o nome do item quebrava em tres linhas e ainda
   assim era cortado; em faixa rolavel cada slot tem 104 px, o proximo fica sempre meio visivel
   (nunca corte cego) e o nome cabe no piso de 13 px. */
.bb-rewards--grid {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
    padding-bottom: .25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.bb-rewards--slot {
    flex: 0 0 6.5rem;
    min-width: 0;
    text-align: center;
    scroll-snap-align: start;
}

.bb-rewards--icon {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: var(--bb-radius-field);
    background-color: var(--bb-cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-rewards--icon img {
    max-width: 2.75rem;
    max-height: 2.75rem;
    width: auto;
    height: auto;
}

/* A quantidade fica colada no canto do icone, como no inventario do jogo. */
.bb-rewards--count {
    position: absolute;
    right: -.25rem;
    bottom: -.25rem;
    min-width: 1.375rem;
    padding: 0 .3125rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-ink);
    color: var(--bb-white);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.375rem;
    font-variant-numeric: tabular-nums;
}

.bb-rewards--name {
    margin: .375rem 0 0;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bb-ink);
    /* Nome de item turco tem palavra longa ("Güçlendirme"); sem isto ela vaza do slot. */
    overflow-wrap: anywhere;
}

@media (min-width: 992px) {
    .bb-rewards {
        margin-top: -2.5rem;
        display: grid;
        grid-template-columns: 15.625rem minmax(0, 1fr);
        gap: 1.625rem;
        align-items: center;
        padding: 1.375rem 1.625rem 1.5rem;
        box-shadow: var(--bb-shadow-raised);
    }

    .bb-rewards--eyebrow {
        font-size: .71875rem;
    }

    .bb-rewards--title {
        margin-top: .5rem;
        font-size: 1.3125rem;
    }

    /* No desktop cabem as seis colunas sem apertar, entao a faixa volta a ser grade. */
    .bb-rewards--grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .875rem .625rem;
        margin-top: 0;
        padding-bottom: 0;
        overflow-x: visible;
    }

    .bb-rewards--slot {
        flex: 0 1 auto;
    }

    .bb-rewards--icon {
        width: 3.75rem;
        height: 3.75rem;
    }

    .bb-rewards--icon img {
        max-width: 3rem;
        max-height: 3rem;
    }

    .bb-rewards--name {
        margin-top: .5rem;
        line-height: 1.3;
    }
}

/* --- Cabecalho de secao --------------------------------------------------- */

.bb-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.bb-section_white {
    background-color: var(--bb-white);
    padding-bottom: 2.5rem;
}

.bb-section--head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .875rem;
}

.bb-eyebrow {
    margin: 0 0 .625rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--bb-coral-text);
    text-transform: uppercase;
}

.bb-eyebrow_sky {
    color: var(--bb-sky-fg);
}

.bb-section--title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    line-height: 1.08;
    color: var(--bb-ink);
}

/* O alvo de toque de 44 px vale tambem para o "ver todas": em 16 px de altura ele era o menor
   link clicavel da pagina. A caixa cresce sem mudar a aparencia do texto. */
.bb-section--link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bb-coral-text);
}

@media (min-width: 992px) {
    .bb-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .bb-section_white {
        padding-bottom: 3.5rem;
    }

    .bb-section--head {
        margin-bottom: 1.5rem;
    }

    .bb-section--link {
        font-size: .875rem;
    }
}

/* --- Ladrilhos de download ------------------------------------------------ */

.bb-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
}

/* Raio de card, igual no celular e no desktop: a escala nao tem 16 px, e o mesmo ladrilho mudando
   de canto ao trocar de tela era o unico bloco da home que fazia isso. */
.bb-tile {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem .875rem;
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-sand);
    color: var(--bb-ink);
}

.bb-tile_sky {
    background-color: var(--bb-sky-bg);
}

.bb-tile_peach {
    background-color: var(--bb-peach-bg);
}

.bb-tile_ink {
    background-color: var(--bb-ink);
    color: var(--bb-white);
}

.bb-tile--icon {
    flex: none;
    width: 1.75rem;
    font-size: 1.5rem;
    text-align: center;
}

.bb-tile_ink .bb-tile--icon {
    color: var(--bb-sun);
}

.bb-tile--body {
    flex: 1;
    min-width: 0;
}

/* Titulo e descricao sao <span> dentro de um link, entao precisam do display block: em linha eles
   se emendavam ("Windows Instalador para Windows 10 e 11" numa frase so). */
/* Fredoka ja na base: o titulo do ladrilho e titulo de card nas duas telas, e no celular ele
   caia para a letra do corpo do texto. */
.bb-tile--title {
    display: block;
    margin: 0;
    font-family: var(--bb-font-display);
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.2;
}

.bb-tile--text {
    display: block;
    margin: .125rem 0 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bb-secondary);
}

.bb-tile_ink .bb-tile--text {
    color: var(--bb-ink-soft);
}

/* Card clicavel inteiro sobe 3 px em 200 ms, como os de noticia e os de rede. As propriedades
   entram uma a uma porque o atalho "transition" apagaria a transicao de cor herdada da regra "a". */
.bb-tile {
    transition-property: color, transform, box-shadow, background-color;
    transition-duration: var(--bb-normal);
    transition-timing-function: var(--bb-ease);
}

.bb-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--bb-shadow-raised);
}

.bb-tile:not(.bb-tile_ink):hover {
    color: var(--bb-ink);
}

.bb-tile_ink:hover {
    color: var(--bb-white);
}

/* Acao do ladrilho: tem cara de botao, mas e um span dentro do link do ladrilho inteiro - um
   <button> ali dentro seria marcacao invalida. */
.bb-tile--action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: 0 1.125rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-ink);
    color: var(--bb-white);
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: .8125rem;
    white-space: nowrap;
}

.bb-tile--action_coral {
    background-color: var(--bb-coral);
}

.bb-tile:hover .bb-tile--action {
    background-color: var(--bb-ink-hover);
}

.bb-tile:hover .bb-tile--action_coral {
    background-color: var(--bb-coral-hover);
}

@media (min-width: 992px) {
    .bb-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .875rem;
    }

    .bb-tile {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.625rem;
        border-radius: var(--bb-radius-card);
    }

    .bb-tile--icon {
        width: auto;
        font-size: 2rem;
        text-align: left;
    }

    .bb-tile--body {
        flex: 1 0 auto;
    }

    .bb-tile--title {
        font-size: 1.25rem;
    }

    .bb-tile--text {
        margin-top: .25rem;
    }
}

/* --- Dialogo de pre-cadastro ---------------------------------------------- */
/* Superficie branca de raio 26, sem a arte de fundo que ficava atras do texto. Os tres pontos
   dizem em qual passo o jogador esta: dados, senha e confirmacao. */

.bb-dialog-card {
    position: relative;
    padding: 2rem 1.25rem 1.75rem;
    border-radius: var(--bb-radius-surface);
    background-color: var(--bb-white);
    box-shadow: 0 24px 60px rgba(43, 29, 18, .35);
}

.bb-dialog--close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-cream);
    color: var(--bb-ink);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--bb-micro) var(--bb-ease);
}

.bb-dialog--close:hover {
    background-color: var(--bb-sand);
}

.bb-steps {
    display: flex;
    gap: .375rem;
    margin-bottom: 1.125rem;
}

.bb-steps--dot {
    width: 1.75rem;
    height: .375rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-sand-line);
}

.bb-steps--dot_done {
    background-color: var(--bb-coral);
}

@media (min-width: 992px) {
    .bb-dialog-card {
        padding: 2rem;
    }
}

/* --- Suporte e comunidade ------------------------------------------------- */

.bb-home-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}

.bb-support-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.375rem 1.25rem;
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-sky-bg);
}

.bb-support-panel--title {
    margin: .5rem 0 0;
    font-family: var(--bb-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--bb-ink);
}

.bb-support-panel--text {
    margin: .5rem 0 0;
    font-size: .84375rem;
    line-height: 1.5;
    color: #4A3A2E;
}

.bb-support-panel--text b {
    color: var(--bb-ink);
    font-weight: 700;
}

.bb-support-panel--note {
    display: block;
    margin-top: .625rem;
    font-size: .8125rem;
    color: #4A3A2E;
}

.bb-community--list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
}

.bb-community--item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .875rem .5rem;
    border-radius: var(--bb-radius-card);
    background-color: var(--bb-white);
    box-shadow: var(--bb-shadow-rest);
    color: var(--bb-ink);
    font-weight: 700;
    font-size: .8125rem;
    text-align: center;
    transition: transform var(--bb-normal) var(--bb-ease),
                box-shadow var(--bb-normal) var(--bb-ease);
}

.bb-community--item:hover {
    color: var(--bb-ink);
    transform: translateY(-3px);
    box-shadow: var(--bb-shadow-raised);
}

.bb-community--icon {
    font-size: 1.25rem;
}

.bb-community--icon_whatsapp {
    color: var(--bb-mint-dot);
}

/* O rosa de marca do Instagram e o azul do Facebook nao alcancam 4,5:1 sobre o
   branco: ambos descem um passo para cumprir a regra de contraste. */
.bb-community--icon_instagram {
    color: #C1246B;
}

.bb-community--icon_facebook {
    color: #1567D3;
}

.bb-community--name {
    display: block;
}

.bb-community--text {
    display: none;
}

@media (min-width: 992px) {
    .bb-home-help {
        grid-template-columns: 1.1fr minmax(0, 1fr);
        gap: .875rem;
    }

    .bb-support-panel {
        padding: 2rem;
    }

    .bb-support-panel--title {
        font-size: 2rem;
    }

    .bb-support-panel--text {
        margin-top: .75rem;
        font-size: .9375rem;
        line-height: 1.55;
    }

    /* No desktop cada rede vira uma linha com o proprio subtitulo, que e onde
       cabe dizer para que serve cada uma. */
    .bb-community--list {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }

    .bb-community--item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: .75rem;
        padding: 1rem 1.125rem;
        text-align: left;
    }

    .bb-community--icon {
        flex: none;
        width: 1.75rem;
        font-size: 1.625rem;
        text-align: center;
    }

    .bb-community--name {
        font-size: .90625rem;
    }

    .bb-community--text {
        display: block;
        margin-top: .125rem;
        font-size: .8125rem;
        font-weight: 400;
        color: var(--bb-muted);
    }
}

/* --- 19. Pagina de pre-cadastro ------------------------------------------- */

/* A pagina e so o formulario: quem chega vem decidido de um anuncio. O creme sangra de ponta a ponta;
   quem monta a composicao e o palco de dentro. */
/* line-height normal como no design. Sem isto a pagina herda o 1.15 do normalize do xmutarn e cada
   rotulo, dica e passo sai meio pixel mais baixo; somado, os campos derivavam 3 px. */
.bb-pr {
    overflow: hidden;
    background-color: var(--bb-cream);
    line-height: normal;

    /* O brilho coral do design (14/34, .45) e mais forte que o do tema. Redefinido aqui, vale para todo botao
       coral da pagina: uma regra propria perdia para o [x-main-theme=game] .btn.btn_color-accent, mais
       especifico, e a pagina inteira ficava com o brilho fraco. */
    --bb-shadow-coral: 0 .875rem 2.125rem rgba(214, 40, 57, .45);
    --bb-shadow-coral-raised: 0 1rem 2.375rem rgba(214, 40, 57, .5);
}

/* O design quebra as linhas com text-wrap: pretty, que evita a palavra sozinha na ultima linha ("nela.",
   "3."). Sem isso a quebra saia noutro ponto. Navegador sem suporte so ignora. */
.bb-pr h1,
.bb-pr h2,
.bb-pr h3,
.bb-pr p {
    text-wrap: pretty;
}

/* O palco tem a largura do design e e centrado. As formas decorativas sao absolutas em relacao a ELE:
   presas na borda da janela, numa tela larga elas fogem do conteudo e a composicao se desmancha. Ele
   NAO corta: o corte e da pagina, na borda da tela. Cortado aqui, numa tela mais larga que 1280 o
   circulo azul era fatiado no meio da tela, numa linha reta. */
.bb-pr--stage {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 80rem;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
}

.bb-pr--sky,
.bb-pr--sun {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bb-pr--sky {
    right: -5.625rem;
    top: -2.5rem;
    width: 20rem;
    height: 20rem;
    background-color: var(--bb-sky-bg);
}

.bb-pr--sun {
    left: 1.125rem;
    top: 6rem;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--bb-sun);
}

/* Acima do rei (z-index 3). No celular ele passa por cima do cabecalho, e um enfeite nao pode
   roubar o toque do unico link de saida da pagina. */
.bb-pr--top {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.75rem;
    padding: 0 1rem;
}

.bb-pr--logo {
    width: auto;
    height: 2.25rem;
}

/* O alvo de toque chega a 44 px pela altura minima: o texto e pequeno, mas o dedo nao. */
.bb-pr--back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

.bb-pr--back:hover,
.bb-pr--back:focus-visible {
    color: var(--bb-coral-text);
}

/* No celular o icone sai: o alvo continua o link inteiro, e o texto sozinho ja diz para onde vai. */
.bb-pr--back > .fa-solid {
    display: none;
    font-size: .75rem;
}

.bb-pr--body {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 4.375rem 1rem 1.5rem;
}

/* A coluna vazia so existe na grade de tres colunas do desktop. */
.bb-pr--spacer {
    display: none;
}

/* No celular o contêiner nao ocupa espaco: o rei e absoluto sobre o corpo, invadindo o topo direito
   do cartao — por isso a pilula, o titulo e a descricao tem largura limitada mais abaixo. */
.bb-pr--kingwrap {
    height: 0;
}

.bb-pr--king {
    position: absolute;
    right: .375rem;
    top: -1.5rem;
    z-index: 3;
    width: 10.625rem;
    filter: drop-shadow(0 .875rem 1.625rem rgba(120, 60, 0, .25));
    animation: bb-float 6s ease-in-out infinite;
}

.bb-pr--card {
    position: relative;
    z-index: 2;
    padding: 1.375rem 1.125rem;
    border-radius: 1.5rem;
    background-color: var(--bb-white);
    box-shadow: 0 1.25rem 3.125rem rgba(120, 60, 0, .16);
    overflow: hidden;
}

/* A barra de 4 px no topo do cartao: coral virando sol. */
.bb-pr--card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: .25rem;
    background: linear-gradient(90deg, var(--bb-coral), var(--bb-sun));
}

/* Indicador dos tres passos. Acende de forma cumulativa: quem ja foi alcancado fica aceso e nunca
   volta a apagar. */
.bb-pr--steps {
    display: flex;
    gap: .375rem;
    width: 60%;
    margin: 0 0 1.125rem;
    padding: 0;
    list-style: none;
}

.bb-pr--step {
    flex: 1;
}

.bb-pr--step--bar {
    display: block;
    height: .25rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-sand);
}

.bb-pr--step_on .bb-pr--step--bar {
    background-color: var(--bb-coral);
}

.bb-pr--step--label,
.bb-pr--step--label_short {
    display: block;
    margin-top: .3125rem;
    color: var(--bb-disabled-fg);
    font-family: var(--bb-font-text);
    font-size: .59375rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.bb-pr--step_on .bb-pr--step--label,
.bb-pr--step_on .bb-pr--step--label_short {
    color: var(--bb-coral-text);
}

/* Abaixo de lg so o rotulo curto aparece: o numero ja esta na barra e nao cabe ao lado do rei. */
.bb-pr--step--label {
    display: none;
}

/* content-box como no design, que nao tem reset: o max-width de 62% limita o TEXTO e o padding vem por
   fora. Com o border-box do site os mesmos 62% cortavam 20 px do texto, e no celular a pilula quebrava em
   duas linhas e empurrava o cartao inteiro para baixo. */
.bb-pr--pill {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    max-width: 62%;
    height: 1.5rem;
    margin: 0;
    padding: 0 .625rem;
    border-radius: var(--bb-radius-pill);
    background-color: var(--bb-sunlight-bg);
    color: var(--bb-sunlight-fg);
    font-family: var(--bb-font-text);
    font-size: .65625rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.bb-pr--pill--dot {
    flex-shrink: 0;
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background-color: var(--bb-coral);
    animation: bb-pr-pulse 2s ease-in-out infinite;
}

.bb-pr--title {
    max-width: 65%;
    margin: .75rem 0 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    /* A regra de h1 da identidade aperta o espacamento; o design usa o normal da Fredoka. */
    letter-spacing: normal;
}

.bb-pr--text {
    max-width: 62%;
    margin: .375rem 0 0;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .90625rem;
    line-height: 1.45;
}

.bb-pr--tip {
    margin: .4375rem 0 0;
    color: var(--bb-muted);
    font-family: var(--bb-font-text);
    font-size: .75rem;
}

.bb-pr--fields {
    font-family: var(--bb-font-text);
}

/* Rotulo estatico acima do campo. A folga de 22 px e dele, nao do contêiner. */
.bb-pr--label {
    display: block;
    margin-top: 1.125rem;
    color: var(--bb-ink);
    font-size: .8125rem;
    font-weight: 700;
}

/* Dentro da grade regiao/telefone quem da a folga e a propria grade. */
.bb-pr--label_first {
    margin-top: .875rem;
}

/* 16 px no campo nao e capricho: abaixo disso o iOS da zoom sozinho ao focar. */
.bb-pr--input {
    box-sizing: border-box;
    width: 100%;
    height: 3.125rem;
    /* Pelo mesmo motivo do botão: o 1.15 do normalize deslocava o texto dentro do campo. */
    line-height: normal;
    margin-top: .375rem;
    padding: 0 .875rem;
    border: 2px solid var(--bb-sand-line);
    border-radius: var(--bb-radius-field);
    background-color: var(--bb-white);
    color: var(--bb-ink);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color .15s cubic-bezier(.2, .8, .2, 1);
}

select.bb-pr--input {
    padding: 0 .75rem;
}

.bb-pr--input:focus {
    border-color: var(--bb-ink);
    box-shadow: 0 0 0 .25rem rgba(28, 111, 184, .25);
}

.bb-pr--error {
    margin: .4375rem 0 0;
    color: var(--bb-coral-text);
    font-size: .78125rem;
    line-height: 1.45;
}

/* Sem mensagem, o bloco de erro nao ocupa espaco. O teste e pela mensagem, e nao por :empty: o Razor deixa
   espacos dentro do bloco, e ele nunca fica vazio de verdade. */
.bb-pr--error:not(:has(.validation-message)) {
    display: none;
}

.bb-pr--pair {
    display: grid;
    gap: 0;
    margin-top: 0;
}

.bb-pr--actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 1.25rem;
}

.bb-pr--submit {
    width: 100%;
}

/* O carregamento diz o que esta acontecendo em vez de girar em silencio. */
.bb-pr--loading {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 1.5rem 0;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .9375rem;
}

/* Na conclusao o rei nao disputa espaco com o texto: as larguras limitadas saem. */
.bb-pr--done .bb-pr--title,
.bb-pr--done .bb-pr--text {
    max-width: none;
}

.bb-pr--done--art {
    margin: .5rem 0 1rem;
    color: var(--bb-mint-dot);
    font-size: 3rem;
    line-height: 1;
}

.bb-pr--done--date {
    margin: 1rem 0 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

.bb-pr--done--action {
    margin-top: 1.25rem;
}

/* O logo e o caminho de volta mais obvio, ja que a toolbar sai desta pagina. */
.bb-pr--brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* O botao do design: 56 px, Fredoka 18, sem quebrar linha, com a sombra coral. O seletor repete o
   .bb-pr para passar o tamanho do btn_size-lg do xmutarn sem !important. */
.bb-pr .bb-pr--submit {
    gap: .625rem;
    line-height: normal;
    height: 3.5rem;
    font-family: var(--bb-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Faixa das recompensas: miniaturas sobrepostas, um chip com o resto e uma linha de texto. */
.bb-reward-strip {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1rem;
    padding: .5625rem .625rem;
    border-radius: .75rem;
    background-color: var(--bb-cream);
}

.bb-reward-strip--thumbs {
    display: flex;
    flex-shrink: 0;
}

.bb-reward-strip--thumb,
.bb-reward-strip--more {
    box-sizing: content-box;
    width: 1.625rem;
    height: 1.625rem;
    border: 2px solid var(--bb-white);
    border-radius: .375rem;
    font-size: .625rem;
}

.bb-reward-strip--thumb {
    object-fit: contain;
    background-color: var(--bb-white);
}

.bb-reward-strip--thumb + .bb-reward-strip--thumb,
.bb-reward-strip--more {
    margin-left: -.4375rem;
}

.bb-reward-strip--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bb-coral);
    color: var(--bb-white);
    font-family: var(--bb-font-text);
    font-size: .6875rem;
    font-weight: 800;
}

.bb-reward-strip--text {
    margin: 0;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .78125rem;
    line-height: 1.35;
}

.bb-reward-strip--text b {
    color: var(--bb-ink);
}

/* No celular cabem quatro miniaturas; a quinta e o chip do desktop somem, e o texto encurta. */
.bb-reward-strip--thumb_wide,
.bb-reward-strip--more_wide,
.bb-reward-strip--text_wide,
.bb-pr--tip_wide,
.bb-pr--pill_wide {
    display: none;
}

/* Cor do placeholder do design: mais clara que o texto de apoio, para nao ser lida como valor. */
.bb-pr--input::placeholder {
    color: #9A8A7A;
    opacity: 1;
}

/* O icone acompanha o texto do botao (o check do Confirmar, o presente da conclusao), com a folga dada pelo
   gap do botao e nao pela margem do xmutarn. So o presente do passo 1 e menor, 16px, como no design. */
.bb-pr .bb-pr--submit .btn--icon {
    margin: 0;
    font-size: inherit;
}

.bb-pr .bb-pr--submit .bb-pr--icon_sm {
    font-size: 1rem;
}

/* Rodape minimo, dentro do palco. No celular e uma linha so, centralizada e separada por pontos. */
.bb-pr--foot {
    position: relative;
    z-index: 2;
    padding: .875rem 1rem 1.25rem;
    color: var(--bb-muted);
    font-family: var(--bb-font-text);
    font-size: .71875rem;
    line-height: 1.6;
    text-align: center;
}

.bb-pr--foot--links {
    display: inline;
}

.bb-pr--foot a {
    color: inherit;
    text-decoration: none;
}

.bb-pr--foot a:hover,
.bb-pr--foot a:focus-visible {
    color: var(--bb-coral-text);
}

.bb-pr--foot--links a::before {
    content: "·";
    display: inline-block;
    margin: 0 .35em;
    color: var(--bb-muted);
}

/* --- Estados do pre-cadastro --------------------------------------------- */

/* Erro com o icone na frente e o texto em duas partes; a linha quebra alinhada ao texto, nao ao icone. */
.bb-pr--error {
    line-height: 1.45;
}

.bb-pr--error .validation-message {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* line-height 1, como o <i> do Font Awesome no design. Herdando o 1.45 da mensagem, o icone ficava 2 px mais
   alto que a linha de texto e esticava cada erro de uma linha so. */
.bb-pr--error .validation-message::before {
    content: "\f06a";
    flex: none;
    margin-top: 2px;
    line-height: 1;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Aviso: nao foi erro de quem digitou (ja pre-cadastrado, pre-cadastro encerrado). Amarelo, com check. */
.bb-pr--error_warn {
    color: var(--bb-sunlight-fg);
}

.bb-pr--error_warn .validation-message::before {
    content: "\f058";
}

.bb-pr--input.invalid {
    border-color: var(--bb-coral);
}

.bb-pr--input_warn.invalid {
    border-color: var(--bb-sun);
}

/* Dica e erro nunca aparecem juntos: quando o campo tem mensagem, a dica neutra sai. */
.bb-pr--error:has(.validation-message) + .bb-pr--tip {
    display: none;
}

/* Carregamento: ocupa o lugar do passo inteiro, com o que esta acontecendo e o pedido de nao fechar. */
.bb-pr--busy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 21.25rem;
    text-align: center;
}

/* content-box como no design, que não tem reset: os 40 px são do miolo e a borda de 4 px vem por fora. */
.bb-pr--busy--ring {
    box-sizing: content-box;
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid var(--bb-sand);
    border-top-color: var(--bb-coral);
    border-radius: 50%;
    animation: bb-pr-spin .8s linear infinite;
}

.bb-pr--busy--label {
    margin: 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.bb-pr--busy--hint {
    margin: 0;
    color: var(--bb-muted);
    font-family: var(--bb-font-text);
    font-size: .8125rem;
}

/* Nos passos 2A e 2B o titulo vem logo abaixo dos passos, sem a pilula no meio. */
.bb-pr--title_flush {
    margin: 0;
    max-width: 62%;
    font-size: 1.875rem;
}

/* Com qual conta o jogador esta seguindo, e o atalho para trocar de e-mail. */
.bb-pr--account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    margin-top: 1rem;
    padding: .5625rem .75rem;
    border-radius: .75rem;
    background-color: var(--bb-cream);
    color: var(--bb-ink);
    font-family: var(--bb-font-text);
    font-size: .8125rem;
}

.bb-pr--account--who {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.bb-pr--account--who > .fa-solid {
    color: var(--bb-coral-text);
}

.bb-pr--account--who > b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O desenho pede um link pequeno; a area de toque cresce por fora, sem mudar o tamanho da faixa. */
.bb-pr--account--change,
.bb-pr--labelrow--link {
    position: relative;
    color: var(--bb-coral-text);
    font-family: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* line-height normal: o normalize do xmutarn põe 1.15 em todo botão, e a faixa do e-mail ficava 1 px mais baixa
   que no design — o que deslocava todo o formulário de baixo. */
.bb-pr--account--change {
    flex: none;
    padding: 4px 6px;
    line-height: normal;
    border: 0;
    background: transparent;
    font-size: .8125rem;
}

.bb-pr--account--change::after,
.bb-pr--labelrow--link::after {
    content: "";
    position: absolute;
    inset: -.75rem -.375rem;
}

.bb-pr--label_create {
    margin-top: 1rem;
}

.bb-pr--label_confirm {
    margin-top: .875rem;
}

/* Passo 2B: o "Esqueci minha senha" fica na linha do rotulo. */
.bb-pr--labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 1rem;
}

.bb-pr--labelrow .bb-pr--label {
    margin-top: 0;
}

.bb-pr--labelrow--link {
    font-size: .75rem;
}

/* Aceite dos termos, com a caixa desenhada pela identidade. */
.bb-pr--terms {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-top: 1rem;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .8125rem;
    line-height: 1.45;
    cursor: pointer;
}

.bb-pr--terms a {
    color: var(--bb-coral-text);
    font-weight: 700;
}

.bb-pr--check {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border: 2px solid var(--bb-ink);
    border-radius: .375rem;
    background-color: var(--bb-white);
    cursor: pointer;
    appearance: none;
}

.bb-pr--check:checked {
    border-color: var(--bb-coral);
    background: var(--bb-coral) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / .875rem no-repeat;
}

.bb-pr--check_error {
    border-color: var(--bb-coral);
}

.bb-pr--check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(28, 111, 184, .25);
}

/* Dupla de botoes: no celular o principal vem em cima e o Voltar embaixo, menor. A ordem no DOM e a do
   desktop (Voltar a esquerda), por isso o column-reverse. */
.bb-pr--actions_pair {
    flex-direction: column-reverse;
}

/* No celular o Voltar vem antes no DOM e aparece embaixo: sem subir de camada, o brilho do botao principal,
   pintado depois, cobria a borda de cima dele. No design o Voltar branco fica por cima do brilho. */
.bb-pr--actions_pair .bb-pr--backbtn {
    z-index: 1;
}

.bb-pr .bb-pr--backbtn {
    gap: .5rem;
    width: 100%;
    height: 3rem;
    border: 2px solid var(--bb-ink);
    border-radius: var(--bb-radius-pill);
    color: var(--bb-ink);
    font-family: var(--bb-font-text);
    font-size: .875rem;
    font-weight: 700;
    line-height: normal;
}

.bb-pr .bb-pr--backbtn .btn--icon {
    margin: 0;
}

/* Conclusao. */
.bb-pr--done {
    padding-top: 1.875rem;
    text-align: center;
}

.bb-pr--medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--bb-mint-bg);
    color: var(--bb-mint-dot);
    font-size: 1.875rem;
    box-shadow: 0 0 0 10px #F3FBF6;
}

.bb-pr--done--title {
    margin: 1rem 0 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: normal;
}

.bb-pr--done--text {
    margin: .625rem 0 0;
    color: var(--bb-secondary);
    font-family: var(--bb-font-text);
    font-size: .90625rem;
    line-height: 1.5;
}

.bb-pr--done--small {
    margin: .5rem 0 0;
    color: var(--bb-muted);
    font-family: var(--bb-font-text);
    font-size: .8125rem;
    line-height: 1.5;
}

.bb-pr--done--text b,
.bb-pr--done--small b {
    color: var(--bb-ink);
}

.bb-pr--done--date {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem auto 0;
    padding: .5625rem .875rem;
    border-radius: .75rem;
    background-color: var(--bb-sunlight-bg);
    color: var(--bb-sunlight-fg);
    font-family: var(--bb-font-display);
    font-size: .9375rem;
    font-weight: 600;
}

.bb-pr--done--actions {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 1.25rem;
}

.bb-pr .bb-pr--done--actions .bb-pr--submit {
    height: 3.375rem;
    font-size: 1.0625rem;
}

/* 48px + a borda de 2px, como o design sem box-sizing desenha o Baixar o jogo. Sem fundo, como no design: o
   brilho do botao de cima aparece atraves dele (o .btn_outlined do tema pinta de branco, com 0,4,0). */
.bb-pr .bb-pr--done--actions .btn.bb-pr--backbtn {
    height: 3.25rem;
    background-color: transparent;
}

/* No celular o design tira a nota dos codigos extras. */
.bb-pr--done--note {
    display: none;
    margin: .625rem 0 0;
    color: var(--bb-muted);
    font-family: var(--bb-font-text);
    font-size: .78125rem;
}

@keyframes bb-pr-spin {
    to { transform: rotate(360deg); }
}

@keyframes bb-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-.875rem); }
}

@keyframes bb-pr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 40, 57, .45); }
    70% { box-shadow: 0 0 0 .4375rem rgba(214, 40, 57, 0); }
}

/* Quem pede menos movimento nao recebe o rei flutuando nem o ponto pulsando. */
@media (prefers-reduced-motion: reduce) {
    .bb-hero--art,
    .bb-pr--king,
    .bb-pr--pill--dot {
        animation: none;
    }
}

@media (min-width: 992px) {
    /* Numa tela mais alta que 860 o rodape ia junto com o palco e sobrava vazio embaixo dele. O palco
       passa a ocupar a tela; o corpo fica nos 731 px do design (860 - 76 do topo - 53 do rodape), entao a
       composicao nao sai do lugar e a sobra vai para cima do rodape. */
    .bb-pr--stage {
        min-height: max(53.75rem, 100vh);
        min-height: max(53.75rem, 100dvh);
    }

    .bb-pr--body {
        max-height: 45.6875rem;
    }

    .bb-pr--foot {
        margin-top: auto;
    }

    .bb-pr--sky {
        right: -7.5rem;
        top: 7.5rem;
        width: 45rem;
        height: 45rem;
    }

    .bb-pr--sun {
        left: 10rem;
        top: 6.875rem;
        width: 6rem;
        height: 6rem;
    }

    .bb-pr--top {
        height: 4.75rem;
        padding: 0 2.5rem;
    }

    .bb-pr--logo {
        height: 2.75rem;
    }

    .bb-pr--back {
        font-size: .875rem;
    }

    .bb-pr--back > .fa-solid {
        display: inline;
    }

    /* Tres colunas na ordem do DOM: vazia, cartao, rei. Sem grid-column explicito — com colunas
       declaradas fora da ordem do DOM, o posicionamento automatico nunca volta para tras e o cartao
       cai para a linha de baixo. */
    .bb-pr--body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 31.25rem minmax(0, 1fr);
        align-items: center;
        padding: 1rem 2.5rem 3.5rem;
    }

    .bb-pr--spacer {
        display: block;
        height: 35rem;
    }

    .bb-pr--card {
        padding: 1.75rem 2rem 1.875rem;
        border-radius: var(--bb-radius-surface);
        box-shadow: 0 1.5rem 3.75rem rgba(120, 60, 0, .16);
    }

    /* A coluna do rei tem altura propria e ele fica ancorado embaixo. Centrado, ele sobe e cobre os
       campos do cartao — era o que acontecia antes. */
    .bb-pr--kingwrap {
        position: relative;
        height: 35rem;
    }

    .bb-pr--king {
        z-index: auto;
        left: -9.375rem;
        right: auto;
        top: auto;
        bottom: -1.25rem;
        width: 32.5rem;
        filter: drop-shadow(0 1.5rem 2.5rem rgba(120, 60, 0, .25));
    }

    .bb-pr--steps {
        width: 100%;
        margin-bottom: 1.375rem;
    }

    .bb-pr--step--bar {
        height: .3125rem;
    }

    .bb-pr--step--label {
        display: block;
        margin-top: .375rem;
        font-size: .65625rem;
        letter-spacing: .1em;
    }

    .bb-pr--step--label_short {
        display: none;
    }

    .bb-pr--pill,
    .bb-pr--title,
    .bb-pr--text {
        max-width: none;
    }

    .bb-pr--title {
        font-size: 2.375rem;
    }

    .bb-pr--text {
        font-size: 1rem;
    }

    .bb-pr--pair {
        grid-template-columns: 9.375rem 1fr;
    }

    .bb-pr--actions_pair {
        flex-direction: row;
        align-items: center;
    }

    .bb-pr--actions_pair .bb-pr--submit {
        width: auto;
        flex: 1;
    }

    .bb-reward-strip--thumb,
    .bb-reward-strip--more {
        width: 1.875rem;
        height: 1.875rem;
    }

    .bb-reward-strip--thumb_wide,
    .bb-reward-strip--more_wide {
        display: inline-flex;
    }

    .bb-reward-strip--text_wide,
    .bb-pr--tip_wide,
    .bb-pr--pill_wide {
        display: inline;
    }

    .bb-reward-strip--more_narrow,
    .bb-reward-strip--text_narrow,
    .bb-pr--tip_narrow,
    .bb-pr--pill_narrow {
        display: none;
    }

    .bb-pr--foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.125rem 2.5rem;
        border-top: 1px solid var(--bb-sand);
        font-size: .78125rem;
        line-height: normal;
        text-align: left;
    }

    .bb-pr--foot--links {
        display: flex;
        gap: 1.125rem;
    }

    .bb-pr--foot--links a::before {
        content: none;
    }

    /* Valores da tela 1a. A base acima e a 1b (celular). */
    .bb-pr--pill {
        gap: .5rem;
        height: 1.625rem;
        padding: 0 .6875rem;
        font-size: .71875rem;
        letter-spacing: .06em;
    }

    .bb-pr--pill--dot {
        width: .4375rem;
        height: .4375rem;
    }

    .bb-pr--title {
        margin: .875rem 0 0;
    }

    .bb-pr--text {
        margin: .5rem 0 0;
        line-height: 1.5;
    }

    .bb-reward-strip {
        gap: .75rem;
        padding: .625rem .75rem;
        border-radius: var(--bb-radius-field);
    }

    .bb-reward-strip--thumb,
    .bb-reward-strip--more {
        border-radius: .4375rem;
    }

    .bb-reward-strip--thumb + .bb-reward-strip--thumb,
    .bb-reward-strip--more {
        margin-left: -.5rem;
    }

    .bb-reward-strip--more {
        font-size: .6875rem;
    }

    .bb-reward-strip--text {
        font-size: .8125rem;
        line-height: 1.4;
    }

    .bb-pr--label {
        margin-top: 1.375rem;
    }

    .bb-pr--label_first {
        margin-top: 0;
    }

    .bb-pr--pair {
        gap: .75rem;
        margin-top: 1rem;
    }

    .bb-pr--input {
        height: 3.25rem;
        padding: 0 1rem;
    }

    select.bb-pr--input {
        padding: 0 .75rem;
    }

    .bb-pr--tip {
        margin: .5rem 0 0;
        font-size: .78125rem;
    }

    .bb-pr--error {
        margin: .5rem 0 0;
        font-size: .8125rem;
    }

    .bb-pr--actions {
        margin-top: 1.5rem;
    }

    /* Estados, valores da tela 1a. */
    .bb-pr--error {
        font-size: .8125rem;
    }

    .bb-pr--busy {
        gap: 1.125rem;
        min-height: 23.75rem;
    }

    .bb-pr--busy--ring {
        width: 2.75rem;
        height: 2.75rem;
    }

    .bb-pr--busy--label {
        font-size: 1.375rem;
    }

    .bb-pr--busy--hint {
        font-size: .84375rem;
    }

    .bb-pr--title_flush {
        margin: 0;
        max-width: none;
        font-size: 2.375rem;
    }

    .bb-pr--account {
        gap: .75rem;
        padding: .625rem .875rem;
        border-radius: var(--bb-radius-field);
        font-size: .84375rem;
    }

    .bb-pr--label_create {
        margin-top: 1.125rem;
    }

    .bb-pr--label_confirm {
        margin-top: 1rem;
    }

    .bb-pr--labelrow {
        margin-top: 1.125rem;
    }

    .bb-pr--labelrow--link {
        font-size: .78125rem;
    }

    .bb-pr--terms {
        gap: .75rem;
        margin-top: 1.125rem;
        font-size: .84375rem;
    }

    .bb-pr--actions_pair {
        flex-direction: row;
    }

    .bb-pr .bb-pr--backbtn {
        width: auto;
        height: 3.5rem;
        padding: 0 1.25rem;
        font-size: .9375rem;
    }

    .bb-pr--done {
        padding-top: .375rem;
    }

    .bb-pr--medal {
        width: 4.75rem;
        height: 4.75rem;
        font-size: 2.125rem;
    }

    .bb-pr--done--title {
        margin-top: 1.125rem;
        font-size: 2.25rem;
    }

    .bb-pr--done--text {
        margin-top: .75rem;
        font-size: .9375rem;
        line-height: 1.55;
    }

    .bb-pr--done--small {
        font-size: .875rem;
        line-height: 1.55;
    }

    .bb-pr--done--date {
        gap: .625rem;
        margin-top: 1.25rem;
        padding: .625rem 1rem;
        border-radius: var(--bb-radius-field);
        font-size: 1.0625rem;
    }

    .bb-pr--done--actions {
        flex-direction: row;
        margin-top: 1.375rem;
    }

    .bb-pr .bb-pr--done--actions .bb-pr--submit {
        flex: 1;
    }

    /* 54px + a borda de 2px: o design nao tem box-sizing, entao o Baixar sai 4px mais alto que o vizinho. */
    .bb-pr .bb-pr--done--actions .btn.bb-pr--backbtn {
        height: 3.625rem;
    }

    .bb-pr--done--note {
        display: block;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   20. GAP EM FLEX — RESERVA PARA O MOTOR ANTIGO DO LAUNCHER
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   O launcher do jogo embute um Chromium anterior ao 84, que é quando o gap passou a valer em flex
   (em grid ele já valia desde o 57). Ali o navegador descarta a declaração: o respiro entre os
   itens some e a página sai com tudo colado — o rodapé com os links emendados é o caso mais
   visível, mas acontece em todo flex com gap.

   O script no <head> do App.razor mede o suporte e, faltando, põe .no-flex-gap na raiz. Só então
   estas margens entram em cena: navegador atual não vê nada daqui.

   Como cada regra foi escolhida, tudo medido no navegador antes de virar CSS:

   • Linha ou coluna que não quebra, de filhos só elementos: a margem vai no irmão seguinte
     (> * + *). É exata, não sobra nada no fim.
   • Container com texto solto entre os filhos — o <span ícone></span> Texto dos botões e chips —
     usa a margem no fim de cada filho (> *). O seletor de irmão não alcança texto solto, e sem
     isso o ícone continuaria colado na palavra.
   • Container que quebra linha também usa a margem no fim, nos dois eixos. Sendo os filhos só
     elementos, a sobra do último é zerada, senão o grupo centralizado anda de lado.
   • A sobra embaixo da última linha é descontada no próprio container: com conta, quando a margem
     dele está declarada aqui; com margem negativa, quando ele não tem margem nenhuma. Quando a
     margem vem de classe utilitária no markup, o desconto só vale para quem não a traz — daí o
     :not([class*="margin-bottom"]), porque a mesma grade aparece com margem numa página e sem em
     outra, e apagar a do markup seria pior.
   • Nunca a abreviada margin: ela zeraria a margem própria dos filhos. Cada regra escreve as
     propriedades do seu contexto e zera as que o seletor usa noutro, para um container que vira
     coluna no celular e linha no desktop não herdar a margem do eixo errado.
   • Onde o container vira grid, tudo zerado: lá o gap funciona sozinho.

   Duas folgas conhecidas, ambas de poucos pixels e só no motor antigo: num container centralizado
   que ocupa mais de uma linha, cada linha fica meia margem fora do centro; e um filho flexível
   sozinho na linha perde a largura da margem final.

   Ao criar um flex com gap, acrescente aqui a margem equivalente — o gap sozinho não chega ao
   launcher. O mesmo vale para as folhas isoladas de componente (.razor.css), que têm a reserva
   dentro do próprio arquivo.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

.no-flex-gap .bb-meta-row > * {
    margin-right: .625rem;
    margin-bottom: .625rem;
}

.no-flex-gap .bb-meta-row > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-meta-row {
    margin-bottom: calc(.5rem - .625rem);
}

.no-flex-gap .bb-tag > * {
    margin-right: .375rem;
}

.no-flex-gap .bb-status > * {
    margin-right: .5625rem;
}

.no-flex-gap .bb-card-grid > * {
    margin-right: 0;
    margin-bottom: 1.875rem;
}

.no-flex-gap .bb-card-grid > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-card-grid:not([class*="margin-bottom"]):not([class*="margin-y"]) {
    margin-bottom: -1.875rem;
}

.no-flex-gap .bb-error-state--actions > * {
    margin-right: .5rem;
    margin-bottom: .5rem;
}

.no-flex-gap .bb-error-state--actions {
    margin-bottom: -.5rem;
}

.no-flex-gap .bb-mobile-header > * + * {
    margin-left: 12px;
}

.no-flex-gap .bb-mobile-header--account > * {
    margin-right: 8px;
}

.no-flex-gap .bb-mobile-bar--items > * + * {
    margin-left: 2px;
}

.no-flex-gap .bb-mobile-bar--item > * + * {
    margin-top: 3px;
}

.no-flex-gap .bb-mobile-bar--ribbons > * + * {
    margin-left: 6px;
}

.no-flex-gap .bb-footer--nav > * {
    margin-right: 1.375rem;
    margin-bottom: .5rem;
}

.no-flex-gap .bb-footer--nav > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-footer--nav {
    margin-bottom: -.5rem;
}

.no-flex-gap .bb-notice > * {
    margin-right: .75rem;
}

@media (max-width: 575.98px) {

    .no-flex-gap .bb-scroller > * {
        margin-right: .75rem;
    }

}


.no-flex-gap .bb-hero--tags > * {
    margin-right: .625rem;
    margin-bottom: .625rem;
}

.no-flex-gap .bb-hero--tags > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-hero--tags {
    margin-bottom: -.625rem;
}

.no-flex-gap .bb-hero--actions > * + * {
    margin-top: .625rem;
    margin-left: 0;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-hero--tags > * {
        margin-right: .875rem;
        margin-bottom: .875rem;
    }

    .no-flex-gap .bb-hero--tags > *:last-child {
        margin-right: 0;
    }

    .no-flex-gap .bb-hero--tags {
        margin-bottom: calc(1.375rem - .875rem);
    }

    .no-flex-gap .bb-hero--actions > * + * {
        margin-top: 0;
        margin-left: .875rem;
    }

}


.no-flex-gap .bb-countdown > * {
    margin-right: .5rem;
    margin-bottom: .5rem;
}

.no-flex-gap .bb-countdown > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-countdown {
    margin-bottom: -.5rem;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-countdown > * {
        margin-right: .625rem;
        margin-bottom: .625rem;
    }

    .no-flex-gap .bb-countdown > *:last-child {
        margin-right: 0;
    }

    .no-flex-gap .bb-countdown {
        margin-bottom: -.625rem;
    }

    .no-flex-gap .bb-countdown--box > * + * {
        margin-top: .25rem;
    }

}


.no-flex-gap .bb-rewards--grid > * + * {
    margin-left: .75rem;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-rewards--grid > * {
        margin-left: 0;
    }

}


.no-flex-gap .bb-section--head > * {
    margin-right: 1rem;
    margin-bottom: .5rem;
}

.no-flex-gap .bb-section--head > *:last-child {
    margin-right: 0;
}

.no-flex-gap .bb-section--head {
    margin-bottom: calc(.875rem - .5rem);
}

.no-flex-gap .bb-tile > * + * {
    margin-top: 0;
    margin-left: .875rem;
}

.no-flex-gap .bb-tile--action > * {
    margin-right: .5rem;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-tile > * + * {
        margin-top: 1rem;
        margin-left: 0;
    }

}


.no-flex-gap .bb-steps > * + * {
    margin-left: .375rem;
}

.no-flex-gap .bb-support-panel > * + * {
    margin-top: 1.5rem;
}

.no-flex-gap .bb-community--item > * + * {
    margin-top: .5rem;
    margin-left: 0;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-community--item > * + * {
        margin-top: 0;
        margin-left: .75rem;
    }

}


.no-flex-gap .bb-pr--back > * {
    margin-right: .5rem;
}

.no-flex-gap .bb-pr--steps > * + * {
    margin-left: .375rem;
}

.no-flex-gap .bb-pr--pill > * + * {
    margin-left: .4375rem;
}

.no-flex-gap .bb-pr--actions > * + * {
    margin-top: .625rem;
}

.no-flex-gap .bb-pr--loading > * {
    margin-right: .625rem;
}

.no-flex-gap .bb-pr .bb-pr--submit > * {
    margin-right: .625rem;
}

.no-flex-gap .bb-reward-strip > * + * {
    margin-left: .625rem;
}

.no-flex-gap .bb-pr--error .validation-message > * {
    margin-right: .5rem;
}

.no-flex-gap .bb-pr--busy > * {
    margin-bottom: 1rem;
}

.no-flex-gap .bb-pr--busy {
    margin-bottom: -1rem;
}

.no-flex-gap .bb-pr--account > * {
    margin-right: .625rem;
}

.no-flex-gap .bb-pr--account--who > * {
    margin-right: .5rem;
}

.no-flex-gap .bb-pr--terms > * {
    margin-right: .625rem;
}

.no-flex-gap .bb-pr .bb-pr--backbtn > * {
    margin-right: .5rem;
}

.no-flex-gap .bb-pr--done--date > * {
    margin-right: .5rem;
}

.no-flex-gap .bb-pr--done--actions > * {
    margin-bottom: .625rem;
}

.no-flex-gap .bb-pr--done--actions {
    margin-bottom: -.625rem;
}

@media (min-width: 992px) {

    .no-flex-gap .bb-pr--foot--links > * + * {
        margin-left: 1.125rem;
    }

    .no-flex-gap .bb-pr--pill > * + * {
        margin-left: .5rem;
    }

    .no-flex-gap .bb-reward-strip > * + * {
        margin-left: .75rem;
    }

    .no-flex-gap .bb-pr--busy > * {
        margin-bottom: 1.125rem;
    }

    .no-flex-gap .bb-pr--busy {
        margin-bottom: -1.125rem;
    }

    .no-flex-gap .bb-pr--account > * {
        margin-right: .75rem;
    }

    .no-flex-gap .bb-pr--terms > * {
        margin-right: .75rem;
    }

    .no-flex-gap .bb-pr--done--date > * {
        margin-right: .625rem;
    }

}


.no-flex-gap .chat-list--item__row > * {
    margin-right: 0.75rem;
    margin-bottom: 0;
}

.no-flex-gap .chat-list--item__urgency > * {
    margin-right: 0.25rem;
}

.no-flex-gap .chat-list--item__quick-actions > * {
    margin-right: 0.25rem;
}

.no-flex-gap .inbox-filter-row > * {
    margin-right: 0;
    margin-bottom: 0.5rem;
}

.no-flex-gap .inbox-filter-row {
    margin-bottom: -0.5rem;
}

.no-flex-gap .inbox-filter-chips > * {
    margin-right: 0.375rem;
    margin-bottom: 0.375rem;
}

.no-flex-gap .inbox-filter-chips {
    margin-bottom: -0.375rem;
}

@media (max-width: 768px) {

    .no-flex-gap .chat-list--item__row > * {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .no-flex-gap .chat-list--item__row {
        margin-bottom: -0.5rem;
    }

    .no-flex-gap .chat-list--item__meta > * {
        margin-right: 0.625rem;
        margin-bottom: 0.375rem;
    }

    .no-flex-gap .chat-list--item__meta {
        margin-bottom: -0.375rem;
    }

}


.no-flex-gap .chat-page--actions > * {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.no-flex-gap .chat-page--actions {
    margin-bottom: -0.5rem;
}

.no-flex-gap .chat-date-separator > * {
    margin-right: 0.75rem;
}

.no-flex-gap .chat-empty_directed > * {
    margin-bottom: 0.625rem;
}

.no-flex-gap .chat-empty_directed {
    margin-bottom: -0.625rem;
}

.no-flex-gap .chat-composer-wrapper > * {
    margin-bottom: 0.25rem;
}

.no-flex-gap .chat-composer-wrapper {
    margin-bottom: -0.25rem;
}

@media (min-width: 992px) {
    .no-flex-gap .bb-section--head {
        margin-bottom: calc(1.5rem - .5rem);
    }
}