/* ==========================================================================
   BraveX Online - tema rústico escuro com azul do logo
   Camada de estilo sobre o app.css (gerado em escuro a partir do default).
   ========================================================================== */

:root {
   --bx-night: #07080c; 
    --bx-deep: #0d0f15;
    --bx-surface: rgba(17, 19, 26, .88);
    --bx-surface-solid: #12141b;
    --bx-surface-2: rgba(28, 31, 41, .75);
    --bx-line: rgba(255, 255, 255, .08);
    --bx-line-strong: rgba(255, 255, 255, .16);
    --bx-text: #d9dde6;
    --bx-muted: #8a909e;
    --bx-silver: #c9d0dc;
    --bx-silver-hi: #ffffff;
    --bx-silver-lo: #7d8597;
    --bx-accent: #3ea6ff;
    --bx-accent-hi: #86c8ff;
    --bx-accent-deep: #1d6fe0;
    --bx-accent-glow: rgba(62, 166, 255, .4);
    --bx-accent-soft: rgba(62, 166, 255, .12);
    --bx-online: #4ade80;
    --bx-radius: 10px;
    --bx-radius-lg: 18px;
    --bx-font-title: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --bx-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --bx-silver-text: linear-gradient(180deg, #ffffff 0%, #e6ebf3 60%, #b9c3d4 100%);
    --bx-silver-fill: linear-gradient(180deg, #5cb8ff 0%, #2f8cf5 55%, #1d6fe0 100%);
    --bx-ease: cubic-bezier(.77, 0, .18, 1);
    --bx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --body-font-family: var(--bx-font-body);
    --body-bg: var(--bx-night);
    --body-color: var(--bx-text);
    --link-color: var(--bx-accent-hi);
    --link-hover-color: #ffffff;
    --link-color-rgb: 134, 200, 255;
    --link-hover-color-rgb: 255, 255, 255;
    --border-color: var(--bx-line);
    --heading-color: var(--bx-silver-hi);
}

html {
    background: var(--bx-night);
}

body,
.bx-body {
    font-family: var(--bx-font-body);
    color: var(--bx-text);
    background: transparent;
}

.bx-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(5, 8, 17, .25) 0%, rgba(5, 8, 17, .7) 60%, var(--bx-night) 100%),
        url(../images/bravex-hero.webp) center top / cover no-repeat;
    filter: blur(16px) brightness(.5) saturate(1.1);
    transform: scale(1.08);
    pointer-events: none;
}

::selection {
    background: var(--bx-accent);
    color: #fff;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bx-font-title);
    color: var(--bx-silver-hi);
    letter-spacing: .02em;
}

a {
    color: var(--bx-accent-hi);
}

a:hover {
    color: #fff;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(174, 192, 226, .3) transparent;
}

.text-muted {
    color: var(--bx-muted) !important;
}

/* --------------------------------------------------------------------------
   Botoes reutilizaveis
   -------------------------------------------------------------------------- */

.bx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.6rem;
    border-radius: var(--bx-radius);
    border: 1px solid var(--bx-line-strong);
    background: rgba(10, 16, 32, .55);
    color: var(--bx-silver-hi);
    font-family: var(--bx-font-body);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    backdrop-filter: blur(6px);
}

.bx-btn:hover {
    color: #fff;
    border-color: var(--bx-silver);
    background: rgba(30, 44, 78, .7);
    transform: translateY(-1px);
}

.bx-btn:focus-visible {
    outline: 2px solid var(--bx-accent-hi);
    outline-offset: 3px;
}

.bx-btn-primary {
    border-color: rgba(255, 255, 255, .6);
    background: var(--bx-silver-fill);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 30px -10px rgba(168, 196, 255, .55);
}

.bx-btn-primary:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #dbe4f4 50%, #a9b6d1 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset, 0 14px 36px -10px rgba(168, 196, 255, .8);
}

.bx-btn-ghost {
    background: rgba(8, 13, 26, .45);
}

.bx-btn-sm {
    min-height: 38px;
    padding: .45rem 1rem;
    font-size: .85rem;
}

.bx-btn-block {
    width: 100%;
}

.bx-btn-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.bx-btn[disabled],
.bx-btn.disabled {
    opacity: .6;
    pointer-events: none;
}

/* Botoes do Bootstrap seguem a paleta */

.btn-primary {
    --btn-color: #ffffff;
    --btn-bg: #c9d3e5;
    --btn-border-color: #e6ecf6;
    --btn-hover-color: #ffffff;
    --btn-hover-bg: #eef2f9;
    --btn-hover-border-color: #ffffff;
    --btn-active-color: #ffffff;
    --btn-active-bg: #b4c0d8;
    --btn-active-border-color: #ffffff;
    --btn-disabled-color: #ffffff;
    --btn-disabled-bg: #9aa6bf;
    --btn-disabled-border-color: #9aa6bf;
    color: #ffffff;
    background: var(--bx-silver-fill);
    border-color: rgba(255, 255, 255, .55);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #dbe4f4 50%, #a9b6d1 100%);
}

.btn-secondary {
    --btn-color: var(--bx-silver-hi);
    --btn-bg: rgba(22, 32, 58, .9);
    --btn-border-color: var(--bx-line-strong);
    --btn-hover-color: #fff;
    --btn-hover-bg: rgba(34, 48, 84, .95);
    --btn-hover-border-color: var(--bx-silver);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: rgba(5, 9, 19, .7);
    border: 1px solid var(--bx-line-strong);
    color: var(--bx-silver-hi);
    border-radius: var(--bx-radius);
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(8, 13, 28, .9);
    border-color: var(--bx-accent-hi);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(109, 155, 255, .22);
}

.form-control::placeholder {
    color: #5f6b85;
}

.form-label,
label {
    color: var(--bx-silver);
}

.form-select {
    --form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9d3e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

option {
    background: var(--bx-surface-solid);
    color: var(--bx-text);
}

/* --------------------------------------------------------------------------
   Layout interno (paginas do painel, rankings, downloads...)
   -------------------------------------------------------------------------- */

.bx-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bx-header {
    position: relative;
    z-index: 30;
}

.bx-navbar {
    position: sticky;
    top: 0;
    padding: .55rem 0;
    background: rgba(5, 8, 17, .72);
    border-bottom: 1px solid var(--bx-line);
    backdrop-filter: blur(12px);
}

.bx-navbar .container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bx-navbar-brand img {
    height: 44px;
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(109, 155, 255, .25));
}

.bx-navbar .nav-link {
    font-family: var(--bx-font-title);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-silver);
    padding: .55rem .85rem !important;
    border-radius: var(--bx-radius);
    position: relative;
}

.bx-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: .25rem;
    height: 1px;
    background: var(--bx-silver-fill);
    transition: left .3s ease, right .3s ease;
}

.bx-navbar .nav-link.dropdown-toggle::after {
    display: none;
}

.bx-navbar .nav-link:hover,
.bx-navbar .nav-link.show {
    color: #fff;
}

.bx-navbar .nav-link:hover::after {
    left: .85rem;
    right: .85rem;
}

.bx-navbar-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.bx-navbar .btn-header,
.bx-topbar .btn-header {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 38px;
    padding: 0 .9rem;
    color: var(--bx-silver-hi);
    border: 1px solid var(--bx-line-strong);
    border-radius: var(--bx-radius);
    background: rgba(10, 16, 32, .55);
    font-weight: 700;
    font-size: .85rem;
}

.bx-navbar .btn-header:hover,
.bx-navbar .btn-header.show,
.bx-topbar .btn-header:hover,
.bx-topbar .btn-header.show {
    color: #fff;
    border-color: var(--bx-silver);
    background: rgba(30, 44, 78, .75);
}

.bx-navbar .btn-header.btn-primary,
.bx-topbar .btn-header.btn-primary {
    color: #ffffff;
    background: var(--bx-silver-fill);
    border-color: rgba(255, 255, 255, .55);
}

.navbar-notifications-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.bx-navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid var(--bx-line-strong);
    border-radius: var(--bx-radius);
    background: rgba(10, 16, 32, .55);
    color: var(--bx-silver-hi);
}

