/* Homepage and recovery page: shared site shell, a focused content layer. */
.landing-v2 { --bn-line: #ffffff18; --bn-muted: #a6bad2; --bn-gold: #ffcf52; }
.landing-v2 .container { width: min(1180px, calc(100% - 32px)); text-align: left; }
.landing-v2 .container * { box-sizing: border-box; }
.landing-v2 .container a { text-decoration: none; }
.landing-v2 .container a:focus-visible { outline: 3px solid #ffcf52; outline-offset: 5px; }
.bn-skip { position: fixed; top: -100px; left: 20px; z-index: 10001; background: #ffcf52; color: #071327; padding: 14px 20px; border-radius: 10px; font-weight: 800; }
.bn-skip:focus { top: 12px; }
.bn-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #8fbbde; font: 800 10px/1.4 'Segoe UI', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bn-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #88ecaa; box-shadow: 0 0 16px #88ecaa60; }
.bn-hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 370px; align-items: center; gap: 24px; padding: 42px 52px; border: 1px solid #749ae875; border-radius: 24px; overflow: hidden; position: relative; background: radial-gradient(ellipse at 82% 45%, #468ce746, transparent 53%), linear-gradient(115deg, #203e78, #172f5b 55%, #122642); box-shadow: inset 0 1px 0 #c5ddff30, 0 6px 0 #060e2480, 0 20px 42px #0003; }
.bn-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#b1d7ff30 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 50%, #000); opacity: .65; }
.bn-hero-copy { position: relative; z-index: 2; }
.bn-hero h1, .bn-error-hero h1 { margin: 19px 0 18px; font-family: 'Lilita One', 'Segoe UI', sans-serif; font-size: clamp(44px, 5.1vw, 68px); line-height: 1.02; font-weight: 400; letter-spacing: -.015em; color: #fff; text-shadow: 0 4px 0 #0005; }
.bn-hero h1 em, .bn-error-hero h1 em, .bn-brawlytix h2 em { font-style: normal; color: var(--bn-gold); }
.bn-hero p, .bn-error-copy p { max-width: 440px; color: #d3e0f2; font: 400 15px/1.8 'Segoe UI', sans-serif; margin: 0 0 24px; }
.bn-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.landing-v2 .container .big-cta { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 14px 22px; margin: 0; background: #ffcf52; color: #192238; font: 800 14px/1.2 'Segoe UI', sans-serif; border: 1px solid #ffdc80; border-radius: 10px; box-shadow: 0 3px 0 #ab782e; text-shadow: none; }
.bn-hero-art { position: relative; z-index: 1; height: 300px; display: grid; place-items: center; isolation: isolate; }
.bn-orbit { position: absolute; width: 280px; height: 280px; border: 1px solid #a8d6ff2e; border-radius: 50%; background: radial-gradient(circle, #7ee8b82c, #72a5ef10 55%, transparent 70%); box-shadow: 0 0 0 25px #93bbff07, 0 0 0 60px #93bbff04; }
.bn-art-main { position: relative; width: 242px; height: 242px; object-fit: contain; transform: rotate(-8deg) translateY(-4px); filter: drop-shadow(0 18px 16px #0006); }
.bn-art-coins { position: absolute; width: 88px; height: 88px; object-fit: contain; right: 2%; top: 20px; transform: rotate(12deg); filter: drop-shadow(0 10px 10px #0005); }
.bn-art-gem { position: absolute; width: 64px; height: 64px; object-fit: contain; left: 3%; bottom: 34px; transform: rotate(-12deg); filter: drop-shadow(0 10px 10px #0005); }
.bn-art-sticker { position: absolute; bottom: 3px; right: 7%; display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, #ffe9a0, #ffca4f); color: #172136; border: 1px solid #ffeda9; padding: 10px 15px; border-radius: 10px; font-size: 10px; font-weight: 900; letter-spacing: .04em; transform: rotate(-4deg); box-shadow: 0 3px 0 #956127, 0 10px 20px #0004; }
.bn-art-sticker { min-height: 44px; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.bn-art-sticker:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 5px 0 #956127, 0 14px 24px #0005; }
.bn-art-sticker:active { transform: rotate(0) translateY(2px); box-shadow: 0 1px 0 #956127; }
.landing-v2 .bn-art-sticker:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.bn-art-sticker b { font-size: 22px; }
.bn-block { margin-top: 48px; scroll-margin-top: 105px; }
.bn-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 20px; }
.bn-section-heading h2 { font-family: 'Lilita One', 'Segoe UI', sans-serif; font-size: clamp(27px, 3vw, 35px); font-weight: 400; margin: 7px 0 0; color: #f4f8ff; line-height: 1.1; }
.bn-section-heading > p { color: var(--bn-muted); font: 400 12px/1.6 'Segoe UI', sans-serif; margin: 0 0 3px; }
.bn-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bn-game { display: block; overflow: hidden; border-radius: 17px; border: 1px solid var(--card-edge); background: var(--card-bg); color: #fff; box-shadow: 0 5px 0 #030a1660, inset 0 1px 0 #ffffff20; transition: transform 160ms ease, border-color 160ms ease; }
.bn-game:hover { transform: translateY(-4px); border-color: #ffffff60; }
.bn-game-art { height: 158px; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #ffffff30, transparent 75%), #00000015; border-bottom: 1px solid #ffffff25; }
.bn-game-logo { width: 124px; height: 68px; object-fit: contain; position: relative; z-index: 1; }
.bn-game-reward { position: absolute; width: 108px; height: 108px; object-fit: contain; right: 10px; bottom: -28px; transform: rotate(-12deg); opacity: .85; filter: drop-shadow(0 5px 5px #0005); }
.bn-game-copy { padding: 19px 20px 17px; }
.bn-game h3 { font: 400 23px/1.15 'Lilita One', 'Segoe UI', sans-serif; margin: 0 0 6px; }
.bn-game p { color: #e1e8f1; font: 400 12px/1.5 'Segoe UI', sans-serif; margin: 0 0 20px; }
.bn-game-copy > span { display: flex; justify-content: space-between; color: #e3eefa; font-size: 12px; font-weight: 750; padding-top: 13px; border-top: 1px solid var(--bn-line); }
.bn-game-copy b { color: #ffcf52; }
.bn-categories { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 11px; }
.bn-categories > span { color: #8ea4bd; margin-right: 7px; }
.bn-categories a { border: 1px solid var(--bn-line); border-radius: 7px; padding: 9px 12px; color: #bed4ec; background: #102035; }
.bn-discover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.bn-discover-card { display: flex; align-items: center; gap: 22px; padding: 25px; border: 1px solid #e99a59; border-radius: 16px; background: radial-gradient(ellipse at 0% 20%, #f6ac4540, transparent 65%), linear-gradient(120deg, #7c3e32, #4c2846); color: #fff; box-shadow: 0 5px 0 #0004; }
.bn-discover-card > img { width: 82px; height: 82px; object-fit: contain; flex-shrink: 0; transform: rotate(-6deg); }
.bn-discover-card h2 { font: 400 23px/1.1 'Lilita One', 'Segoe UI', sans-serif; margin: 8px 0; }
.bn-discover-card p { font: 400 12px/1.5 'Segoe UI', sans-serif; color: #ffe5d7; margin: 0 0 13px; }
.bn-discover-card b { color: #fff1af; font-size: 11px; }
.bn-daily { background: radial-gradient(ellipse at 0% 30%, #ed70c944, transparent 65%), linear-gradient(120deg, #6e296a, #412c70); border-color: #d77edc; }
.bn-channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; grid-auto-rows: 1fr; }
.bn-channel { display: flex; align-items: center; gap: 14px; padding: 22px 18px; min-height: 104px; border: 1px solid var(--card-edge); border-radius: 14px; color: #fff; background: var(--card-bg); box-shadow: 0 4px 0 #0004, inset 0 1px 0 #ffffff18; transition: transform 160ms ease, filter 160ms ease; }
.bn-channel:hover { transform: translateY(-3px); filter: brightness(1.13); }
.bn-channel-whatsapp { --card-bg: linear-gradient(125deg, #24664a, #164631); --card-edge: #51b982; }
.bn-channel img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.bn-channel h3 { margin: 0 0 6px; font: 700 18px/1.25 'Segoe UI', Arial, sans-serif; color: #fff; letter-spacing: 0; text-shadow: none; }
.bn-channel b { display: block; font: 500 14px/1.4 'Segoe UI', Arial, sans-serif; color: #fff; letter-spacing: 0; text-shadow: none; }
.bn-channel > div { min-width: 0; }
.bn-channel > span { margin-left: auto; align-self: flex-start; color: #ffffffbf; font-size: 18px; }
.bn-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bn-project { display: flex; flex-direction: column; padding: 24px; color: #fff; background: var(--card-bg); border: 1px solid var(--card-edge); border-radius: 16px; box-shadow: 0 5px 0 #0004, inset 0 1px 0 #ffffff1a; }
.bn-project:hover { filter: brightness(1.12); }
.bn-project-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.bn-project-top img { width: 64px; height: 64px; object-fit: contain; }
.bn-project-top > span { color: #ffffffcc; font-size: 20px; }
.bn-project h3 { margin: 9px 0 12px; font: 400 24px/1.13 'Lilita One', 'Segoe UI', sans-serif; }
.bn-project p { margin: 0 0 24px; color: #e1e5ef; font: 400 12px/1.65 'Segoe UI', sans-serif; }
.bn-project > b { margin-top: auto; font-size: 10px; color: #fff; overflow-wrap: anywhere; }
.bn-project-cosmetics { --card-bg: linear-gradient(145deg, #51642b, #2b432f); --card-edge: #b8e24d; }
.bn-project-contear { --card-bg: linear-gradient(145deg, #5f369a, #352365); --card-edge: #ad86fb; }
.bn-project-extra { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 15px; font-size: 11px; color: #8ea6bf; }
.bn-project-extra a { color: #c2d4e6; }
.bn-brawlytix { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 28px; margin-top: 48px; border: 1px solid #72b88f; border-radius: 24px; color: #f0fae9; background: radial-gradient(ellipse at 0% 0%, #36805d55, transparent 65%), linear-gradient(120deg, #163d30, #102c27); box-shadow: inset 0 1px 0 #e1ffe324, 0 6px 0 #081d19, 0 20px 36px #0003; overflow: hidden; }
.bn-brawlytix h2 { font: 400 clamp(36px, 3.7vw, 48px)/1.03 'Lilita One', 'Segoe UI', sans-serif; margin: 22px 0 15px; color: #f5ffe9; letter-spacing: -.01em; }
.bn-brawlytix p { font: 400 14px/1.7 'Segoe UI', sans-serif; color: #bed8c7; max-width: 340px; margin: 0 0 25px; }
.bn-meta-preview { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 294px; text-align: center; gap: 0; padding: 30px 16px; border: 1px solid #d5ffd391; border-radius: 18px; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 35%, #f4ffe6, #d0ecc580 55%, transparent 85%), repeating-linear-gradient(0deg, transparent 0 27px, #36755115 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, #36755115 27px 28px), #b8ddbd; box-shadow: inset 0 1px 0 #fff9; }
.bn-icon-stack { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-block: 15px; gap: 12px; }
.bn-icon-stack img { position: relative; object-fit: contain; width: 92px; height: 92px; padding: 7px; border-radius: 14px; border: 1px solid #fafff3; background: #f4ffedb5; transform: rotate(-7deg) translateY(10px); filter: none; box-shadow: 0 5px 0 #58866a35, 0 14px 20px #184f3633; }
.bn-icon-stack img:nth-child(2) { width: 128px; height: 128px; transform: translateY(-15px); z-index: 1; margin-inline: 0; }
.bn-icon-stack img:nth-child(3) { transform: rotate(7deg) translateY(10px); }
.landing-v2 .footer .social-list { flex-wrap: wrap; }
.landing-v2 [data-home-featured-slot]:not([hidden]) { margin-top: 16px; }

/* Distinct surfaces keep every destination legible against the site background. */
.bn-game-brawl { --card-bg: linear-gradient(145deg, #2456a6, #183b70); --card-edge: #75b5fa; }
.bn-game-royale { --card-bg: linear-gradient(145deg, #5746a4, #353576); --card-edge: #a99bf6; }
.bn-game-clash { --card-bg: linear-gradient(145deg, #90622a, #61412d); --card-edge: #eeb968; }
.bn-game-hayday { --card-bg: linear-gradient(145deg, #537a30, #31562e); --card-edge: #a9d878; }
.bn-channel-instagram { --card-bg: linear-gradient(125deg, #8c395b, #592b76); --card-edge: #f48db0; }
.bn-channel-twitter { --card-bg: linear-gradient(125deg, #245776, #223749); --card-edge: #61b8e3; }
.bn-channel-discord { --card-bg: linear-gradient(125deg, #514b9a, #33316a); --card-edge: #a19bff; }
.bn-channel-telegram { --card-bg: linear-gradient(125deg, #176c8e, #1b456b); --card-edge: #60cdea; }
.bn-channel-youtube { --card-bg: linear-gradient(125deg, #963a43, #61283b); --card-edge: #f18a8d; }
.bn-channel-tiktok { --card-bg: linear-gradient(125deg, #315660, #50304b); --card-edge: #6ce2db; }
.bn-channel-linktree { --card-bg: linear-gradient(125deg, #596b2c, #3c4c23); --card-edge: #c1de76; }
.bn-channel .bn-linktree-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; margin: 0; align-self: center; color: #d9ff89; font: 800 42px/1 sans-serif; }
.bn-project-clash { --card-bg: linear-gradient(145deg, #865a24, #57352b); --card-edge: #e6ac66; }
.bn-project-royale { --card-bg: linear-gradient(145deg, #296b94, #224976); --card-edge: #72c9ed; }
.bn-brawlytix .bn-eyebrow { color: #d5e9d5; font-size: 11px; letter-spacing: .16em; }
.landing-v2 .bn-brawlytix .big-cta { background: #d5f799; border-color: #ecffcd; color: #183c28; box-shadow: 0 3px 0 #7ca454, 0 8px 18px #0002; }
.bn-brawlytix .bn-meta-preview { border-color: #d5ffd391; }
.bn-categories a:nth-of-type(1) { background: #453679; border-color: #987ade; color: #f5eeff; }
.bn-categories a:nth-of-type(2) { background: #71335e; border-color: #cf79af; color: #fff0fa; }
.bn-categories a:nth-of-type(3) { background: #23566d; border-color: #65b8d5; color: #e9faff; }
.bn-categories a:nth-of-type(4) { background: #675125; border-color: #cba34e; color: #fff5d9; }


.bn-hero::before { content: ''; position: absolute; top: 0; left: 7%; width: 68%; height: 1px; background: linear-gradient(90deg, transparent, #d8ecffb0, transparent); }
.bn-hero h1 { margin-top: 0; margin-bottom: 20px; }
.bn-hero p { text-wrap: pretty; }
.bn-hero h1 em { color: #ffda70; text-shadow: 0 3px 0 #8e622c70, 0 8px 25px #0002; }
.bn-hero .bn-actions { margin-top: 30px; }
.landing-v2 .bn-hero .big-cta { background: linear-gradient(120deg, #ffe59a, #ffcc56); border-color: #ffe9ac; box-shadow: 0 3px 0 #a27832, 0 8px 22px #06132d55; }
.bn-brawlytix-copy { padding: 12px 20px; }
.bn-brawlytix h2 em { color: #d5f799; font-style: normal; }
.bn-brawlytix .bn-eyebrow img { width: 32px; height: 32px; object-fit: contain; }
.bn-meta-preview::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1px solid #fff9; box-shadow: 0 0 0 25px #ffffff20, 0 0 0 50px #ffffff12; z-index: -1; }

@media (max-width: 900px) {
 .bn-hero { padding: 32px; grid-template-columns: 1.2fr .8fr; }
 .bn-hero-art { transform: scale(.85); }
 .bn-game-grid, .bn-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .bn-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .bn-discover-card { gap: 14px; padding: 20px; }
 .bn-discover-card > img { width: 60px; height: 60px; }
 .bn-brawlytix { gap: 16px; padding: 22px; }
 .bn-brawlytix .bn-icon-stack { gap: 7px; }
 .bn-brawlytix .bn-icon-stack img { width: clamp(46px, 8vw, 74px); height: auto; aspect-ratio: 1; padding: 5px; }
 .bn-brawlytix .bn-icon-stack img:nth-child(2) { width: clamp(64px, 11vw, 100px); height: auto; }
}
@media (max-width: 600px) {
 .landing-v2 .container { width: calc(100% - 24px); }
 .bn-hero { grid-template-columns: 1fr; padding: 28px 24px 16px; }
 .bn-hero h1 { font-size: clamp(38px, 12vw, 48px); }
 .bn-hero p { font-size: 13px; }
 .bn-hero-art { height: 195px; transform: none; margin-top: 20px; }
 .bn-orbit { width: 200px; height: 200px; }
 .bn-art-main { width: 185px; height: 185px; }
 .bn-art-coins { width: 80px; height: 80px; right: 3px; }
 .bn-art-gem { width: 55px; height: 55px; left: 0; }
 .bn-art-sticker { padding: 8px 10px; font-size: 9px; bottom: 8px; }
 .bn-actions { gap: 14px; }
 .landing-v2 .bn-actions .big-cta { font-size: 12px; padding-inline: 15px; gap: 12px; }
 .bn-block { margin-top: 34px; }
 .bn-section-heading { display: block; }
 .bn-section-heading > p { margin-top: 10px; }
 .bn-game-grid, .bn-projects { gap: 10px; }
 .bn-game-art { height: 132px; }
 .bn-game-logo { width: 105px; height: 60px; }
 .bn-game-reward { width: 82px; height: 82px; right: -4px; bottom: -18px; }
 .bn-game-copy { padding: 15px 12px; }
 .bn-game h3 { font-size: 20px; }
 .bn-game p { font-size: 10px; min-height: 30px; margin-bottom: 10px; }
 .bn-game-copy > span { font-size: 10px; }
 .bn-categories > span { width: 100%; }
 .bn-discover { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
 .bn-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .bn-channel { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-content: center; gap: 8px; padding: 12px; min-height: 88px; border-radius: 12px; }
 .bn-channel > div { display: contents; }
 .bn-channel img, .bn-channel .bn-linktree-icon { grid-column: 1; grid-row: 1; width: 28px; height: 28px; font-size: 30px; }
 .bn-channel h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; }
 .bn-channel b { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
 .bn-channel > span:last-child { display: none; }
 .bn-project { padding: 17px; }
 .bn-project-top { margin-bottom: 20px; }
 .bn-project-top img { width: 52px; height: 52px; }
 .bn-project h3 { font-size: 22px; }
 .bn-project p { font-size: 11px; }
 .bn-brawlytix { grid-template-columns: 1fr; padding: 22px; margin-top: 34px; gap: 24px; }
 .bn-brawlytix .bn-brawlytix-copy { padding: 4px; }
 .bn-brawlytix h2 { margin-top: 18px; }
 .bn-meta-preview { min-height: 210px; padding: 24px 10px; }
 .bn-brawlytix .bn-icon-stack img { width: clamp(50px, 17vw, 74px); }
 .bn-brawlytix .bn-icon-stack img:nth-child(2) { width: clamp(74px, 23vw, 100px); }
}
@media (max-width: 380px) { .bn-channel h3 { font-size: 14px; } .bn-channel { padding: 10px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .landing-v2::before { animation: none; } .landing-v2 .container a { transition: none; } .bn-game:hover, .bn-channel:hover, .bn-art-sticker:hover, .bn-art-sticker:active { transform: none; } }

.bn-discover .bn-creators{background:linear-gradient(120deg,#243f69,#233152);border-color:#8c9be0}.bn-creators img{object-fit:contain}