/* ==========================================================================
   pages.css — primitivas compartilhadas das páginas no tema "novo"
   Carregado DEPOIS de /theme/build/assets/app.css e ANTES do CSS dos jogos.
   Regras fora de @layer vencem os utilitários do Tailwind (que ficam em @layer utilities);
   os títulos padrão ficam em @layer base para que utilitários (text-lg, font-bold...) ainda funcionem.
   Dono: layout (views/layouts). CSS de uma página só vai em css/pages/<página>.css (o header.php carrega sozinho).
   ========================================================================== */

/* ---------- Tokens do tema ----------
   O header.php imprime DEPOIS deste arquivo (<style id="frontend-active-theme">) só as cores do admin
   (customize): --color-primary, --primary-bright (hover), --theme-primary-rgb e --primary-rgb. Os valores delas
   aqui são só o padrão. O que segue a cor do admin usa var(); o resto é fixo do tema. */
:root {
    /* cor do admin (padrão) */
    --color-primary: #06e05b;
    --primary-bright: #00ea64;
    --theme-primary-rgb: 6 224 91;
    --primary-rgb: 6, 224, 91;

    /* seguem a cor do admin */
    --color-button-bg: var(--color-primary);
    --color-header-balance-bg: var(--color-primary);
    --color-header-deposit-bg: var(--color-primary);
    --color-game-balloon-icon: var(--color-primary);
    --color-game-balloon-value: var(--color-primary);
    --color-game-online-dot: var(--color-primary);
    --color-auth-links: var(--color-primary);
    --color-auth-button-bg: var(--color-primary);
    --color-header-login-text: var(--color-primary);
    --color-payments-button-bg: var(--color-primary);
    --primary: var(--color-primary);
    --accent: var(--color-primary);

    /* fixos do tema */
    --color-bg-primary: #001510;
    --color-bg-secondary: #003628;
    --color-texts: #ffffff;
    --color-titles: #ffffff;
    --color-sidebar-bg: #001510;
    --color-sidebar-button-bg: #003628;
    --color-sidebar-links: #ffffff;
    --color-sidebar-icon: #b5e2c8;
    --color-button-text: #001510;
    --color-primary-foreground: #001510;
    --color-header-main-bg: #003628;
    --color-header-texts: #ffffff;
    --color-header-balance-text: #001510;
    --color-header-deposit-text: #001510;
    --color-game-card-bg: #003628;
    --color-game-balloon-bg: #003628;
    --color-game-balloon-text: #b5e2c8;
    --color-game-online-bg: #14302a;
    --color-game-online-text: #ffffff;
    --color-game-overlay: #000000;
    --color-game-icon: #001510;
    --color-game-title: #ffffff;
    --color-warning: #ffc300;
    --color-info: #0096ff;
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-auth-bg-primary: #14302a;
    --color-auth-bg-inputs: #2b3f3a;
    --color-auth-bg-close: #003628;
    --color-auth-icon-close: #ffffff;
    --color-auth-texts: #ffffff;
    --color-auth-text-inputs: #ffffff;
    --color-auth-button-text: #001510;
    --color-auth-backdrop: #000000;
    --color-header-login-bg: #000000;
    --color-bottom-notification-bg: #14302a;
    --color-payments-button-text: #001510;
    --color-border: #2b3f3a;
    --color-surface: #14302a;
    --color-text-primary: #ffffff;
    --color-auth-titles: #ffffff;
    --bg: #001510;
    --bg-soft: #003628;
    --surface: #14302a;
    --surface-2: #2b3f3a;
    --text: #ffffff;
    --muted: #b5e2c8;
    --theme-bg-rgb: 0 21 16;
    --theme-bg-secondary-rgb: 0 54 40;

    /* tokens antigos (views, crash.css, mines.css, double.css) */
    --primary-green: var(--color-primary);
    --primary-green-hover: var(--primary-bright);
    --bg-dark: #001510;
    --bg-lighter: #14302a;
    --bg-card: #14302a;
    --text-white: #f5f7fb;
    --text-main: #f5f7fb;
    --text-gray: #b5e2c8;
    --text-muted: #7fb89a;
    --border-color: rgba(255, 255, 255, .08);
    --input-bg: #2b3f3a;
    --modal-bg: #14302a;
}

/* ---------- Correções do esqueleto do tema ---------- */

/* 821–1023px: a sidebar já é gaveta fixa; sem isso a grade espremia o <main> numa coluna de 215px */
@media (max-width: 1023px) {
    .layout { display: block; }
}

/* 1024–1100px: o tema reduz a coluna para 215px mas a sidebar continua com 280px e cobria o <main> */
@media (min-width: 1024px) {
    .layout:not(.layout-no-sidebar) { grid-template-columns: var(--sidebar-w-expanded, 280px) minmax(0, 1fr); }
    /* esportes: sem coluna lateral no desktop (no mobile a gaveta continua disponível) */
    .layout-no-sidebar > .sidebar { display: none; }
}

/* Logo do topo: <h1> só na home, <div> nas outras páginas; mesmo visual do ".BDebc h1" do tema */
.BDebc .xb-site-logo { display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; }

/* Celular/tablet: o menu fechado sai também do Tab e do leitor de tela. A visibilidade muda depois da
   animação de saída (mesmos tempos do tema, que usa !important no transition); ao abrir, na hora. */
@media (max-width: 1023px) {
    .sidebar:not(.open) {
        visibility: hidden;
        transition: transform .32s cubic-bezier(.22, .75, .18, 1), opacity .24s, visibility 0s linear .32s !important;
    }
    .sidebar.open {
        visibility: visible;
        transition: transform .32s cubic-bezier(.22, .75, .18, 1), opacity .24s, visibility 0s !important;
    }
}

/* Folha de login/cadastro: o diálogo recebe o foco ao abrir (para o leitor de tela), sem contorno */
[data-auth-dialog]:focus { outline: none; }

/* Item ativo do menu lateral (o tema não tem estado ativo) */
.sidebar a.xb-side-active,
.sidebar a.xb-side-active > span:first-child { color: var(--color-primary); }

/* Ícones Font Awesome vindos do admin (sidebar_customize / mobile_bottom_nav) */
.xb-side-fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
}
.xb-nav-fa {
    display: block;
    font-size: 22px;
    line-height: 1;
}
[data-testid=mobile-bottom-nav] .mobile-bottom-nav-deposit .xb-nav-fa { font-size: 24px; }