.bx-navbar-toggle-icon {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.bx-navbar-toggle + .navbar-collapse + .bx-navbar-actions {
    margin-left: 0;
}

@media (max-width: 991.98px) {
    .bx-navbar .container {
        flex-wrap: wrap;
    }

    .bx-navbar .navbar-collapse {
        order: 10;
        flex-basis: 100%;
    }

    .bx-navbar .navbar-nav {
        padding: .5rem 0;
        border-top: 1px solid var(--bx-line);
        margin-top: .5rem;
    }

    .bx-navbar-actions {
        margin-left: 0;
    }
}

.dropdown-menu {
    --dropdown-bg: var(--bx-surface-solid);
    --dropdown-color: var(--bx-text);
    --dropdown-border-color: var(--bx-line-strong);
    --dropdown-link-color: var(--bx-text);
    --dropdown-link-hover-color: #fff;
    --dropdown-link-hover-bg: rgba(109, 155, 255, .14);
    --dropdown-link-active-bg: rgba(109, 155, 255, .24);
    background: var(--bx-surface-solid);
    border: 1px solid var(--bx-line-strong);
    border-radius: var(--bx-radius-lg);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

.dropdown-item {
    color: var(--bx-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background: rgba(109, 155, 255, .14);
}

.dropdown-auth {
    min-width: 300px;
    padding: 1rem;
}

.navbar-user-menu {
    min-width: 270px;
    padding: 0;
    overflow: hidden;
}

.navbar-user-header {
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: linear-gradient(135deg, rgba(109, 155, 255, .28), rgba(201, 211, 229, .08));
    border-bottom: 1px solid var(--bx-line);
}

.navbar-user-header-name {
    color: #fff;
    font-weight: 800;
}

.navbar-user-header-vip {
    color: #ffffff;
    background: var(--bx-silver-fill);
    border-radius: 999px;
    padding: .15rem .6rem;
    font-size: .72rem;
    font-weight: 800;
}

.navbar-user-expiry,
.navbar-user-balance,
.navbar-user-footer {
    border-color: var(--bx-line) !important;
}

.navbar-user-expiry,
.navbar-user-services-title {
    color: var(--bx-muted);
}

.navbar-user-balance-label,
.navbar-user-service {
    color: var(--bx-text);
}

.navbar-user-balance-value--coin {
    background: rgba(255, 193, 7, .14) !important;
    color: #ffd66b !important;
}

.navbar-user-balance-value--wallet {
    background: rgba(74, 222, 128, .12) !important;
    color: #86efac !important;
}

.navbar-user-service:hover {
    color: #fff;
    background: rgba(109, 155, 255, .12);
}

.bx-banner .container:empty,
.bx-banner .container > div:empty {
    display: none;
}

.bx-banner {
    padding-top: 1.25rem;
}

main {
    flex: 1;
    margin: 1.5rem 0 3rem;
}

.page {
    position: relative;
    background: var(--bx-surface);
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius-lg);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02) inset;
    backdrop-filter: blur(10px);
    padding: 1.5rem;
}

.page::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 230, 248, .7), transparent);
}

.page h1,
.page-title h1 {
    font-family: var(--bx-font-title);
    font-weight: 700;
    letter-spacing: .06em;
    background: var(--bx-silver-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page h3::before,
.page h3::after {
    border-top-color: var(--bx-line-strong) !important;
}

.page-tabs .nav-link {
    color: var(--bx-muted);
}

.page-tabs .nav-link:hover,
.page-tabs .nav-link.active {
    color: var(--bx-silver-hi);
    background: linear-gradient(to bottom, transparent calc(100% - 2px), var(--bx-silver) calc(100% - 2px));
}

.breadcrumb-item,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bx-muted) !important;
}

.card {
    --card-bg: rgba(10, 16, 32, .6);
    --card-border-color: var(--bx-line);
    background: rgba(10, 16, 32, .6);
    border-color: var(--bx-line);
    color: var(--bx-text);
}

.card .card-header,
.card-header {
    background: rgba(22, 32, 58, .7) !important;
    border-color: var(--bx-line) !important;
    color: var(--bx-silver-hi);
}

.table {
    --table-color: var(--bx-text);
    --table-bg: transparent;
    --table-border-color: var(--bx-line);
    --table-striped-bg: rgba(255, 255, 255, .025);
    --table-hover-bg: rgba(109, 155, 255, .07);
    color: var(--bx-text);
}

.table thead th {
    background: rgba(22, 32, 58, .8) !important;
    color: var(--bx-silver) !important;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modal-content {
    background: var(--bx-surface-solid);
    border: 1px solid var(--bx-line-strong);
    color: var(--bx-text);
}

.modal-header,
.modal-footer {
    border-color: var(--bx-line);
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

.swal2-popup {
    background: var(--bx-surface-solid) !important;
    border: 1px solid var(--bx-line-strong) !important;
    color: var(--bx-text) !important;
}

.swal2-title,
.swal2-html-container {
    color: var(--bx-silver-hi) !important;
}

.swal2-styled.swal2-confirm {
    background: var(--bx-silver-fill) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.ts-control,
.ts-dropdown {
    background: rgba(5, 9, 19, .9) !important;
    border-color: var(--bx-line-strong) !important;
    color: var(--bx-text) !important;
}

/* Rodape */

.bx-footer {
    border-top: 1px solid var(--bx-line);
    background: linear-gradient(180deg, rgba(5, 8, 17, .4), rgba(3, 5, 11, .95));
    padding: 2.5rem 0 1.25rem;
    color: var(--bx-muted);
    font-size: .88rem;
}

.bx-footer-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bx-line);
}

.bx-footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bx-footer-brand img {
    height: 48px;
    width: auto;
}

.bx-footer-brand p {
    margin: 0;
}

.bx-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.bx-footer-links a,
.bx-footer-end a {
    color: var(--bx-silver);
    text-decoration: none;
}

.bx-footer-links a:hover,
.bx-footer-end a:hover {
    color: #fff;
}

.bx-footer-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding-top: 1.25rem;
    font-size: .8rem;
}

/* ==========================================================================
/* ==========================================================================
   Pagina inicial: palco horizontal por capitulos
   ========================================================================== */

body:has(.bx-stage) {
    overflow: hidden;
}

body:has(.bx-stage) .bx-header,
body:has(.bx-stage) .bx-footer,
body:has(.bx-stage)::before {
    display: none;
}

body:has(.bx-stage) main {
    margin: 0;
}

.bx-stage {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    color: var(--bx-text);
    background: var(--bx-night);
}

.bx-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 12;
    background: rgba(255, 255, 255, .05);
}

.bx-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--bx-accent-deep), var(--bx-accent-hi));
    box-shadow: 0 0 12px var(--bx-accent-glow);
    transition: width .9s var(--bx-ease);
}

/* Barra superior com os capitulos */

.bx-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 64px;
    padding: 0 28px;
    background: linear-gradient(180deg, rgba(7, 8, 12, .92), rgba(7, 8, 12, .72));
    border-bottom: 1px solid var(--bx-line);
    backdrop-filter: blur(10px);
}

.bx-topbar-brand img {
    display: block;
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 10px rgba(62, 166, 255, .3));
}

.bx-topnav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: .25rem;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.bx-topnav::-webkit-scrollbar {
    display: none;
}

.bx-topnav-item {
    position: relative;
    flex-shrink: 0;
    padding: 0 1rem;
    border: 0;
    background: none;
    color: #b4bac6;
    font-family: var(--bx-font-title);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease;
}

.bx-topnav-item::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--bx-accent);
    box-shadow: 0 0 14px var(--bx-accent-glow);
    transition: left .35s var(--bx-ease), right .35s var(--bx-ease);
}

.bx-topnav-item:hover {
    color: #fff;
}

.bx-topnav-item.is-active {
    color: #fff;
}

.bx-topnav-item.is-active::after {
    left: .6rem;
    right: .6rem;
}

.bx-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Trilho horizontal e fundos de cada capitulo */

.bx-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bx-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 1s var(--bx-ease);
}

.bx-chapter {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    isolation: isolate;
}

.bx-chapter::before,
.bx-chapter::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.bx-chapter::after {
    background:
        var(--bx-grain),
        radial-gradient(ellipse 85% 75% at 50% 45%, rgba(7, 8, 12, .25) 0%, rgba(7, 8, 12, .6) 70%, rgba(7, 8, 12, .92) 100%);
}

.bx-bg-hero-dim::before {
    background: url(../images/bravex-hero.webp) center / cover no-repeat;
    filter: blur(6px) brightness(.55) saturate(1.25);
    transform: scale(1.12);
}

.bx-bg-goblin::before {
    background: url(../images/game/chaos-goblin-combinacoes.webp) center / cover no-repeat;
    filter: blur(7px) brightness(.5) saturate(1.4);
    transform: scale(1.15);
}

.bx-bg-quests::before {
    background: url(../images/game/diario-de-quests.webp) center / cover no-repeat;
    filter: blur(7px) brightness(.5) saturate(1.4);
    transform: scale(1.15);
}

.bx-bg-plain::before {
    background: url(../images/bravex-hero.webp) center 70% / cover no-repeat;
    filter: blur(10px) brightness(.32) saturate(1.2);
    transform: scale(1.12);
}

.bx-chapter-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 2.4vh, 2rem);
    max-width: 1400px;
    margin: 0 auto;
    padding: 84px 40px 88px;
}

.bx-chapter > .bx-chapter-inner > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .8s var(--bx-ease);
}

.bx-chapter.is-active > .bx-chapter-inner > * {
    opacity: 1;
    transform: none;
}

.bx-chapter.is-active > .bx-chapter-inner > :nth-child(2) {
    transition-delay: .12s;
}

.bx-chapter.is-active > .bx-chapter-inner > :nth-child(3) {
    transition-delay: .22s;
}

/* Tipografia */

.bx-heading {
    text-align: center;
}

.bx-eyebrow {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bx-accent-hi);
}

.bx-title {
    margin: 0;
    font-family: var(--bx-font-title);
    font-weight: 800;
    font-size: clamp(1.6rem, min(3.2vw, 5.2vh), 3rem);
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}

.bx-title-xl {
    font-size: clamp(1.8rem, min(3.4vw, 5vh), 3rem);
}

.bx-sub {
    max-width: 640px;
    margin: .5rem auto 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #c3c8d2;
}

.bx-lead {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #c3c8d2;
}

.bx-muted {
    margin: 0;
    color: var(--bx-muted);
}

.bx-tag {
    align-self: flex-start;
    display: inline-block;
    padding: .3rem .7rem;
    border: 1px solid rgba(62, 166, 255, .45);
    border-radius: 999px;
    background: rgba(7, 8, 12, .6);
    color: var(--bx-accent-hi);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bx-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--bx-accent-hi);
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
}

.bx-link:hover {
    color: #fff;
}

.bx-link-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
}

.bx-link:hover .bx-link-icon {
    transform: translateX(3px);
}

/* Paineis rusticos com cantoneiras */

.bx-panel {
    position: relative;
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius-lg);
    background:
        var(--bx-grain),
        linear-gradient(160deg, rgba(30, 33, 44, .9), rgba(12, 13, 18, .94));
    box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.bx-panel::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    border-top: 2px solid var(--bx-accent);
    border-right: 2px solid var(--bx-accent);
    border-radius: 0 6px 0 0;
    opacity: .85;
    pointer-events: none;
}

.bx-panel-title {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

.bx-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 2.6rem 1.1rem 1.3rem;
    border-bottom: 1px solid var(--bx-line);
}

.bx-panel-body {
    padding: 1.1rem 1.3rem;
    max-height: 52vh;
    overflow-y: auto;
}

.bx-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid var(--bx-line-strong);
    border-radius: 999px;
    background: rgba(7, 8, 12, .7);
    color: var(--bx-silver);
    font-size: .85rem;
    text-decoration: none;
}

.bx-chip small {
    color: var(--bx-muted);
}

.bx-chip-link:hover {
    color: #fff;
    border-color: var(--bx-accent);
}

.bx-chip-icon {
    font-size: 17px;
    width: 17px;
    height: 17px;
}

.bx-online-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
}

.bx-online-dot.is-on {
    background: var(--bx-online);
    animation: bx-pulse 2s infinite;
}

@keyframes bx-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
    70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Botoes do palco (pilula como no estilo de referencia) */

.bx-stage .bx-btn {
    border-radius: 999px;
    min-height: 50px;
    padding: .75rem 1.9rem;
}

.bx-stage .bx-btn-sm {
    min-height: 38px;
    padding: .45rem 1.2rem;
}

.bx-btn-primary {
    border: 0;
    background: var(--bx-silver-fill);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    box-shadow: 0 0 0 1px rgba(134, 200, 255, .35) inset, 0 12px 34px -12px var(--bx-accent-glow);
}

.bx-btn-primary:hover {
    color: #fff;
    background: linear-gradient(180deg, #7cc8ff 0%, #3c98ff 55%, #2479ea 100%);
    box-shadow: 0 0 0 1px rgba(160, 214, 255, .5) inset, 0 16px 40px -12px rgba(62, 166, 255, .7);
}

/* Capitulo: inicio (capa) */

.bx-chapter-hero::before {
    background:
        url(../images/bravex-hero.webp) center 30% / cover no-repeat;
    filter: blur(1px) brightness(.8) saturate(1.15);
    transform: scale(1.14);
    animation: bx-drift-bg 40s ease-in-out infinite alternate;
}

@keyframes bx-drift-bg {
    from { transform: scale(1.14) translate(0, 0); }
    to { transform: scale(1.2) translate(-1.5%, -1%); }
}

.bx-chapter-hero::after {
    background:
        var(--bx-grain),
        radial-gradient(ellipse 42% 50% at 50% 46%, rgba(6, 12, 28, .62) 0%, rgba(6, 12, 28, 0) 100%),
        radial-gradient(ellipse 120% 80% at 50% 120%, rgba(29, 111, 224, .35), transparent 60%),
        linear-gradient(180deg, rgba(7, 8, 12, .6) 0%, rgba(7, 8, 12, 0) 22%, rgba(7, 8, 12, 0) 62%, var(--bx-night) 100%);
}

.bx-embers {
    position: absolute;
    inset: 0;
}

.bx-embers span {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffd59a;
    box-shadow: 0 0 10px 2px rgba(255, 170, 80, .8);
    opacity: 0;
    animation: bx-ember 9s linear infinite;
}

.bx-embers span:nth-child(3n) {
    background: #bfe4ff;
    box-shadow: 0 0 10px 2px rgba(62, 166, 255, .9);
}

.bx-embers span:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 10s; }
.bx-embers span:nth-child(2) { left: 12%; animation-delay: 2.5s; }
.bx-embers span:nth-child(3) { left: 18%; animation-delay: 5s; animation-duration: 12s; }
.bx-embers span:nth-child(4) { left: 24%; animation-delay: 1.2s; }
.bx-embers span:nth-child(5) { left: 30%; animation-delay: 6.5s; animation-duration: 11s; }
.bx-embers span:nth-child(6) { left: 36%; animation-delay: 3.4s; }
.bx-embers span:nth-child(7) { left: 42%; animation-delay: 7.8s; animation-duration: 13s; }
.bx-embers span:nth-child(8) { left: 48%; animation-delay: .6s; }
.bx-embers span:nth-child(9) { left: 54%; animation-delay: 4.2s; animation-duration: 10s; }
.bx-embers span:nth-child(10) { left: 60%; animation-delay: 8.4s; }
.bx-embers span:nth-child(11) { left: 66%; animation-delay: 2s; animation-duration: 12s; }
.bx-embers span:nth-child(12) { left: 72%; animation-delay: 5.6s; }
.bx-embers span:nth-child(13) { left: 78%; animation-delay: 1.8s; animation-duration: 9s; }
.bx-embers span:nth-child(14) { left: 84%; animation-delay: 7s; }
.bx-embers span:nth-child(15) { left: 90%; animation-delay: 3.9s; animation-duration: 11s; }
.bx-embers span:nth-child(16) { left: 95%; animation-delay: 6s; }
.bx-embers span:nth-child(17) { left: 3%; animation-delay: 8.8s; animation-duration: 13s; }
.bx-embers span:nth-child(18) { left: 51%; animation-delay: 9.5s; animation-duration: 14s; }