/* Saldo bônus no cabeçalho */
.xb-bonus-line { color: #ffb11a; white-space: nowrap; }

/* ---------- Logo em texto (site sem logo enviado no admin) ---------- */
.xb-text-logo {
    display: inline-flex;
    align-items: baseline;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.xb-text-logo span { color: var(--color-primary, #06e05b); }
/* o tema esconde qualquer <span> dentro do link do logo (.l6oz0 span) */
.l6oz0 .xb-text-logo { display: inline-flex; align-self: center; }
.l6oz0 .xb-text-logo span { display: inline; }
.xb-text-logo--sm { font-size: 20px; }
.xb-text-logo--lg { font-size: 30px; }
.xb-text-logo--auth { font-size: 28px; }
@media (max-width: 560px) {
    .l6oz0 .xb-text-logo { font-size: 21px; }
}
@media (max-width: 400px) {
    .l6oz0 .xb-text-logo { font-size: 18px; }
}

/* ---------- Conteúdo das páginas ---------- */
@layer base {
    .xb-page h1 { color: var(--color-titles, #fff); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
    .xb-page h2 { color: var(--color-titles, #fff); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
    .xb-page h3 { color: var(--color-titles, #fff); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
    .xb-page p { line-height: 1.6; }
}

@layer components {
    /* Painel/superfície padrão */
    .xb-card {
        background: var(--surface, #14302a);
        border: 1px solid var(--color-border, #2b3f3a);
        border-radius: 12px;
        padding: 16px;
    }
}

/* Aviso centralizado (erro ao abrir jogo, acesso restrito) */
.xb-notice { max-width: 520px; margin: 40px auto 0; text-align: center; padding: 28px 22px; }
.xb-notice__title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
.xb-notice__title i { color: var(--color-error, #ef4444); }
.xb-notice__text { margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.6; }
.xb-notice__details {
    margin-top: 16px;
    max-height: 180px;
    overflow: auto;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .55);
    font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-all;
}
.xb-notice .xb-btn { margin-top: 18px; }

/* Saque: o tema estiliza qualquer <span> do bloco de saldo como rótulo; o valor dentro do <strong> herda o tamanho */
.cass-wallet-value strong span { color: inherit; font-size: inherit; font-weight: inherit; }

/* Botões */
.xb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: var(--color-texts, #fff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .18s, opacity .18s, border-color .18s, color .18s;
}
.xb-btn:hover { filter: brightness(1.08); }
.xb-btn:disabled,
.xb-btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; filter: none; }
.xb-btn--primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .12)), var(--color-button-bg, #06e05b);
    color: var(--color-button-text, #001510);
    font-weight: 800;
    box-shadow: 0 10px 26px rgb(var(--theme-primary-rgb, 6 224 91) / .22);
}
.xb-btn--primary:hover { opacity: .92; filter: none; }
.xb-btn--outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--color-texts, #fff);
}
.xb-btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); filter: none; }
.xb-btn--block { width: 100%; }

/* Fundo inclinado dos botões do tema: classe do <span> decorativo de fundo, no lugar do
   style="transform: skew(-20deg); background-image: linear-gradient(...)" inline. A cor continua na classe bg-*.
   <button class="... relative ..."><span aria-hidden="true" class="absolute inset-0 z-0 rounded-lg bg-auth-button-bg xb-skew-btn"></span>
   <span class="relative z-10 ...">Texto</span></button> */
.xb-skew-btn {
    transform: skew(-20deg);
    background-image: linear-gradient(rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .22) 100%);
}

/* Classes antigas ainda usadas nas views (o tema já tem .btn e .btn-primary) */
.btn-block { width: 100%; }
.btn.btn-outline,
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--color-texts, #fff);
}
.btn.btn-outline:hover,
.btn-outline:hover { border-color: var(--primary-green); color: var(--primary-green); }
/* .btn e .btn-primary: usa os do tema (mesmo visual verde do layout antigo) */

/* Campos */
.xb-input,
.form-control,
.form-group input:not([type=checkbox]):not([type=radio]),
.form-group select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--surface-2, #2b3f3a);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .18s;
}
.xb-input::placeholder,
.form-control::placeholder,
.form-group input::placeholder { color: rgba(255, 255, 255, .45); }
.xb-input:focus,
.form-control:focus,
.form-group input:focus,
.form-group select:focus { border-color: rgb(var(--theme-primary-rgb, 6 224 91) / .55); }
.form-group { position: relative; margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 6px; color: var(--text-gray); font-size: 13px; font-weight: 600; }

/* Tabelas largas no celular */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive table { min-width: 500px; }

/* ---------- Modais (renomeados: o tema usa .modal-overlay no seletor de avatar) ---------- */
.xb-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1320;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    background: rgba(0, 0, 0, .64);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.xb-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.xb-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .24);
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 0%, rgb(var(--theme-primary-rgb, 6 224 91) / .16), transparent 36%),
        linear-gradient(180deg, #034830, #022b1e);
    color: var(--color-texts, #fff);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .55);
    transform: translateY(12px);
    transition: transform .2s ease;
    scrollbar-width: none;
}
.xb-modal-overlay.active .xb-modal { transform: none; }
.xb-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06) url(/theme/images/ui/close-icon.avif) center / 70% 70% no-repeat;
    color: transparent;
    font-size: 0;
    cursor: pointer;
}
.xb-modal-close:hover { filter: brightness(1.15); }

/* Escolha de saldo (crash/double/mines com bônus) */
.xb-wallet-choice .xb-modal { text-align: center; }
.xb-wallet-choice__kicker {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.xb-wallet-choice__title { margin: 0; color: #fff; font-size: 22px; font-weight: 800; line-height: 1.15; }
.xb-wallet-choice__text { margin: 10px 0 0; color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.5; }
.xb-wallet-choice__text strong { display: block; color: #fff; font-weight: 700; }
.xb-wallet-choice__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.xb-wallet-choice__options button {
    display: grid;
    gap: 6px;
    min-height: 86px;
    padding: 14px 12px;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    transition: filter .18s, transform .18s;
}
.xb-wallet-choice__options button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.xb-wallet-choice__options small { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.xb-wallet-choice__options strong { font-size: 19px; font-weight: 800; line-height: 1.05; }
.xb-wallet-choice__options .is-real {
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent), linear-gradient(180deg, var(--color-primary), #08b65a);
    color: #021a10;
}
.xb-wallet-choice__options .is-bonus { background: linear-gradient(#ffd95b, #ffb11a); color: #271600; }
@media (max-width: 380px) {
    .xb-wallet-choice__options { grid-template-columns: 1fr; }
}

/* Popup dos banners promocionais do admin */
.xb-promo-popup__card {
    position: relative;
    width: min(500px, 100%);
    overflow: hidden;
    border: 2px solid rgb(var(--theme-primary-rgb, 6 224 91) / .55);
    border-radius: 18px;
    background: #022b1e;
    box-shadow: 0 26px 90px rgba(0, 0, 0, .6);
}
.xb-promo-popup__slide { display: block; }
.xb-promo-popup__slide img { display: block; width: 100%; height: auto; }
.xb-promo-popup__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
}
.xb-promo-popup__nav.is-prev { left: 10px; }
.xb-promo-popup__nav.is-next { right: 10px; }

/* Folha de login/cadastro sem imagem do admin: largura de formulário, não de 940px */
@media (min-width: 640px) {
    .react-modal-sheet-container.xb-auth-compact { width: min(520px, 100vw - 32px) !important; }
}

/* ---------- Jogo aberto (/play): esconde o shell enquanto o iframe ocupa a tela ---------- */
body.game-active #divPageHeaderWrapper,
body.game-active aside.sidebar,
body.game-active .backdrop,
body.game-active #divPageFooter,
body.game-active [data-testid=mobile-bottom-nav],
body.game-active .jbmAp,
body.game-active .cass-floating-shortcuts,
body.game-active .consent-install-layer {
    display: none !important;
}
body.game-active #divPageLayout {
    position: static;
    z-index: auto;
}

/* ===================== Minha conta (/conta) ===================== */
.xb-account-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(600px 160px at 0% 0%, rgb(var(--theme-primary-rgb, 6 224 91) / .16), transparent 70%),
        rgba(0, 0, 0, .28);
}
.xb-account-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(0, 0, 0, .35);
    border: 2px solid var(--color-primary, #06e05b);
    box-shadow: 0 0 0 4px rgb(var(--theme-primary-rgb, 6 224 91) / .14), 0 8px 24px rgb(var(--theme-primary-rgb, 6 224 91) / .22);
}
.xb-account-hero__info { flex: 1 1 220px; min-width: 0; }
.xb-account-hero__name { margin: 0; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.xb-account-hero__meta { margin: 4px 0 0; color: rgba(255, 255, 255, .6); font-size: 13px; overflow-wrap: anywhere; }
.xb-account-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.xb-account-hero__actions .xb-btn { min-width: 120px; }

.xb-account-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.xb-account-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1023px) { .xb-account-grid { grid-template-columns: minmax(0, 1fr); } }

.xb-acard { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .24); padding: 18px; min-width: 0; }
.xb-acard__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.xb-acard__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--color-primary, #06e05b);
    background: rgb(var(--theme-primary-rgb, 6 224 91) / .12);
}
.xb-acard__title { margin: 0; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; }
.xb-acard__desc { margin: 2px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.45; }
.xb-acard form { display: flex; flex-direction: column; gap: 12px; }
.xb-acard__row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .xb-acard__row { grid-template-columns: minmax(0, 1fr); } }
.xb-acard__label { display: block; margin-bottom: 6px; color: rgba(255, 255, 255, .75); font-size: 13px; }
.xb-acard__hint { margin: 6px 0 0; color: rgba(255, 255, 255, .45); font-size: 12px; line-height: 1.4; }
.xb-acard__readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.xb-acard__readonly small { color: rgba(255, 255, 255, .45); font-size: 11.5px; white-space: nowrap; }
.xb-acard__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.xb-acard__actions .xb-btn { min-width: 150px; }
@media (max-width: 560px) { .xb-acard__actions .xb-btn { flex: 1 1 auto; } }

.xb-wallet-pref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.xb-wallet-pref button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .25);
    color: rgba(255, 255, 255, .7);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.xb-wallet-pref button small { font-size: 11.5px; }
.xb-wallet-pref button strong { color: #fff; font-size: 15px; }
.xb-wallet-pref button[aria-pressed="true"] { border-color: var(--color-primary, #06e05b); background: rgb(var(--theme-primary-rgb, 6 224 91) / .1); color: #fff; }
.xb-wallet-pref button:focus-visible { outline: 2px solid var(--color-primary, #06e05b); outline-offset: 2px; }
.xb-wallet-pref button:disabled { opacity: .5; cursor: not-allowed; }

.xb-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.xb-activity li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 13.5px; }
.xb-activity li:last-child { border-bottom: 0; }
.xb-activity__main { display: flex; flex-direction: column; min-width: 0; color: #fff; }
.xb-activity__main small { color: rgba(255, 255, 255, .45); font-size: 12px; }
.xb-activity__side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.xb-activity__amount { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.xb-activity__empty { margin: 0; padding: 10px 0; color: rgba(255, 255, 255, .45); font-size: 13px; }
.xb-activity__title { margin: 14px 0 2px; color: rgba(255, 255, 255, .5); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.xb-activity__title:first-child { margin-top: 0; }

.xb-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .7); }
.xb-badge--ok { background: rgb(var(--theme-primary-rgb, 6 224 91) / .14); color: var(--color-primary, #06e05b); }
.xb-badge--warn { background: rgba(255, 181, 71, .14); color: #ffb547; }
.xb-badge--err { background: rgba(255, 97, 112, .14); color: #ff6170; }
.xb-badge--info { background: rgba(90, 174, 255, .14); color: #5aaeff; }

.xb-account-link { color: var(--color-primary, #06e05b); font-weight: 700; font-size: 13px; text-decoration: none; }
.xb-account-link:hover { text-decoration: underline; }
.xb-account-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* Ícone "Minha conta" no topo: logo depois de Depositar (saldo = 1, Depositar = 2, Sacar/Sair = 4) */
.buttons-container .xb-account-btn { order: 3; margin-left: 6px; flex-shrink: 0; }
.buttons-container .xb-account-btn.is-active { color: var(--color-primary, #06e05b); }
.xb-account-btn__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    object-fit: cover;
    /* foto em destaque: aro na cor principal do site + brilho suave */
    border: 2px solid var(--color-primary, #06e05b);
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 0 12px rgb(var(--theme-primary-rgb, 6 224 91) / .55);
    transition: box-shadow .2s, transform .2s;
}
.xb-account-btn:hover .xb-account-btn__avatar,
.xb-account-btn.is-active .xb-account-btn__avatar {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 0 0 4px rgb(var(--theme-primary-rgb, 6 224 91) / .35), 0 0 16px rgb(var(--theme-primary-rgb, 6 224 91) / .7);
    transform: scale(1.04);
}
.xb-side-avatar { display: block; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .5); }
/* Topo do celular (logado ou não): o presente sai do topo (as promoções ficam em "Prêmios" na
   barra de baixo, com o mesmo número). Sobra espaço para logo, saldo, Depositar e a foto de perfil
   (ou Entrar e Registre-se). */
@media (max-width: 639px) {
    .header-promo-gift-button { display: none; }
    .WBv-9 .BDebc { padding-left: 26px; } /* o recuo era o espaço do presente; assim o logo fica na margem de 16px */
    .buttons-container .xb-account-btn { width: 36px; margin-left: 8px; }
    .xb-account-btn__avatar { width: 32px; height: 32px; }
}
/* Celulares muito estreitos (< 350px): Depositar vira só o "+" */
@media (max-width: 349px) {
    body[data-authenticated="1"] .btn-deposit .YsXp7 > span { display: none; }
}
.xb-prizes-badge { top: 4px; right: 6px; }

/* Minha conta: abas e aba Afiliação */
.xb-account-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); overflow-x: auto; scrollbar-width: none; }
.xb-account-tabs::-webkit-scrollbar { display: none; }
.xb-account-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.xb-account-tabs a:hover { color: #fff; }
.xb-account-tabs a.is-active { color: #fff; border-bottom-color: var(--color-primary, #06e05b); }

.xb-aff-stats { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .xb-aff-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xb-aff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xb-aff-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .24); }
.xb-aff-stat span { color: rgba(255, 255, 255, .6); font-size: 12.5px; font-weight: 600; }
.xb-aff-stat strong { color: #fff; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xb-aff-stat small { color: rgba(255, 255, 255, .45); font-size: 11.5px; line-height: 1.35; }
.xb-aff-stat.is-main { border-color: rgb(var(--theme-primary-rgb, 6 224 91) / .45); background: rgb(var(--theme-primary-rgb, 6 224 91) / .08); }
.xb-aff-stat.is-main strong { color: var(--color-primary, #06e05b); }

.xb-aff-copy { display: flex; gap: 8px; }
.xb-aff-copy input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.xb-aff-copy .xb-btn { flex-shrink: 0; }

.xb-aff-rates { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xb-aff-rates > div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); }
.xb-aff-rates span { color: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 600; }
.xb-aff-rates strong { color: #fff; font-size: 22px; font-weight: 800; }
.xb-aff-rates small { color: rgba(255, 255, 255, .45); font-size: 11.5px; line-height: 1.35; }

.xb-activity__amount.is-positive { color: var(--color-primary, #06e05b); }
.xb-activity__amount.is-negative { color: #ff6170; }

.xb-aff-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.xb-aff-pager a { color: var(--color-primary, #06e05b); font-weight: 700; text-decoration: none; }

.xb-aff-notice { padding: 12px 14px; border-radius: 12px; background: rgba(255, 181, 71, .12); color: #ffcf87; font-size: 13.5px; line-height: 1.45; }
.xb-aff-how { margin: 0; padding-left: 18px; color: rgba(255, 255, 255, .7); font-size: 13.5px; line-height: 1.55; }
.xb-aff-how li + li { margin-top: 6px; }

/* Home no celular/tablet: banners em carrossel (views/home/index.php, [data-mobile-banners]) */
.xb-mbanner__track { scroll-behavior: smooth; overscroll-behavior-x: contain; border-radius: 12px; }
.xb-mbanner__slide { border-radius: 12px; overflow: hidden; }
.xb-mbanner__img { display: block; width: 100%; height: auto; object-fit: cover; background: rgba(255, 255, 255, .04); user-select: none; -webkit-user-drag: none; }
.xb-mbanner__dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.xb-mbanner__dot { position: relative; width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.xb-mbanner__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%);
    transition: width .25s, background .25s;
}
.xb-mbanner__dot.is-active::after { width: 18px; background: var(--color-primary, #06e05b); }
.xb-mbanner__dot:focus-visible { outline: 2px solid var(--color-primary, #06e05b); outline-offset: 1px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .xb-mbanner__track { scroll-behavior: auto; } .xb-mbanner__dot::after { transition: none; } }

/* Home no celular/tablet: carrossel de banners quase colado na fileira de atalhos.
   O vão vinha da margem do carrossel (8px), do gap do .home-main-feed (12px) e do topo
   de 18px do trilho dos atalhos (o selo HOT fica dentro do card, não precisa dele). */
@media (max-width: 1023px) {
    [data-mobile-banners] .xb-mbanner { margin-bottom: 0; }
    [data-mobile-banners] { margin-bottom: -12px; }
    .xb-mbanner__dots { margin-top: 4px; }
    .xb-mbanner__dot { height: 14px; }
    .home-vip-shortcuts-mobile .OzAm- { padding-top: 4px; }
    .home-vip-shortcuts-mobile,
    .home-vip-shortcuts-mobile .OzAm- { min-height: 134px; } /* card 128 + 4 em cima + 2 embaixo */
}

/* Home no celular/tablet: o card de imagem do Crash dá lugar ao "Maiores Ganhos" (views/home/index.php) */
.xb-crash-no-card .cass-aviator-live__card { display: none; }
/* O tema dava ao "Maiores Ganhos" mobile uma margem de (barra inferior + 10px) porque ele ficava no
   fim da página; logo abaixo do Crash isso só abre um vão até "Os jogos mais jogados" */
.xb-crash-no-card .mobile-biggest-wins-placement { margin-bottom: 0; }

/* ===== Chat de suporte ===== */
/* Painel do chat (views/partials/support_chat.php + js/support-chat.js), fora do #divPageLayout.
   z-index 990: acima do topo (90), da barra inferior (96), do "voltar ao topo" (960) e do aviso de
   cookies (60); abaixo da folha de login (.react-modal-sheet-root = 1000 !important no tema), dos
   popups do admin (1320) e dos toasts. Os atalhos flutuantes (1100) descem para baixo do painel
   enquanto ele está aberto, e o botão de suporte some (o chat já está na tela). */
.xb-chat [hidden],
.xb-chat-badge[hidden] { display: none !important; }
html.xb-chat-open .cass-floating-shortcuts { z-index: 980; }
html.xb-chat-open .cass-floating-shortcut--support { opacity: 0; visibility: hidden; pointer-events: none; }

.xb-chat-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 990;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .24);
    border-radius: 18px;
    background: var(--color-bg-primary, #001510);
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    transform-origin: 100% 100%;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.xb-chat.is-open .xb-chat-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.xb-chat-panel :focus { outline: none; }
.xb-chat-panel :focus-visible { outline: 2px solid var(--color-primary, #06e05b); outline-offset: 2px; }
.xb-chat-panel textarea:focus-visible,
.xb-chat-panel input:focus-visible { outline: none; } /* o campo já muda a cor da borda */

/* Cabeçalho: ícone | "Suporte" + ações | status embaixo, ocupando a largura toda */
.xb-chat-head {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    flex-shrink: 0;
    padding: 12px 12px 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background:
        radial-gradient(120% 170% at 0% 0%, rgb(var(--theme-primary-rgb, 6 224 91) / .2), transparent 62%),
        var(--color-bg-secondary, #003628);
}
.xb-chat-head__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .42);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 18px rgb(var(--theme-primary-rgb, 6 224 91) / .25);
}
.xb-chat-head__icon img { display: block; width: 38px; height: 38px; object-fit: contain; }
.xb-chat-head__title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}
.xb-chat-head__status {
    grid-column: 2 / 4;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
}
.xb-chat-head__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #06e05b);
    box-shadow: 0 0 0 3px rgb(var(--theme-primary-rgb, 6 224 91) / .2);
}
.xb-chat-head__status[data-chat-status=waiting] .xb-chat-head__dot { background: var(--color-warning, #ffc300); box-shadow: 0 0 0 3px rgba(255, 195, 0, .2); }
.xb-chat-head__status[data-chat-status=ended] .xb-chat-head__dot { background: rgba(255, 255, 255, .38); box-shadow: none; }
.xb-chat-head__actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 6px; }
.xb-chat-end {
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .86);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.xb-chat-end:hover { border-color: rgba(239, 68, 68, .65); background: rgba(239, 68, 68, .1); color: #ffa3a3; }
.xb-chat-x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.xb-chat-x:hover { background: rgba(255, 255, 255, .15); }

/* Mensagens */
.xb-chat-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 14px 12px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
    background:
        radial-gradient(90% 40% at 50% 0%, rgb(var(--theme-primary-rgb, 6 224 91) / .06), transparent 70%),
        var(--color-bg-primary, #001510);
}
.xb-chat-log { display: flex; flex-direction: column; gap: 10px; }
.xb-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; min-width: 0; }
.xb-chat-msg.is-cont { margin-top: -6px; }
.xb-chat-msg--user { align-self: flex-end; align-items: flex-end; }
.xb-chat-msg--system { align-self: center; align-items: center; max-width: 94%; }
.xb-chat-msg__meta { margin: 0 4px 3px; color: rgba(255, 255, 255, .5); font-size: 11px; line-height: 1.3; }
.xb-chat-msg__author { color: rgba(255, 255, 255, .82); font-weight: 700; }
.xb-chat-msg--agent .xb-chat-msg__author { color: var(--color-primary, #06e05b); }
.xb-chat-msg__bubble {
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px 16px 16px 5px;
    background: var(--surface, #14302a);
    color: #fff;
    font-size: 13.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.xb-chat-msg--agent .xb-chat-msg__bubble {
    border-color: rgb(var(--theme-primary-rgb, 6 224 91) / .35);
    background: linear-gradient(180deg, rgb(var(--theme-primary-rgb, 6 224 91) / .12), rgb(var(--theme-primary-rgb, 6 224 91) / .04)), var(--surface, #14302a);
}
.xb-chat-msg--user .xb-chat-msg__bubble {
    border-color: transparent;
    border-radius: 16px 16px 5px 16px;
    background: var(--color-primary, #06e05b);
    color: var(--color-button-text, #001510);
    font-weight: 600;
}
.xb-chat-msg--user.is-pending .xb-chat-msg__bubble { opacity: .6; }
.xb-chat-msg--system .xb-chat-msg__bubble {
    padding: 7px 12px;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    text-align: center;
}
.xb-chat-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: rgba(255, 255, 255, .45); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.xb-chat-divider::before,
.xb-chat-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }

/* Opções do bot */
.xb-chat-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xb-chat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .45);
    border-radius: 999px;
    background: rgb(var(--theme-primary-rgb, 6 224 91) / .08);
    color: var(--color-primary, #06e05b);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, filter .15s;
}
.xb-chat-chip:disabled { opacity: .5; cursor: default; }
.xb-chat-chip--link { border-color: transparent; background: var(--color-primary, #06e05b); color: var(--color-button-text, #001510); }
@media (hover: hover) {
    .xb-chat-chip:not(:disabled):hover { border-color: var(--color-primary, #06e05b); background: rgb(var(--theme-primary-rgb, 6 224 91) / .18); }
    .xb-chat-chip--link:hover { border-color: transparent; background: var(--color-primary, #06e05b); filter: brightness(1.08); }
}
.xb-chat-chip svg { flex-shrink: 0; }

/* "digitando…" e carregando */
.xb-chat-dots { display: inline-flex; align-items: center; gap: 4px; height: 19px; }
.xb-chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); animation: xb-chat-dot 1.1s ease-in-out infinite; }
.xb-chat-dots i:nth-child(2) { animation-delay: .15s; }
.xb-chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes xb-chat-dot { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.xb-chat-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0; color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.xb-chat-spin { width: 16px; height: 16px; border: 2px solid rgb(var(--theme-primary-rgb, 6 224 91) / .25); border-top-color: var(--color-primary, #06e05b); border-radius: 50%; animation: xb-chat-spin .8s linear infinite; }
@keyframes xb-chat-spin { to { transform: rotate(360deg); } }

/* Nome e e-mail do visitante para chamar um atendente */
.xb-chat-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 2px 0;
    padding: 14px;
    border: 1px solid rgb(var(--theme-primary-rgb, 6 224 91) / .3);
    border-radius: 14px;
    background: linear-gradient(180deg, rgb(var(--theme-primary-rgb, 6 224 91) / .08), transparent 70%), var(--surface, #14302a);
}
.xb-chat-contact__title { margin: 0; color: #fff; font-size: 13.5px; font-weight: 800; }
.xb-chat-contact__text { margin: -4px 0 2px; color: rgba(255, 255, 255, .62); font-size: 12px; line-height: 1.4; }
.xb-chat-field { display: flex; flex-direction: column; gap: 4px; color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 600; }
.xb-chat-field input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--surface-2, #2b3f3a);
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}
.xb-chat-field input:focus { border-color: rgb(var(--theme-primary-rgb, 6 224 91) / .6); }
.xb-chat-field input[aria-invalid=true] { border-color: rgba(239, 68, 68, .75); }
.xb-chat-field-error { margin: -4px 0 0; color: #ff8080; font-size: 11.5px; line-height: 1.35; }

/* Botões do painel */
.xb-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.xb-chat-btn:hover { filter: brightness(1.08); }
.xb-chat-btn:disabled { opacity: .55; cursor: default; filter: none; }
.xb-chat-btn--primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .1)), var(--color-button-bg, #06e05b);
    color: var(--color-button-text, #001510);
    box-shadow: 0 8px 22px rgb(var(--theme-primary-rgb, 6 224 91) / .22);
}
.xb-chat-btn--ghost { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; }
.xb-chat-btn--danger { background: #e5484d; color: #fff; }
.xb-chat-btn--block { width: 100%; }

/* Aviso de erro, campo de mensagem e fim da conversa */
.xb-chat-alert {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid rgba(239, 68, 68, .25);
    background: rgba(239, 68, 68, .12);
    color: #ffb4b4;
    font-size: 12.5px;
    line-height: 1.4;
}
.xb-chat-compose {
    display: flex;
    flex-shrink: 0;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: var(--color-bg-secondary, #003628);
}
.xb-chat-input {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    max-height: 102px; /* 4 linhas */
    margin: 0;
    padding: 10px 14px;
    overflow-y: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(0, 0, 0, .32);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    resize: none;
    transition: border-color .15s;
}
.xb-chat-input:focus { border-color: rgb(var(--theme-primary-rgb, 6 224 91) / .55); outline: none; }
.xb-chat-input::placeholder { color: rgba(255, 255, 255, .45); }
.xb-chat-send {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary, #06e05b);
    color: var(--color-button-text, #001510);
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.xb-chat-send:not(:disabled):hover { transform: scale(1.06); }
.xb-chat-send:disabled { opacity: .35; cursor: default; }
.xb-chat-end-box {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: var(--color-bg-secondary, #003628);
    text-align: center;
}
.xb-chat-end-box p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.45; }
.xb-chat-end-box--fatal p { color: #ffb4b4; }
.xb-chat-end-box__art { display: none; }
.xb-chat-panel.is-empty-end .xb-chat-scroll { display: none; }
.xb-chat-panel.is-empty-end .xb-chat-end-box {
    flex: 1 1 auto;
    justify-content: center;
    gap: 14px;
    border-top: 0;
    background: radial-gradient(70% 45% at 50% 42%, rgb(var(--theme-primary-rgb, 6 224 91) / .08), transparent 70%), var(--color-bg-primary, #001510);
}
.xb-chat-panel.is-empty-end .xb-chat-end-box__art { display: block; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.xb-chat-panel.is-empty-end .xb-chat-end-box p { max-width: 260px; font-size: 14px; }

/* Confirmação de "Encerrar conversa" (dentro do painel) */
.xb-chat-confirm {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 10, 7, .74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.xb-chat-confirm__card {
    width: 100%;
    max-width: 300px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: var(--surface, #14302a);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    text-align: center;
}
.xb-chat-confirm__title { margin: 0 0 6px; color: #fff; font-size: 15px; font-weight: 800; }
.xb-chat-confirm__text { margin: 0 0 14px; color: rgba(255, 255, 255, .65); font-size: 12.5px; line-height: 1.45; }
.xb-chat-confirm__actions { display: flex; gap: 8px; }
.xb-chat-confirm__actions .xb-chat-btn { flex: 1 1 0; }

/* Selo de respostas novas (botão flutuante e atalho "Suporte" do menu) */
.xb-chat-badge {
    position: absolute;
    z-index: 30;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4338;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 10px rgba(239, 67, 56, .9);
    pointer-events: none;
}
.cass-floating-shortcut--support .xb-chat-badge { top: 6px; right: 6px; }
.sidebar-support-shortcut .xb-chat-badge { top: 50%; right: 64px; transform: translateY(-50%); }

/* Links de texto que abrem o chat (minha conta, afiliação, termos, rodapé) */
.xb-chat-link { color: var(--color-primary, #06e05b); font-weight: 700; text-decoration: none; cursor: pointer; }
.xb-chat-link:hover { text-decoration: underline; }

/* Tablet: a barra inferior continua visível; o painel fica acima dela */
@media (min-width: 640px) and (max-width: 1023px) {
    .xb-chat-panel {
        bottom: calc(var(--mobile-nav-h, 68px) + 12px + env(safe-area-inset-bottom));
        max-height: calc(100vh - var(--mobile-nav-h, 68px) - 28px - env(safe-area-inset-bottom));
        max-height: calc(100dvh - var(--mobile-nav-h, 68px) - 28px - env(safe-area-inset-bottom));
    }
}

/* Celular: tela cheia, com as áreas seguras do aparelho; a página atrás não rola */
@media (max-width: 639px) {
    .xb-chat-panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: none;
        border: 0;
        border-radius: 0;
        transform: translateY(24px);
        transform-origin: 50% 100%;
    }
    /* com o teclado aberto o JS passa a altura visível (visualViewport) */
    .xb-chat.has-vv .xb-chat-panel { top: var(--xb-chat-top, 0px); bottom: auto; height: var(--xb-chat-vh, 100%); }
    html.xb-chat-open,
    html.xb-chat-open body { overflow: hidden !important; }
    .xb-chat-head {
        padding-top: calc(12px + env(safe-area-inset-top));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }
    .xb-chat-scroll { padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
    .xb-chat-compose,
    .xb-chat-end-box { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    .xb-chat-msg { max-width: 88%; }
    .xb-chat-input,
    .xb-chat-field input { font-size: 16px; } /* < 16px faz o iPhone dar zoom ao focar */
}

@media (prefers-reduced-motion: reduce) {
    .xb-chat-panel,
    .xb-chat.is-open .xb-chat-panel { transform: none; transition: none; }
    .xb-chat-dots i,
    .xb-chat-spin { animation: none; }
}

/* ===== Stories da home (Aparência › Stories da home) ===== */
/* Aro da bolinha: cor principal; depois de ver todas as telas (neste aparelho), cinza */
.home-page-shell .xb-story-ring { background: var(--color-primary, #06e05b); transition: background .2s; }
.home-page-shell .xb-story-ring.is-seen { background: rgba(255, 255, 255, .22); }
/* Imagem deitada (banner antigo): aparece inteira, com o fundo desfocado em volta */
.story-viewer-frame.is-contain { background: transparent; }
.story-viewer-frame.is-contain .story-viewer-media { object-fit: contain; }
/* Botão do link da tela (embaixo, como nos status) */
.xb-story-cta {
    position: absolute;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 48px);
    padding: 12px 18px 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: #0b1410;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    -webkit-tap-highlight-color: transparent;
}
.xb-story-cta span { overflow: hidden; text-overflow: ellipsis; }
.xb-story-cta svg { flex-shrink: 0; }
.xb-story-cta:active { transform: translateX(-50%) scale(.97); }

/* ===== Torneios e missões ===== */
/* Seções do fim da home, /torneios e /missoes (views/partials/tournaments_missions.php, js/tournaments-missions.js).
   Card de torneio: imagem 16:9 + selo de participantes, título, prêmio, contagem em 4 caixas e botão.
   Card de missão: imagem quadrada, título, recompensa em bônus, meta, progresso e botão por estado. */
.xb-tm-home { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xb-tm-section { min-width: 0; }
.xb-tm-track { padding: 1px 0 4px; }
.xb-tm-fade.is-off { opacity: 0; }

/* Larguras dos slides do carrossel (celular: 1,6 torneio e 2,4 missões por tela) */
.xb-tm-slide { display: flex; min-width: 0; flex: 0 0 auto; }
.xb-tm-slide--tour { width: 63%; }
.xb-tm-slide--mission { width: 41%; }
@media (min-width: 480px) {
    .xb-tm-slide--tour { width: 46%; }
    .xb-tm-slide--mission { width: 30%; }
}
@media (min-width: 640px) {
    .xb-tm-home { gap: 24px; }
    .xb-tm-slide--tour { width: 210px; }
    .xb-tm-slide--mission { width: 168px; }
}
@media (min-width: 1024px) {
    .xb-tm-slide--tour { width: 220px; }
    .xb-tm-slide--mission { width: 180px; }
}

/* Card */
.xb-tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 2px solid var(--color-primary, #06e05b);
    border-radius: 12px;
    background: var(--color-game-card-bg, #003628);
    color: var(--color-texts, #fff);
    text-align: left;
    transition: filter .15s ease, box-shadow .15s ease;
}
.xb-tm-card:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgb(var(--theme-primary-rgb, 6 224 91) / .14); }
.xb-tm-card:focus { outline: none; }
.xb-tm-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* a moldura fica em position:absolute: imagem de qualquer tamanho não estica o card (16:9 / 1:1 fixos) */
.xb-tm-card__media {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.xb-tm-card--mission .xb-tm-card__media { aspect-ratio: 1 / 1; }
.xb-tm-frame {
    position: absolute;
    inset: 6px 6px 0;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #04211a;
}
.xb-tm-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    -webkit-user-drag: none;
}
.xb-tm-card:hover .xb-tm-frame img { transform: scale(1.05); }

/* Sem imagem: arte do tema (troféu / alvo) */
.xb-tm-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    color: var(--color-primary, #06e05b);
    text-align: center;
    background:
        radial-gradient(circle at 50% 34%, rgb(var(--theme-primary-rgb, 6 224 91) / .3), transparent 62%),
        linear-gradient(160deg, #0b3a2c, #04211a);
}
.xb-tm-art svg { width: auto; height: 42%; max-height: 72px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.xb-tm-art.is-mission svg { height: 34%; }
.xb-tm-art strong { color: #fff; font-size: 15px; font-weight: 800; line-height: 1; }
.xb-tm-art small { color: rgba(255, 255, 255, .78); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.xb-tm-art.is-mission small { color: var(--color-warning, #ffc300); }

/* Selo de participantes */
.xb-tm-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.xb-tm-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.xb-tm-badge.is-lg { top: 10px; right: 10px; gap: 5px; padding: 4px 9px; font-size: 12px; }
.xb-tm-badge.is-lg svg { width: 14px; height: 14px; }

.xb-tm-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px 10px 10px;
    background: var(--color-game-balloon-bg, #003628);
}
.xb-tm-card__title {
    display: -webkit-box;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    color: var(--color-game-title, #fff);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.xb-tm-card__title a { color: inherit; text-decoration: none; }
.xb-tm-card__title a:hover { color: var(--color-primary, #06e05b); }
.xb-tm-prize {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--color-primary, #06e05b);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.xb-tm-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; min-width: 0; }

/* Contagem regressiva (4 caixas) */
.xb-tm-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
}
.xb-tm-label svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--color-primary, #06e05b); }
.xb-tm-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.xb-tm-count__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 40px;
    padding: 6px 2px 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.xb-tm-count__num { color: #fff; font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.xb-tm-count__unit { color: rgba(255, 255, 255, .6); font-size: 9px; font-weight: 600; line-height: 1; text-transform: lowercase; }
.xb-tm-ended {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .34);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .8);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.xb-tm-ended svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255, 255, 255, .55); }
.xb-tm-ended.is-result { color: #ffd166; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.xb-tm-ended.is-result svg { color: #ffb11a; }

/* Botões (mesmo botão inclinado do tema) */
.xb-tm-actions,
.xb-tm-joined { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xb-tm-btn {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-button-text, #001510);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.xb-tm-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 8px;
    background-color: var(--color-button-bg, #06e05b);
    background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .22));
    transform: skew(-20deg);
    transition: filter .15s ease;
}
.xb-tm-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.xb-tm-btn__icon { width: 14px; height: 14px; flex-shrink: 0; }
.xb-tm-btn:hover::before { filter: brightness(1.1); }
.xb-tm-btn:focus { outline: none; }
.xb-tm-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xb-tm-btn[aria-busy=true] { cursor: progress; }
.xb-tm-btn[aria-busy=true]::before { filter: saturate(.55) brightness(.9); }
.xb-tm-btn.is-soft { color: var(--color-primary, #06e05b); }
.xb-tm-btn.is-soft::before {
    background-color: rgb(var(--theme-primary-rgb, 6 224 91) / .14);
    background-image: none;
    box-shadow: inset 0 0 0 1px rgb(var(--theme-primary-rgb, 6 224 91) / .5);
}
.xb-tm-btn.is-claim { color: #271600; }
.xb-tm-btn.is-claim::before {
    background-color: #ffb11a;
    background-image: linear-gradient(#ffd95b, #ffb11a);
    box-shadow: 0 0 16px rgba(255, 177, 26, .35);
}
.xb-tm-btn.is-done,
.xb-tm-btn.is-off { cursor: default; }
.xb-tm-btn.is-done { color: var(--color-primary, #06e05b); }
.xb-tm-btn.is-done::before,
.xb-tm-btn.is-off::before { background-color: rgba(255, 255, 255, .07); background-image: none; filter: none; }
.xb-tm-btn.is-off { color: rgba(255, 255, 255, .55); }
.xb-tm-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 0 0;
    color: var(--color-primary, #06e05b);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
}
.xb-tm-link:hover { text-decoration: underline; }
.xb-tm-link__icon { width: 12px; height: 12px; flex-shrink: 0; }
.xb-tm-card a:focus { outline: none; }
.xb-tm-card a:focus-visible,
.xb-tm-page a:focus-visible,
.xb-tm-section a:focus-visible { outline: 2px solid var(--color-primary, #06e05b); outline-offset: 2px; border-radius: 4px; }

/* Missão: recompensa, meta, progresso e prazo */
.xb-tm-reward {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    color: var(--color-warning, #ffc300);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}
.xb-tm-reward svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: -1px; }
.xb-tm-goal { margin: 0; color: rgba(255, 255, 255, .74); font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.xb-tm-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.xb-tm-conds { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .58); font-size: 10px; line-height: 1.35; }
.xb-tm-conds li { position: relative; padding-left: 9px; }
.xb-tm-conds li::before {
    content: "";
    position: absolute;
    top: .5em;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary, #06e05b);
    opacity: .75;
}
.xb-tm-progress { display: grid; gap: 4px; }
.xb-tm-progress__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: rgba(255, 255, 255, .62);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.xb-tm-progress__row strong { color: #ffb11a; font-size: 11px; font-variant-numeric: tabular-nums; }
.xb-tm-progress__bar { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.xb-tm-progress__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb11a, var(--color-primary, #06e05b));
    box-shadow: 0 0 10px rgba(255, 177, 26, .25);
    transition: width .4s ease;
}
.xb-tm-deadline { display: flex; align-items: center; gap: 4px; margin: 0; color: rgba(255, 255, 255, .64); font-size: 10px; font-weight: 700; line-height: 1.2; }
.xb-tm-deadline svg { width: 11px; height: 11px; flex-shrink: 0; }
.xb-tm-deadline.is-over { color: #ff8a8a; }

/* Páginas /torneios e /missoes */
.xb-tm-page-head h1 { margin: 0; }
.xb-tm-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.xb-tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.xb-tm-chip svg { width: 14px; height: 14px; color: var(--color-primary, #06e05b); }
.xb-tm-chip.is-claim { background: rgba(255, 177, 26, .14); color: #ffd166; }
.xb-tm-chip.is-claim svg { color: #ffb11a; }
.xb-tm-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xb-tm-block__head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-titles, #fff);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
}
.xb-tm-block__count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgb(var(--theme-primary-rgb, 6 224 91) / .15);
    color: var(--color-primary, #06e05b);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}
.xb-tm-block__head p { margin: 3px 0 0; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.4; }
.xb-tm-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xb-tm-cell { display: flex; min-width: 0; }
@media (min-width: 640px) {
    .xb-tm-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xb-tm-grid--tour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .xb-tm-grid--tour { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .xb-tm-grid--mission { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xb-tm-grid--tour { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xb-tm-grid--mission { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .xb-tm-grid--tour { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xb-tm-grid--mission { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.xb-tm-notice { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.xb-tm-notice__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: rgb(var(--theme-primary-rgb, 6 224 91) / .12);
    color: var(--color-primary, #06e05b);
}
.xb-tm-notice__icon svg { width: 28px; height: 28px; }

/* Página de um torneio: topo */
.xb-tm-hero {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 10px;
    border: 2px solid var(--color-primary, #06e05b);
    border-radius: 16px;
    background:
        radial-gradient(120% 120% at 100% 0%, rgb(var(--theme-primary-rgb, 6 224 91) / .12), transparent 55%),
        var(--color-game-card-bg, #003628);
}
.xb-tm-hero__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #04211a; }
.xb-tm-hero__media img,
.xb-tm-hero__media .xb-tm-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.xb-tm-hero__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 2px 2px; }
.xb-tm-status {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.2;
    text-transform: uppercase;
}
.xb-tm-status__dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.xb-tm-status.is-andamento { background: rgb(var(--theme-primary-rgb, 6 224 91) / .15); color: var(--color-primary, #06e05b); }
.xb-tm-status.is-andamento .xb-tm-status__dot { animation: xb-tm-pulse 1.6s ease-in-out infinite; }
.xb-tm-status.is-agendado { background: rgba(0, 150, 255, .15); color: #74c7ff; }
.xb-tm-status.is-pago { background: rgba(255, 177, 26, .15); color: #ffd166; }
@keyframes xb-tm-pulse { 50% { opacity: .35; } }
.xb-tm-hero__title { margin: 0; color: #fff; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.xb-tm-hero__prize { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--color-primary, #06e05b); font-size: clamp(16px, 1.8vw, 20px); font-weight: 800; line-height: 1.25; }
.xb-tm-hero__prize svg { width: 22px; height: 22px; flex-shrink: 0; }
.xb-tm-hero__period { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: rgba(255, 255, 255, .62); font-size: 12px; line-height: 1.45; }
.xb-tm-hero__period svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.xb-tm-hero__foot { margin-top: auto; padding-top: 4px; }
.xb-tm-hero .xb-tm-foot { gap: 10px; }
.xb-tm-hero .xb-tm-count { gap: 8px; }
.xb-tm-hero .xb-tm-count__box { gap: 5px; min-height: 64px; padding: 10px 4px 8px; border-radius: 10px; }
.xb-tm-hero .xb-tm-count__num { font-size: 26px; }
.xb-tm-hero .xb-tm-count__unit { font-size: 11px; }
.xb-tm-hero .xb-tm-label { font-size: 11px; }
.xb-tm-hero .xb-tm-label svg { width: 14px; height: 14px; }
.xb-tm-hero .xb-tm-ended { min-height: 64px; font-size: 13px; }
.xb-tm-hero .xb-tm-ended svg { width: 18px; height: 18px; }
.xb-tm-hero .xb-tm-btn { height: 44px; font-size: 13px; }
.xb-tm-hero .xb-tm-btn::before { border-radius: 10px; }
.xb-tm-hero .xb-tm-link { padding-top: 6px; font-size: 12px; }
@media (min-width: 768px) {
    .xb-tm-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; padding: 14px; }
    .xb-tm-hero__info { padding: 6px 12px 4px 0; }
}

/* Página de um torneio: ranking, prêmios e regras */
/* celular: ranking, prêmios e regras, um embaixo do outro; desktop: (ranking + regras) | prêmios */
.xb-tm-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.xb-tm-main,
.xb-tm-side { display: contents; }
.xb-tm-panel--ranking { order: 1; }
.xb-tm-panel--prizes { order: 2; }
.xb-tm-panel--rules { order: 3; }
@media (min-width: 1024px) {
    .xb-tm-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .xb-tm-main,
    .xb-tm-side { display: grid; gap: 16px; min-width: 0; }
}
.xb-tm-panel {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: var(--surface, #14302a);
    scroll-margin-top: 90px;
}
.xb-tm-panel:focus { outline: none; }
@media (min-width: 640px) { .xb-tm-panel { padding: 18px; } }
.xb-tm-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; }
.xb-tm-panel__head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
.xb-tm-panel__head h2 svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary, #06e05b); }
.xb-tm-panel__hint {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .68);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.xb-tm-panel__lead { margin: 0 0 10px; color: rgba(255, 255, 255, .66); font-size: 13px; line-height: 1.5; }
.xb-tm-note { margin: 10px 0 0; color: rgba(255, 255, 255, .52); font-size: 12px; line-height: 1.5; }
.xb-tm-note strong { color: #fff; }
.xb-tm-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.xb-tm-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.xb-tm-table th {
    padding: 2px 10px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.xb-tm-table td { padding: 9px 10px; background: rgba(0, 0, 0, .2); color: rgba(255, 255, 255, .88); font-weight: 600; white-space: nowrap; }
.xb-tm-table td:first-child { border-radius: 8px 0 0 8px; }
.xb-tm-table td:last-child { border-radius: 0 8px 8px 0; }
.xb-tm-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.xb-tm-table .is-pos { width: 1%; }
.xb-tm-table .is-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.xb-tm-table .is-prize { color: var(--color-primary, #06e05b); font-weight: 800; }
.xb-tm-table .is-prize small { color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 700; }
.xb-tm-rank {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 800;
}
.xb-tm-table .is-top-1 .xb-tm-rank { background: linear-gradient(#ffe27a, #ffb11a); color: #2b1600; }
.xb-tm-table .is-top-2 .xb-tm-rank { background: linear-gradient(#f1f5f9, #b6c0ca); color: #1d2630; }
.xb-tm-table .is-top-3 .xb-tm-rank { background: linear-gradient(#f3b98a, #c26b2c); color: #2b1300; }
.xb-tm-table tr.is-me td { background: rgb(var(--theme-primary-rgb, 6 224 91) / .16); color: #fff; }
.xb-tm-table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--color-primary, #06e05b); }
.xb-tm-you {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-primary, #06e05b);
    color: var(--color-button-text, #001510);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.xb-tm-dash { color: rgba(255, 255, 255, .35); }
.xb-tm-table--prizes td { padding: 8px 10px; }
.xb-tm-mypos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgb(var(--theme-primary-rgb, 6 224 91) / .14);
    box-shadow: inset 3px 0 0 var(--color-primary, #06e05b);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 600;
}
.xb-tm-mypos strong { color: var(--color-primary, #06e05b); font-size: 15px; font-weight: 800; }
.xb-tm-empty-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 16px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .66);
    font-size: 13px;
    line-height: 1.45;
}
.xb-tm-empty-line svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary, #06e05b); opacity: .8; }
.xb-tm-rules__desc { margin: 0 0 12px; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.xb-tm-rules { display: grid; gap: 10px; margin: 0; }
.xb-tm-rules > div { display: grid; gap: 2px; }
.xb-tm-rules dt { color: rgba(255, 255, 255, .5); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.xb-tm-rules dd { margin: 0; color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.xb-tm-rules dd strong { color: #fff; }

/* /missoes: como funciona */
.xb-tm-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xb-tm-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.xb-tm-steps__n {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary, #06e05b);
    color: var(--color-button-text, #001510);
    font-size: 13px;
    font-weight: 900;
}
.xb-tm-steps strong { display: block; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.3; }
.xb-tm-steps p { margin: 2px 0 0; color: rgba(255, 255, 255, .62); font-size: 12px; line-height: 1.45; }
.xb-tm-how__notes { margin: 12px 0 0; padding: 0 0 0 18px; color: rgba(255, 255, 255, .6); font-size: 12px; line-height: 1.6; list-style: disc; }
.xb-tm-how__notes a { color: var(--color-primary, #06e05b); text-decoration: underline; }
@media (min-width: 768px) {
    .xb-tm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Celular: tabelas mais justas (4 colunas cabem sem rolar) */
@media (max-width: 639px) {
    .xb-tm-table { font-size: 12px; }
    .xb-tm-table th { padding: 2px 6px; }
    .xb-tm-table td { padding: 8px 6px; }
    .xb-tm-table .is-name { max-width: 110px; }
    .xb-tm-rank { min-width: 28px; height: 22px; padding: 0 4px; font-size: 11px; }
    .xb-tm-you { padding: 2px 7px; font-size: 10px; }
}

/* Celular estreito: cards um pouco mais compactos */
@media (max-width: 400px) {
    .xb-tm-card__body { gap: 5px; padding: 7px 8px 9px; }
    .xb-tm-card__title { font-size: 11px; }
    .xb-tm-prize { font-size: 11px; }
    .xb-tm-count { gap: 3px; }
    .xb-tm-count__num { font-size: 14px; }
    .xb-tm-count__unit { font-size: 8px; }
    .xb-tm-btn { height: 30px; font-size: 10px; }
    .xb-tm-hero .xb-tm-count__num { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .xb-tm-card,
    .xb-tm-frame img,
    .xb-tm-btn::before,
    .xb-tm-progress__bar > span { transition: none; }
    .xb-tm-card:hover .xb-tm-frame img { transform: none; }
    .xb-tm-status.is-andamento .xb-tm-status__dot { animation: none; }
}

/* ===== Manutenção: faixas do topo e aviso do cadastro =====
   Faixas (views/maintenance/strips.php, logo abaixo do cabeçalho; rolam com a página, o cabeçalho continua fixo):
   --running serviço parado agora, --upcoming programada com aviso, --admin "modo manutenção" de quem está no painel.
   O "×" e a contagem ("volta em 01:23:45") aparecem com o js/pages/maintenance.js; sem ele, a previsão em texto.
   A tela do site inteiro e o aviso de serviço ficam no css/pages/maintenance.css. */
.xb-maint-strips { position: relative; z-index: 1; }
.xb-maint-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
}
.xb-maint-strip--running { background: linear-gradient(90deg, rgba(255, 195, 0, .2), rgba(255, 195, 0, .07)); }
.xb-maint-strip--upcoming { background: linear-gradient(90deg, rgba(0, 150, 255, .2), rgba(0, 150, 255, .07)); }
.xb-maint-strip--admin { background: linear-gradient(90deg, rgba(var(--primary-rgb), .2), rgba(var(--primary-rgb), .06)); }
.xb-maint-strip__icon { flex-shrink: 0; margin-top: 1px; }
.xb-maint-strip--running .xb-maint-strip__icon { color: var(--color-warning, #ffc300); }
.xb-maint-strip--upcoming .xb-maint-strip__icon { color: #5cb8ff; }
.xb-maint-strip--admin .xb-maint-strip__icon { color: var(--color-primary, #06e05b); }
.xb-maint-strip__body { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.xb-maint-strip__body strong { font-weight: 700; }
.xb-maint-strip__sep { color: rgba(255, 255, 255, .45); }
.xb-maint-strip__msg { display: block; margin-top: 1px; color: rgba(255, 255, 255, .72); font-size: 12px; }
.xb-maint-strip__links { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; margin-left: 4px; }
.xb-maint-strip__links a { color: var(--color-primary, #06e05b); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.xb-maint-strip__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -4px -6px -4px 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}
.xb-maint-strip__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.xb-maint-strip a:focus-visible,
.xb-maint-strip__close:focus-visible { outline: 2px solid var(--color-primary, #06e05b); outline-offset: 2px; }
.xb-maint-strip__close[hidden],
.xb-maint-eta__clock[hidden] { display: none; }
.xb-maint-eta__clock { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
    .xb-maint-strip { gap: 8px; padding: 8px 12px; font-size: 12px; }
    .xb-maint-strip__msg { font-size: 11.5px; }
    .xb-maint-strip__links { display: flex; margin: 2px 0 0; }
}
@media (min-width: 1024px) {
    .xb-maint-strip { padding: 9px 28px; }
}

/* Cadastro em manutenção (folha de login/cadastro, footer.php): aviso no topo do formulário e botão desligado */
.xb-maint-inline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 195, 0, .4);
    border-radius: 12px;
    background: rgba(255, 195, 0, .1);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
}
.xb-maint-inline__icon { flex-shrink: 0; margin-top: 1px; color: var(--color-warning, #ffc300); }
.xb-maint-inline__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: rgba(255, 255, 255, .78); }
.xb-maint-inline__body strong { color: #fff; font-size: 14px; }
.xb-maint-inline__eta { color: #fff; font-weight: 600; }
.xb-maint-disabled-btn {
    border: 1px dashed rgba(255, 255, 255, .25);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    cursor: not-allowed;
}