@keyframes bx-ember {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: .9; }
    70% { opacity: .6; }
    100% { transform: translate(60px, -95vh) scale(.4); opacity: 0; }
}

.bx-hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bx-hero-char {
    position: absolute;
    bottom: 0;
    height: min(66vh, 640px);
    width: auto;
    opacity: .95;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .8)) saturate(1.1);
    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 65%, transparent 98%);
    transition: transform 1.2s var(--bx-ease), opacity 1s ease;
}

.bx-hero-char-left {
    left: max(-4vw, calc(50% - 980px));
    transform: translateX(-40px);
}

.bx-hero-char-right {
    right: max(-4vw, calc(50% - 980px));
    transform: translateX(40px) scaleX(-1);
}

.bx-chapter-hero.is-active .bx-hero-char-left {
    transform: none;
}

.bx-chapter-hero.is-active .bx-hero-char-right {
    transform: scaleX(-1);
}

.bx-chapter-hero .bx-chapter-inner {
    position: relative;
    z-index: 1;
    justify-content: center;
    padding-top: 84px;
    padding-bottom: 40px;
}

.bx-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(.55rem, 1.7vh, 1.05rem);
    text-align: center;
}

.bx-hero-title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.bx-hero-logo {
    width: auto;
    height: clamp(110px, 25vh, 260px);
    filter: drop-shadow(0 10px 40px rgba(62, 166, 255, .45));
}

.bx-hero-edition {
    margin-top: -.6vh;
    font-family: var(--bx-font-title);
    font-size: clamp(1.8rem, min(4.2vw, 6.2vh), 3.8rem);
    letter-spacing: .14em;
    font-weight: 900;
    line-height: .95;
    text-transform: uppercase;
    background: linear-gradient(180deg, #e6f6ff 0%, #8fd3ff 30%, #3ea6ff 62%, #1b5fd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 0 rgba(6, 22, 54, .9)) drop-shadow(0 12px 30px rgba(62, 166, 255, .45));
}

.bx-hero-tagline {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: clamp(.95rem, 1.5vw, 1.3rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .9);
}

.bx-hero-pills {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: .45rem .5rem;
    list-style: none;
    border: 1px solid var(--bx-line-strong);
    border-radius: 14px;
    background: rgba(7, 8, 12, .55);
    backdrop-filter: blur(6px);
}

.bx-hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem 1rem;
    font-weight: 600;
    color: #e6eaf1;
}

.bx-hero-pills li + li {
    border-left: 1px solid var(--bx-line-strong);
}

.bx-hero-pill-icon {
    font-size: 19px;
    width: 19px;
    height: 19px;
    color: var(--bx-accent-hi);
}

.bx-countdown-label {
    margin: 0 0 .5rem;
    font-family: var(--bx-font-title);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #fff;
}

.bx-countdown-boxes {
    display: flex;
    gap: .7rem;
}

.bx-countdown-boxes > div {
    min-width: 92px;
    padding: .6rem .5rem;
    border: 1px solid var(--bx-line-strong);
    border-radius: 14px;
    background: rgba(7, 8, 12, .55);
    backdrop-filter: blur(6px);
}

.bx-countdown-boxes strong {
    display: block;
    font-family: var(--bx-font-title);
    font-size: clamp(1.8rem, 4vh, 2.6rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.bx-countdown-boxes span {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-stage .bx-btn-hero {
    box-sizing: border-box;
    margin: 5px;
    min-width: 260px;
    height: 54px;
    min-height: 54px;
    line-height: 1;
    padding: .8rem 1.6rem;
    font-size: .92rem;
    font-family: var(--bx-font-title);
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.bx-hero-strip {
    display: flex;
    gap: 6px;
    margin: .6rem 0 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--bx-line-strong);
    border-radius: 16px;
    background: rgba(7, 8, 12, .6);
    backdrop-filter: blur(6px);
}

.bx-hero-strip button {
    position: relative;
    display: block;
    width: 78px;
    height: 70px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.bx-hero-strip-frame {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: radial-gradient(circle at 50% 30%, #24365a, #0c0f18 75%);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.bx-hero-strip img {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
    object-position: 50% 50%;
    transform-origin: 50% 85%;
    transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--tamanho, 1.1));
    transition: transform .35s var(--bx-ease), filter .35s ease;
    filter: saturate(.85) brightness(.9);
}

.bx-hero-strip button:hover,
.bx-hero-strip button:focus-visible {
    z-index: 3;
}

.bx-hero-strip button:hover .bx-hero-strip-frame,
.bx-hero-strip button:focus-visible .bx-hero-strip-frame {
    border-color: var(--bx-accent);
    box-shadow: 0 0 22px -4px var(--bx-accent-glow);
}

.bx-hero-strip button:hover img,
.bx-hero-strip button:focus-visible img {
    transform: translate(var(--x, 0px), calc(var(--y, 0px) - 8px)) scale(var(--tamanho-mouse, 1.9));
    filter: saturate(1.15) brightness(1.05) drop-shadow(0 8px 14px rgba(0, 0, 0, .7));
}

.bx-hero-strip-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 46px);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 170px;
    padding: .55rem .8rem;
    border: 1px solid rgba(62, 166, 255, .45);
    border-radius: 10px;
    background: rgba(9, 13, 24, .95);
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .9);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .3s var(--bx-ease);
}

.bx-hero-strip-tip strong {
    font-family: var(--bx-font-title);
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
}

.bx-hero-strip-tip small {
    font-size: .7rem;
    color: var(--bx-accent-hi);
}

.bx-hero-strip button:hover .bx-hero-strip-tip,
.bx-hero-strip button:focus-visible .bx-hero-strip-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Capitulo: sistemas (painel de lista) */

.bx-board {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    height: clamp(420px, calc(100vh - 290px), 620px);
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius-lg);
    overflow: hidden;
    background: #0b0c10;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}

.bx-board-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    background:
        var(--bx-grain),
        linear-gradient(180deg, #121318, #0c0d11);
    border-right: 1px solid var(--bx-line);
}

.bx-board-list li {
    flex: 1;
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.bx-board-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.2rem;
    border: 0;
    background: transparent;
    color: #c3c8d2;
    font-weight: 700;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.bx-board-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bx-accent);
    box-shadow: 0 0 12px var(--bx-accent-glow);
    transform: scaleY(0);
    transition: transform .3s var(--bx-ease);
}

.bx-board-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, .03);
}

.bx-board-item.is-active {
    color: var(--bx-accent-hi);
    background: linear-gradient(90deg, rgba(62, 166, 255, .12), rgba(62, 166, 255, 0));
}

.bx-board-item.is-active::before {
    transform: scaleY(1);
}

.bx-board-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--bx-line-strong);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    color: var(--bx-silver);
    font-size: 19px;
}

.bx-board-item.is-active .bx-board-icon {
    color: #fff;
    border-color: rgba(62, 166, 255, .6);
    background: rgba(62, 166, 255, .18);
}

.bx-board-stage {
    position: relative;
    overflow: hidden;
}

.bx-board-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s;
}

.bx-board-panel.is-active {
    opacity: 1;
    visibility: visible;
}

.bx-board-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(8, 9, 12, .95) 0%, rgba(8, 9, 12, .78) 38%, rgba(8, 9, 12, .1) 70%),
        linear-gradient(0deg, rgba(8, 9, 12, .7), rgba(8, 9, 12, 0) 40%);
}

.bx-board-panel.has-art {
    background:
        radial-gradient(circle at 72% 45%, rgba(62, 166, 255, .28), transparent 50%),
        url(../images/bravex-hero.webp) center / cover no-repeat;
}

.bx-board-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 30%;
    transform: scale(1.04);
    transition: transform 6s ease;
}

.bx-board-panel.is-active .bx-board-media {
    transform: scale(1);
}

.bx-board-art {
    position: absolute;
    right: 2%;
    bottom: 0;
    z-index: 1;
    height: 96%;
    width: auto;
    max-width: 60%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .7));
    transform: translateX(30px);
    opacity: 0;
    transition: transform .8s var(--bx-ease), opacity .6s ease;
}

.bx-board-panel.is-active .bx-board-art {
    transform: none;
    opacity: 1;
}

.bx-board-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 480px;
    padding: 2.4rem;
}

.bx-board-title {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .8);
}

.bx-board-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #d4d8e0;
}

.bx-board-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

.bx-board-points li {
    position: relative;
    padding-left: 1.2rem;
    font-size: .92rem;
    line-height: 1.45;
    color: #b9bfcb;
}

.bx-board-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--bx-accent);
    box-shadow: 0 0 8px var(--bx-accent-glow);
    transform: rotate(45deg);
}

/* Capitulo: servidor (bento) */

.bx-bento {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}

.bx-info {
    grid-row: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: clamp(360px, calc(100vh - 330px), 460px);
    padding: 2rem;
    overflow: hidden;
}

.bx-info-watermark {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--bx-font-title);
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(62, 166, 255, .07);
    letter-spacing: -.02em;
    pointer-events: none;
}

.bx-info-art {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 92%;
    width: auto;
    max-width: 70%;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .7));
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.bx-info::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(62, 166, 255, .15);
    background: radial-gradient(circle, rgba(62, 166, 255, .18), transparent 65%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bx-info-col {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.bx-info-col-end {
    align-items: flex-end;
    text-align: right;
}

.bx-info-stat strong {
    display: block;
    font-family: var(--bx-font-title);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .8);
}

.bx-info-stat span {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-accent-hi);
}

.bx-coins,
.bx-keys,
.bx-gremory {
    padding: 1.4rem 1.5rem;
}

.bx-gremory {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.bx-gremory p {
    margin: .4rem 0 0;
    color: #b9bfcb;
    line-height: 1.55;
}

.bx-gremory-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 30%, #7cc8ff, #1d6fe0 70%);
    color: #fff;
    font-size: 34px;
    box-shadow: 0 10px 30px -8px var(--bx-accent-glow);
}

.bx-coin-list,
.bx-key-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

.bx-coin {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.bx-coin strong {
    display: block;
    color: #fff;
    font-weight: 800;
}

.bx-coin small {
    color: var(--bx-muted);
    font-size: .8rem;
}

.bx-coin-gem {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    transform: rotate(45deg) scale(.8);
    box-shadow: 0 0 18px -2px currentColor;
}

.bx-coin-1 .bx-coin-gem {
    color: #b26cff;
    background: linear-gradient(135deg, #e3c2ff, #8b3ff0);
}

.bx-coin-2 .bx-coin-gem {
    color: #3ea6ff;
    background: linear-gradient(135deg, #c6e7ff, #1d6fe0);
}

.bx-coin-3 .bx-coin-gem {
    color: #f2a33a;
    background: linear-gradient(135deg, #ffe0a8, #d9741c);
}

.bx-key-list {
    grid-template-columns: 1fr 1fr;
    gap: .55rem .9rem;
}

.bx-key-list li {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
    color: #c3c8d2;
}

.bx-key-list kbd {
    flex-shrink: 0;
    min-width: 38px;
    padding: .3rem .4rem;
    border: 1px solid var(--bx-line-strong);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: #1a1d26;
    color: #fff;
    font-family: var(--bx-font-title);
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}

.bx-server-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem 1rem;
}

/* Capitulo: classes */

.bx-classes {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2.2rem;
    overflow: hidden;
}

.bx-class-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(280px, calc(100vh - 380px), 420px);
}

.bx-class-stage::before {
    content: '';
    position: absolute;
    width: min(420px, 80%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(62, 166, 255, .18);
    background: radial-gradient(circle, rgba(62, 166, 255, .24), transparent 65%);
}

.bx-class-art {
    grid-area: 1 / 1;
    position: relative;
    width: min(600px, 100%);
    height: auto;
    opacity: 0;
    transform: translateX(30px) scale(.97);
    transition: opacity .55s ease, transform .75s var(--bx-ease);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7));
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.bx-class-art.is-active {
    opacity: 1;
    transform: none;
}

.bx-class-info {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.bx-class-detail {
    display: none;
    flex-direction: column;
    gap: .8rem;
}

.bx-class-detail.is-active {
    display: flex;
    animation: bx-fade-in .5s ease both;
}

@keyframes bx-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.bx-class-name {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.bx-class-evolution {
    margin: 0;
    color: var(--bx-accent-hi);
    font-weight: 700;
}

.bx-class-text {
    margin: 0;
    max-width: 520px;
    line-height: 1.65;
    color: #c3c8d2;
}

.bx-class-top {
    max-width: 460px;
    padding: .85rem 1rem;
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius);
    background: rgba(7, 8, 12, .55);
}

.bx-class-top-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-class-top-row {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.bx-class-top-row img {
    border-radius: 8px;
    border: 1px solid var(--bx-line-strong);
    object-fit: cover;
}

.bx-class-top-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    color: #fff;
}

.bx-class-top-name a {
    color: #fff;
    text-decoration: none;
}

.bx-class-top-name small,
.bx-class-top-score small {
    color: var(--bx-muted);
    font-size: .75rem;
    font-weight: 600;
}

.bx-class-top-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.bx-class-top-score strong {
    color: #fff;
    font-size: 1.1rem;
}

.bx-class-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.bx-class-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bx-muted);
    font-family: var(--bx-font-title);
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.bx-class-thumb img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid var(--bx-line-strong);
    object-fit: cover;
    object-position: 50% 12%;
    background: radial-gradient(circle, #1f2a44, #0c0f18);
    filter: grayscale(.8) brightness(.8);
    transition: filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.bx-class-thumb:hover,
.bx-class-thumb.is-active {
    color: #fff;
}

.bx-class-thumb:hover img,
.bx-class-thumb.is-active img {
    filter: none;
}

.bx-class-thumb.is-active img {
    border-color: var(--bx-accent);
    box-shadow: 0 0 18px -2px var(--bx-accent-glow);
}

/* Capitulo: rankings */

.bx-rankings {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 1.5rem;
}

.bx-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--bx-line);
    border-radius: 999px;
    background: rgba(7, 8, 12, .7);
}

.bx-tab {
    border: 0;
    border-radius: 999px;
    padding: .5rem 1.2rem;
    background: transparent;
    color: var(--bx-muted);
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.bx-tab:hover {
    color: #fff;
}

.bx-tab.is-active {
    background: var(--bx-silver-fill);
    color: #fff;
}

.bx-ranking {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bx-ranking.is-active {
    display: flex;
    animation: bx-fade-in .45s ease both;
}

.bx-ranking-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

@media (min-width: 992px) {
    .bx-ranking-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
        column-gap: .8rem;
    }
}

.bx-ranking-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem .9rem;
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius);
    background: rgba(7, 8, 12, .5);
}

.bx-ranking-row.is-top {
    border-color: rgba(62, 166, 255, .35);
    background: linear-gradient(90deg, rgba(62, 166, 255, .16), rgba(7, 8, 12, .5) 65%);
}

.bx-ranking-pos {
    width: 28px;
    text-align: center;
    font-family: var(--bx-font-title);
    font-weight: 900;
    color: var(--bx-muted);
}

.bx-ranking-row.is-top .bx-ranking-pos {
    color: var(--bx-accent-hi);
    font-size: 1.15rem;
}

.bx-ranking-avatar {
    border-radius: 8px;
    border: 1px solid var(--bx-line-strong);
    object-fit: cover;
}

.bx-ranking-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    color: #fff;
}

.bx-ranking-name small {
    color: var(--bx-muted);
    font-size: .75rem;
    font-weight: 600;
}

.bx-badge-on {
    padding: .1rem .45rem;
    border-radius: 4px;
    background: rgba(74, 222, 128, .14);
    color: var(--bx-online);
    font-size: .68rem;
    font-weight: 800;
}

.bx-ranking-score {
    font-family: var(--bx-font-title);
    font-weight: 800;
    color: #fff;
}

.bx-empty {
    width: 100%;
    margin: 0;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--bx-line-strong);
    border-radius: var(--bx-radius);
    text-align: center;
    color: var(--bx-muted);
}

/* Capitulo: novidades */

.bx-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Capitulo: registro (bilhete) */

.bx-ticket {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    border: 1px solid rgba(62, 166, 255, .35);
    border-radius: 22px;
    background: #0d1017;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 60px -30px var(--bx-accent-glow);
}

.bx-ticket-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 2rem 2.2rem;
    border-radius: 22px 0 0 22px;
    background:
        var(--bx-grain),
        radial-gradient(ellipse 90% 70% at 0% 0%, rgba(62, 166, 255, .25), transparent 60%),
        linear-gradient(160deg, #18263f 0%, #101622 60%, #0d1017 100%);
    border-right: 2px dashed rgba(255, 255, 255, .14);
}

.bx-ticket-stub::before,
.bx-ticket-stub::after {
    content: '';
    position: absolute;
    right: -13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bx-night);
    border: 1px solid rgba(62, 166, 255, .35);
}

.bx-ticket-stub::before {
    top: -13px;
}

.bx-ticket-stub::after {
    bottom: -13px;
}

.bx-ticket-kicker {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--bx-accent-hi);
}

.bx-ticket-title {
    margin: 0;
    font-family: var(--bx-font-title);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.bx-ticket-sub {
    margin: -.3rem 0 0;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bx-silver);
}

.bx-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin: 0;
    padding-top: .9rem;
    border-top: 1px dashed rgba(255, 255, 255, .14);
}

.bx-ticket-meta dt {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-muted);
}

.bx-ticket-meta dd {
    margin: .15rem 0 0;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}

.bx-ticket-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid rgba(62, 166, 255, .3);
    border-radius: 10px;
    background: rgba(62, 166, 255, .08);
    font-size: .88rem;
    color: #d4d8e0;
}

.bx-ticket-check-icon {
    flex-shrink: 0;
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--bx-accent);
}

.bx-ticket-label {
    margin: .3rem 0 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bx-silver);
}

.bx-ticket-classes {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bx-ticket-classes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-family: var(--bx-font-title);
    font-size: .66rem;
    font-weight: 800;
    color: var(--bx-silver);
}

.bx-ticket-classes img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(62, 166, 255, .45);
    object-fit: cover;
    object-position: 50% 12%;
    background: radial-gradient(circle, #24365a, #0c0f18);
}

.bx-ticket-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bx-ticket-form {
    padding: 2rem 2.2rem;
}

.bx-auth-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 1.1rem;
}

.bx-auth-tabs .bx-tab {
    flex: 1;
}

.bx-auth-panel {
    display: none;
}

.bx-auth-panel.is-active {
    display: block;
    animation: bx-fade-in .4s ease both;
}

.bx-form {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.bx-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem .85rem;
}

.bx-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.bx-field-wide {
    grid-column: 1 / -1;
}

.bx-field label {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bx-silver);
}

.bx-stage .form-control,
.bx-stage .form-select {
    min-height: 44px;
    border-radius: 10px;
    background-color: rgba(4, 5, 8, .75);
}

.bx-label-split {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.bx-label-split a {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.bx-req {
    color: #f87171;
}

.bx-captcha:empty {
    display: none;
}

.bx-terms {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
}

.bx-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    height: 100%;
    justify-content: center;
    text-align: center;
}

.bx-welcome h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 900;
}

.bx-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    width: 100%;
}

.bx-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .9rem .5rem;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    color: var(--bx-silver);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
}

.bx-quick-item:hover {
    color: #fff;
    border-color: var(--bx-accent);
    background: var(--bx-accent-soft);
}

.bx-quick-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* Capitulo: FAQ */

.bx-faq {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.4rem;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    align-items: start;
}

.bx-faq-side {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.bx-faq-cat {
    padding: .85rem 1.1rem;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    background: #0f1117;
    color: #d4d8e0;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.bx-faq-cat:hover {
    color: #fff;
}

.bx-faq-cat.is-active {
    border-color: var(--bx-accent);
    color: var(--bx-accent-hi);
    background: linear-gradient(90deg, rgba(62, 166, 255, .1), #0f1117);
}

.bx-faq-help {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .4rem;
    padding: 1.1rem 1.2rem;
    font-size: .88rem;
}

.bx-faq-help strong {
    color: #fff;
}

.bx-faq-help p {
    margin: 0;
    color: var(--bx-muted);
    line-height: 1.5;
}

.bx-faq-group {
    display: none;
    flex-direction: column;
    gap: .65rem;
}

.bx-faq-group.is-active {
    display: flex;
    animation: bx-fade-in .4s ease both;
}

.bx-faq-item {
    border: 1px solid var(--bx-line);
    border-radius: 14px;
    background: #0f1117;
    transition: border-color .25s ease;
}

.bx-faq-item[open] {
    border-color: rgba(62, 166, 255, .4);
}

.bx-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
}

.bx-faq-item summary::-webkit-details-marker {
    display: none;
}

.bx-faq-item[open] summary {
    color: var(--bx-accent-hi);
}

.bx-faq-chevron {
    flex-shrink: 0;
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: var(--bx-muted);
    transition: transform .3s ease;
}

.bx-faq-item[open] .bx-faq-chevron {
    transform: rotate(180deg);
    color: var(--bx-accent-hi);
}

.bx-faq-item p {
    margin: 0;
    padding: 0 1.3rem 1.2rem;
    max-width: 760px;
    color: #b9bfcb;
    line-height: 1.6;
}

/* Setas e contador */

.bx-arrows {
    position: absolute;
    right: 28px;
    bottom: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 5px;
    border: 1px solid var(--bx-line);
    border-radius: 999px;
    background: rgba(7, 8, 12, .8);
    backdrop-filter: blur(8px);
}

.bx-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--bx-line-strong);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}

.bx-arrow:hover {
    background: var(--bx-accent-soft);
    border-color: var(--bx-accent);
}

.bx-arrow[disabled] {
    opacity: .3;
    pointer-events: none;
}

.bx-arrow-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.bx-counter {
    min-width: 44px;
    text-align: center;
    font-family: var(--bx-font-title);
    font-size: .8rem;
    font-weight: 800;
    color: var(--bx-silver);
}

/* Responsivo */

@media (max-width: 1199.98px) {
    .bx-topnav-item {
        padding: 0 .65rem;
        font-size: .72rem;
    }

    .bx-bento {
        grid-template-columns: 1fr 1fr;
    }

    .bx-info {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 991.98px) {
    .bx-topbar {
        flex-wrap: wrap;
        height: auto;
        gap: 0 .8rem;
        padding: .5rem 16px 0;
    }

    .bx-topnav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        height: 44px;
    }

    .bx-topbar-actions {
        margin-left: auto;
    }

    .bx-chapter-inner {
        padding: 128px 24px 100px;
        justify-content: flex-start;
    }


    .bx-board {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .bx-hero-char {
        height: 46vh;
        opacity: .35;
    }

    .bx-hero-strip {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bx-hero-strip-tip {
        display: none;
    }

    .bx-hero-strip li {
        flex-shrink: 0;
    }

    .bx-board-list {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--bx-line);
        scrollbar-width: none;
    }

    .bx-board-list li {
        flex: 0 0 auto;
        border-bottom: 0;
        border-right: 1px solid rgba(255, 255, 255, .05);
    }

    .bx-board-item::before {
        top: auto;
        bottom: 0;
        left: 18%;
        right: 18%;
        width: auto;
        height: 3px;
        transform: scaleX(0);
    }

    .bx-board-item.is-active::before {
        transform: scaleX(1);
    }

    .bx-board-stage {
        min-height: 520px;
    }

    .bx-board-panel::before {
        background: linear-gradient(0deg, rgba(8, 9, 12, .97) 0%, rgba(8, 9, 12, .82) 50%, rgba(8, 9, 12, .15) 100%);
    }

    .bx-board-art {
        top: 0;
        bottom: auto;
        right: 50%;
        height: 55%;
        max-width: 80%;
        transform: translateX(50%);
    }

    .bx-board-panel.is-active .bx-board-art {
        transform: translateX(50%);
    }

    .bx-classes,
    .bx-ticket,
    .bx-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-class-stage {
        min-height: 260px;
    }

    .bx-ticket-stub {
        border-right: 0;
        border-bottom: 2px dashed rgba(255, 255, 255, .14);
        border-radius: 22px 22px 0 0;
    }

    .bx-ticket-stub::before,
    .bx-ticket-stub::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .bx-hero-pills li {
        padding: .2rem .6rem;
        font-size: .82rem;
    }

    .bx-countdown-boxes > div {
        min-width: 70px;
    }

    .bx-hero-char {
        display: none;
    }

    .bx-chapter-hero .bx-lead {
        font-size: .95rem;
    }

    .bx-topbar-brand img {
        height: 32px;
    }

    .bx-chapter-inner {
        padding: 118px 16px 96px;
        gap: 1.3rem;
    }

    .bx-board-copy {
        padding: 1.4rem;
    }

    .bx-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-info,
    .bx-gremory {
        grid-column: auto;
    }

    .bx-info {
        min-height: 420px;
        padding: 1.4rem;
    }

    .bx-info-art {
        opacity: .5;
    }

    .bx-form-grid,
    .bx-key-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .bx-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bx-ticket-stub,
    .bx-ticket-form,
    .bx-classes {
        padding: 1.3rem;
    }

    .bx-arrows {
        right: 50%;
        bottom: 14px;
        transform: translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bx-track,
    .bx-chapter > .bx-chapter-inner > *,
    .bx-class-art,
    .bx-board-panel,
    .bx-board-art,
    .bx-board-media,
    .bx-progress-bar {
        transition-duration: .01ms !important;
    }

    .bx-online-dot.is-on,
    .bx-hint-icon,
    .bx-chapter-hero::before {
        animation: none;
    }

    .bx-embers {
        display: none;
    }
}

/* Sem barra de rolagem na pagina inicial */
html:has(.bx-stage),
body:has(.bx-stage) {
    overflow: hidden !important;
    scrollbar-width: none;
}

html:has(.bx-stage)::-webkit-scrollbar,
body:has(.bx-stage)::-webkit-scrollbar,
.bx-chapter::-webkit-scrollbar {
    display: none;
}

.bx-chapter {
    scrollbar-width: none;
}

/* ==========================================================================
   AJUSTES MANUAIS DA CAPA  (edite só os números abaixo)
   --------------------------------------------------------------------------
   Botões:
     --x / --y      move o botão (positivo = direita / baixo; negativo = esquerda / cima)
     --largura      largura do botão
     --altura       altura do botão
     --texto        tamanho da letra
   Personagens da faixa:
     --x / --y          move o boneco dentro do quadradinho
     --tamanho          tamanho parado
     --tamanho-mouse    tamanho ao passar o mouse
   ========================================================================== */

/* Botão "Entre na lista de espera" */
.bx-stage .bx-btn-espera {
    --x: 0px;
    --y: 10px;
    --largura: 313px;
    --altura: 54px;
    --texto: .92rem;
}

/* Botão "Baixar o jogo" */
.bx-stage .bx-btn-baixar {
    --x: 0px;
    --y: 0px;
    --largura: 240px;
    --altura: 54px;
    --texto: .92rem;
}

/* Dark Wizard */
.bx-strip-dw {
    --x: 14px;
    --y: 6px;
    --tamanho: 1.3;
    --tamanho-mouse: 1.8;
}

/* Dark Knight */
.bx-strip-dk {
    --x: -3px;
    --y: 3px;
    --tamanho: 1.3;
    --tamanho-mouse: 1.7;
}

/* Fairy Elf */
.bx-strip-fe {
    --x: 3px;
    --y: 3px;
    --tamanho: 1.1;
    --tamanho-mouse: 1.7;
}

/* Magic Gladiator */
.bx-strip-mg {
    --x: 2px;
    --y: 0px;
    --tamanho: 1.1;
    --tamanho-mouse: 1.7;
}

/* Dark Lord */
.bx-strip-dl {
    --x: -1px;
    --y: -4px;
    --tamanho: 1.0;
    --tamanho-mouse: 1.7;
}

/* Summoner */
.bx-strip-su {
    --x: 10px;
    --y: 0px;
    --tamanho: 1.1;
    --tamanho-mouse: 1.7;
}

/* Rage Fighter */
.bx-strip-rf {
    --x: 0px;
    --y: 0px;
    --tamanho: 1.1;
    --tamanho-mouse: 1.9;
}

/* (não precisa mexer daqui pra baixo) */
.bx-stage .bx-btn-espera,
.bx-stage .bx-btn-baixar {
    min-width: var(--largura);
    width: var(--largura);
    height: var(--altura);
    min-height: var(--altura);
    font-size: var(--texto);
    transform: translate(var(--x), var(--y));
}

.bx-stage .bx-btn-espera:hover,
.bx-stage .bx-btn-baixar:hover {
    transform: translate(var(--x), calc(var(--y) - 1px));
}

@media (max-width: 640px) {
    .bx-stage .bx-btn-espera,
    .bx-stage .bx-btn-baixar {
        width: 100%;
        max-width: 340px;
    }
}

/* Faixa de prêmios da capa (mesmo padrão da antiga faixa de personagens) */
.bx-prizes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    margin-top: .8rem;
}

.bx-prizes-title {
    margin: 0;
    margin-top: -15px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c3c8d2;
}

.bx-prizes-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 10px 14px;
    list-style: none;
    border: 1px solid var(--bx-line-strong);
    border-radius: 16px;
    background: rgba(7, 8, 12, .6);
    backdrop-filter: blur(6px);
}

.bx-prize {
    position: relative;
    width: 112px;
    height: 66px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: radial-gradient(circle at 72% 40%, #24365a, #0c0f18 75%);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: -6px 0 14px -6px rgba(0, 0, 0, .9);
    transform: rotate(var(--r, 0deg)) translateY(var(--ty, 0px));
    transition: margin .5s var(--bx-ease), transform .5s var(--bx-ease), border-color .3s ease, box-shadow .3s ease;
}

.bx-prize + .bx-prize {
    margin-left: -78px;
}

.bx-prize:nth-child(1) { --r: 0deg; --ty: 0px; z-index: 1; }
.bx-prize:nth-child(2) { --r: 0deg; --ty: 0px; z-index: 2; }
.bx-prize:nth-child(3) { --r: 0deg; --ty: 0px; z-index: 3; }
.bx-prize:nth-child(4) { --r: 0deg; --ty: 0px; z-index: 4; }
.bx-prize:nth-child(5) { --r: 0deg; --ty: 0px; z-index: 5; }
.bx-prize:nth-child(6) { --r: 0deg; --ty: 0px; z-index: 6; }
.bx-prize:nth-child(7) { --r: 0deg; --ty: 0px; z-index: 7; }
.bx-prize:nth-child(8) { --r: 0deg; --ty: 0px; z-index: 8; }

.bx-prizes-list:hover .bx-prize,
.bx-prizes-list:focus-within .bx-prize {
    --r: 0deg;
    --ty: 0px;
}

.bx-prizes-list:hover .bx-prize + .bx-prize,
.bx-prizes-list:focus-within .bx-prize + .bx-prize {
    margin-left: 6px;
}

.bx-prizes-list .bx-prize:hover {
    --ty: -4px;
    border-color: var(--bx-accent);
    box-shadow: 0 0 22px -4px var(--bx-accent-glow);
}

.bx-prize-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: .12rem .45rem;
    border-radius: 0 0 8px 0;
    background: var(--bx-silver-fill);
    color: #fff;
    font-family: var(--bx-font-title);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.bx-prize-name {
    position: absolute;
    left: 8px;
    bottom: 7px;
    z-index: 2;
    font-family: var(--bx-font-title);
    font-size: .66rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: left;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}

.bx-prize-img,
.bx-prize-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s var(--bx-ease);
}

.bx-prize-img {
    right: 4px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7));
}

.bx-prize-icon {
    right: 10px;
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: var(--bx-accent-hi);
}

.bx-prize:hover .bx-prize-img,
.bx-prize:hover .bx-prize-icon {
    transform: translateY(-50%) scale(1.15);
}

@media (max-width: 640px) {
    .bx-prizes-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bx-prize {
        width: 96px;
        --r: 0deg !important;
        --ty: 0px !important;
    }

    .bx-prize + .bx-prize {
        margin: 3px !important;
    }
}


/* Troca suave entre os sistemas */
.bx-board-panel {
    transition: opacity 1.1s ease, visibility 1.1s;
}

.bx-board-panel .bx-board-media {
    opacity: 0;
    transition: opacity 1.1s ease, transform 6s ease;
}

.bx-board-panel.is-active .bx-board-media {
    opacity: 1;
}

.bx-board-panel .bx-board-copy {
    opacity: 0;
    transition: opacity .3s ease;
}

.bx-board-panel.is-active .bx-board-copy {
    opacity: 1;
}

/* Launcher: mostrar a parte de baixo e a lateral direita */
[data-bx-board-panel="launcher"] .bx-board-media {
    object-position: 100% 50%;
}

/* Menu do usuário logado (também na capa) */
.navbar-user-menu .navbar-user-expiry {
    padding: .5rem 1rem;
    font-size: .8rem;
    border-bottom: 1px solid var(--bx-line);
}

.navbar-user-menu .navbar-user-balance {
    padding: .4rem 0;
    border-bottom: 1px solid var(--bx-line);
}

.navbar-user-menu .navbar-user-balance-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem 1rem;
    font-size: .85rem;
}

.navbar-user-menu .navbar-user-balance-value {
    padding: .15rem .5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .8rem;
}

.navbar-user-menu .navbar-user-services-title {
    padding: .6rem 1rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.navbar-user-menu .navbar-user-services {
    display: flex;
    flex-direction: column;
    padding-bottom: .3rem;
}

.navbar-user-menu .navbar-user-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem 1rem;
    font-size: .88rem;
    text-decoration: none;
}

.navbar-user-menu .navbar-user-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--bx-line);
}

.navbar-user-menu .navbar-user-footer .btn {
    border-radius: 8px;
    font-weight: 700;
}


/* Capa proporcional: ocupa a altura disponível sem cortar os controles. */
.bx-chapter-hero .bx-chapter-inner {
    height: 100%;
    min-height: 0;
    padding: 80px clamp(14px, 3vw, 40px) 72px;
}
.bx-chapter-hero .bx-hero {
    flex-shrink: 0;
    width: 100%;
    transform-origin: center center;
}
.bx-chapter-hero.is-active .bx-hero {
    transform: scale(var(--bx-hero-fit, 1));
}
.bx-hero-logo { height: clamp(84px, 18vh, 190px); max-width: 82vw; object-fit: contain; }
.bx-hero .bx-actions { flex-wrap: wrap; justify-content: center; }
.bx-platforms { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .8rem; margin: 0; font-weight: 800; color: #fff; }
.bx-platforms span { font-weight: 500; color: var(--bx-silver); }
.bx-platforms small { font-size: .7rem; font-weight: 500; color: var(--bx-muted); }
.bx-download-nav { display: inline-flex; align-items: center; text-decoration: none; }
.bx-download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.bx-download-platform { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bx-download-platform h2, .bx-download-platform p { margin: 0; }
.bx-download-platform p { color: var(--bx-silver); }
.bx-download-platform small { color: var(--bx-muted); }
.bx-download-icon { font-size: 34px; width: 34px; height: 34px; color: var(--bx-accent-hi); }
.bx-browser-notice { padding: 24px; margin-bottom: 24px; border: 1px solid var(--bx-accent); border-radius: var(--bx-radius-lg); background: var(--bx-accent-soft); }
#download-pc, #browser-mobile { scroll-margin-top: 90px; }
@media (max-width: 767px) {
    .bx-download-platforms { grid-template-columns: 1fr; }
    .bx-download-platform { padding: 22px; }
    .bx-chapter-hero .bx-chapter-inner { padding-top: 104px; padding-bottom: 72px; }
    .bx-hero-pills li { padding: .15rem .5rem; font-size: .78rem; }
    .bx-hero .bx-actions { gap: 8px; }
    .bx-hero .bx-btn-hero { min-height: 44px; height: auto; padding: 12px 16px; font-size: .85rem; }
}

.bx-hero .bx-prizes-list { display: grid; grid-template-columns: repeat(6, 112px); gap: 6px; }
.bx-hero .bx-prize + .bx-prize { margin-left: 0; }
@media (max-width: 767px) {
    .bx-hero .bx-prizes-list { width: min(340px, 88vw); box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bx-hero .bx-prize { width: 100%; }
}

/* BRAVEX - Cabeçalho otimizado para mobile */
@media (max-width: 768px) {

    /* Esconde a logo pequena */
    .bx-topbar-brand {
        display: none !important;
    }

    /* Esconde o botão Entrar */
    .bx-topbar-actions {
        display: none !important;
    }

    /* Mantém o menu compacto */
    .bx-topbar {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Menu ocupa toda a largura */
    .bx-topnav {
        width: 100%;
        flex: 1;
    }
}

/* ==========================================
   BRAVEX - CORREÇÃO DO CENÁRIO MOBILE
   ========================================== */

@media (max-width: 768px) {

    /* Espaçamento antes de INÍCIO */
    .bx-topnav {
        padding-left: 16px !important;
        box-sizing: border-box;
    }

    /* Fundo geral */
    .bx-stage,
    .bx-chapter-hero {
        background-color: #050b17 !important;
    }

    /* Cenário fixo durante a rolagem */
    .bx-chapter-hero::before {
        position: fixed !important;
        inset: 0 !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(5, 11, 23, .12) 0%,
                rgba(5, 11, 23, .25) 55%,
                #050b17 100%
            ),
            url("../images/bravex-hero.webp") !important;

        background-size: cover !important;
        background-position: left center !important;
        background-repeat: no-repeat !important;

        filter: brightness(.75) saturate(1.15) !important;
        transform: none !important;
        animation: none !important;
    }

    /* Suaviza a parte inferior */
    .bx-chapter-hero::after {
        background:
            linear-gradient(
                180deg,
                rgba(5, 11, 23, .15) 0%,
                transparent 35%,
                rgba(5, 11, 23, .2) 65%,
                #050b17 100%
            ) !important;
    }
}

/* Ocultar navegação 1/7 no mobile */
@media (max-width: 767px) {
    .bx-stage .bx-arrows {
        display: none !important;
    }
}

/* ==========================================
   BRAVEX - AJUSTES MOBILE
   ========================================== */

@media (max-width: 767px) {

    /* Ocultar BAIXAR PARA PC */
    .bx-stage .bx-actions > a.bx-btn-ghost.bx-btn-hero {
        display: none !important;
    }

    /* Remover visualmente o fundo quadrado da logo */
    .bx-hero-logo {
        background: transparent !important;
        box-shadow: none !important;
        mix-blend-mode: screen !important;
    }

    /* Garantir que o contêiner não tenha fundo */
    .bx-hero-title {
        background: transparent !important;
        box-shadow: none !important;
    }

}

/* BRAVEX - Correção da renderização da logo no iOS */
@media (max-width: 767px) {

    .bx-chapter-hero .bx-hero-logo {
        mix-blend-mode: screen !important;

        -webkit-transform: translateZ(0);
        transform: translateZ(0);

        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

}