#bna-main {
--bna-bg: #07090f;
--bna-bg-2: #0c0f1a;
--bna-surface: #111827;
--bna-surface-2: #151c2e;
--bna-border: rgba(255,255,255,.09);
--bna-border-gold: rgba(245,158,11,.24);
--bna-text: #e2e8f0;
--bna-muted: #94a3b8;
--bna-dim: #cbd5e1;
--bna-white: #fff;
--bna-gold: #f59e0b;
--bna-gold-2: #d97706;
--bna-green: #10b981;
--bna-red: #ef4444;
--bna-radius: 18px;
--bna-radius-sm: 12px;
--bna-shadow: 0 12px 40px rgba(0,0,0,.32);
--bna-ease: .24s ease;
background: var(--bna-bg);
color: var(--bna-text);
padding: 24px 0 56px;
overflow-x: hidden;
}
#bna-main *,
#bna-main *::before,
#bna-main *::after {
box-sizing: border-box;
}
.bna-wrap {
width: min(1300px, calc(100% - 32px));
margin: 0 auto;
}
.bna-breadcrumb {
margin-bottom: 18px;
color: var(--bna-muted);
font-size: .86rem;
}
.bna-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0;
padding: 0;
}
.bna-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 7px;
}
.bna-breadcrumb li:not(:last-child)::after {
content: '›';
color: rgba(203,213,225,.65);
}
.bna-breadcrumb a {
color: var(--bna-dim);
text-decoration: none;
}
.bna-breadcrumb a:hover {
color: var(--bna-gold);
}
.bna-hero,
.bna-transparency,
.bna-sortbar,
.bna-card-wrap,
.bna-empty {
border: 1px solid var(--bna-border);
border-radius: var(--bna-radius);
box-shadow: var(--bna-shadow);
}
.bna-hero {
position: relative;
overflow: hidden;
padding: clamp(30px, 5vw, 54px);
margin-bottom: 18px;
background:
radial-gradient(circle at 88% 12%, rgba(245,158,11,.16), transparent 30%),
radial-gradient(circle at 18% 80%, rgba(16,185,129,.06), transparent 28%),
linear-gradient(145deg, #101827 0%, #07090f 100%);
text-align: center;
}
.bna-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: 42px 42px;
opacity: .45;
pointer-events: none;
}
.bna-hero > * {
position: relative;
z-index: 1;
}
.bna-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(245,158,11,.28);
border-radius: 999px;
background: rgba(245,158,11,.10);
color: #fcd34d;
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
line-height: 1.2;
margin: 0 0 14px;
padding: 6px 13px;
text-transform: uppercase;
}
.bna-hero h1 {
color: var(--bna-white);
font-size: clamp(1.9rem, 5vw, 3.15rem);
font-weight: 900;
line-height: 1.12;
letter-spacing: -.03em;
margin: 0 0 16px;
}
.bna-hero p {
color: var(--bna-dim);
line-height: 1.78;
max-width: 830px;
margin: 0 auto;
}
.bna-status,
.bna-ad-label,
.bna-pill,
.bna-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 999px;
background: rgba(255,255,255,.055);
color: var(--bna-dim);
font-size: .74rem;
font-weight: 700;
line-height: 1.2;
padding: 5px 11px;
}
.bna-transparency {
background: rgba(255,255,255,.035);
color: var(--bna-dim);
font-size: .9rem;
line-height: 1.65;
margin: 0 0 18px;
padding: 15px 18px;
}
.bna-transparency strong {
color: var(--bna-white);
} .bna-hub-content .bna-section-head p a,
.bna-rating-method p a {
color: var(--bna-gold);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.bna-hub-content .bna-section-head p a:hover,
.bna-rating-method p a:hover {
color: var(--bna-gold-2);
}
.bna-sortbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
background: var(--bna-surface-2);
border-color: var(--bna-border-gold);
margin-bottom: 18px;
padding: 13px 18px;
}
.bna-sortbar form {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.bna-sortbar label {
color: var(--bna-muted);
font-size: .78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.bna-sortbar select {
min-width: 210px;
border: 1px solid var(--bna-border-gold);
border-radius: 10px;
background: var(--bna-surface);
color: var(--bna-text);
cursor: pointer;
font-size: .88rem;
outline: none;
padding: 10px 38px 10px 12px;
}
.bna-sortbar button {
border: 1px solid var(--bna-border-gold);
border-radius: 10px;
background: linear-gradient(135deg, var(--bna-gold), var(--bna-gold-2));
color: #09090b;
cursor: pointer;
font-size: .84rem;
font-weight: 850;
padding: 10px 14px;
}
.bna-count {
margin-left: auto;
color: var(--bna-muted);
font-size: .84rem;
font-weight: 700;
}
.bna-count strong {
color: var(--bna-gold);
}
.bna-listing {
display: grid;
gap: 16px;
}
.bna-card-wrap {
overflow: hidden;
background: var(--bna-surface);
transition: border-color var(--bna-ease), box-shadow var(--bna-ease), transform var(--bna-ease);
}
.bna-card-wrap:hover {
border-color: var(--bna-border-gold);
box-shadow: 0 14px 42px rgba(245,158,11,.13), var(--bna-shadow);
transform: translateY(-2px);
}
.bna-card-wrap--rank-1 {
border-color: rgba(245,158,11,.32);
background: linear-gradient(150deg, #150f00 0%, var(--bna-surface) 45%);
}
.bna-card {
display: grid;
grid-template-columns: minmax(180px, 244px) minmax(0, 1fr) minmax(170px, 220px) 140px 190px;
align-items: stretch;
min-height: 164px;
}
.bna-card-top,
.bna-feature-area,
.bna-bonus-area,
.bna-rating-area,
.bna-cta-area {
border-right: 1px solid var(--bna-border);
padding: 18px;
}
.bna-cta-area {
border-right: 0;
}
.bna-card-top {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 12px;
align-items: center;
}
.bna-rank {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-height: 112px;
}
.bna-rank span {
color: var(--bna-gold);
font-size: 2rem;
font-weight: 950;
letter-spacing: -.05em;
line-height: 1;
}
.bna-logo-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
min-width: 0;
}
.bna-logo-area img {
display: block;
width: auto;
max-width: 132px;
max-height: 86px;
object-fit: contain;
}
.bna-logo-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 132px;
min-height: 54px;
border-radius: 10px;
background: rgba(255,255,255,.05);
color: var(--bna-muted);
font-size: .72rem;
font-weight: 800;
padding: 10px;
text-align: center;
}
.bna-status-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.bna-status {
min-height: 24px;
font-size: .64rem;
padding: 4px 8px;
text-transform: uppercase;
letter-spacing: .06em;
}
.bna-status--green {
color: #8df5c8;
background: rgba(16,185,129,.12);
border-color: rgba(16,185,129,.36);
} .bna-status--gold {
color: var(--bna-gold);
background: rgba(245,158,11,.12);
border-color: rgba(245,158,11,.36);
font-weight: 800;
}
.bna-casino-name {
color: var(--bna-white);
font-size: .93rem;
line-height: 1.28;
margin: 0;
text-align: center;
}
.bna-casino-name a {
color: inherit;
text-decoration: none;
}
.bna-casino-name a:hover {
color: var(--bna-gold);
}
.bna-feature-area,
.bna-bonus-area,
.bna-rating-area,
.bna-cta-area {
display: flex;
flex-direction: column;
justify-content: center;
}
.bna-card-desc {
color: var(--bna-dim);
font-size: .84rem;
line-height: 1.58;
margin: 0 0 11px;
}
.bna-feature-list,
.bna-pro-list,
.bna-con-list {
display: grid;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.bna-feature-list li,
.bna-pro-list li,
.bna-con-list li {
position: relative;
color: var(--bna-dim);
font-size: .84rem;
line-height: 1.48;
padding-left: 16px;
}
.bna-feature-list li::before,
.bna-pro-list li::before,
.bna-con-list li::before {
content: '';
position: absolute;
left: 0;
top: .55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bna-gold);
}
.bna-con-list li::before {
background: var(--bna-red);
}
.bna-card-label,
.bna-small-label {
color: var(--bna-muted);
font-size: .68rem;
font-weight: 850;
letter-spacing: .09em;
line-height: 1.2;
margin: 0 0 8px;
text-transform: uppercase;
}
.bna-bonus-type {
color: var(--bna-muted);
font-size: .72rem;
font-weight: 750;
margin-bottom: 5px;
}
.bna-bonus-value {
color: var(--bna-white);
font-size: 1rem;
font-weight: 900;
line-height: 1.25;
margin-bottom: 8px;
}
.bna-bonus-value--muted,
.bna-no-rating,
.bna-muted {
color: var(--bna-muted);
font-size: .86rem;
line-height: 1.6;
}
.bna-pill {
align-self: flex-start;
border-color: rgba(245,158,11,.26);
background: rgba(245,158,11,.12);
color: var(--bna-gold);
margin-top: 5px;
}
.bna-pill--muted {
border-color: var(--bna-border);
background: rgba(255,255,255,.045);
color: var(--bna-muted);
}
.bna-rating-area {
align-items: center;
text-align: center;
}
.bna-score {
width: 100%;
max-width: 118px;
margin: 2px auto 0;
}
.bna-score-main {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin-bottom: 9px;
}
.bna-score-main strong {
color: var(--bna-white);
font-size: 1.55rem;
font-weight: 950;
letter-spacing: -.04em;
line-height: 1;
}
.bna-score-main span {
color: var(--bna-muted);
font-size: .78rem;
font-weight: 800;
}
.bna-score-bar {
position: relative;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,.10);
}
.bna-score-bar i {
display: block;
width: calc(var(--pct) * 1%);
height: 100%;
border-radius: inherit;
background: linear-gradient(135deg, var(--bna-gold), var(--bna-gold-2));
}
.bna-cta-area {
align-items: center;
gap: 9px;
}
.bna-ad-label {
min-height: 22px;
border-radius: 6px;
font-size: .58rem;
letter-spacing: .12em;
padding: 3px 8px;
text-transform: uppercase;
}
.bna-btn {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
border-radius: 999px;
font-size: .88rem;
font-weight: 900;
line-height: 1.15;
min-height: 42px;
padding: 11px 16px;
text-align: center;
text-decoration: none !important;
transition: transform var(--bna-ease), box-shadow var(--bna-ease), border-color var(--bna-ease), color var(--bna-ease);
}
.bna-btn--primary {
border: 1px solid transparent;
background: linear-gradient(135deg, var(--bna-gold), var(--bna-gold-2));
color: #09090b !important;
box-shadow: 0 8px 28px rgba(245,158,11,.24);
}
.bna-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(245,158,11,.32);
}
.bna-btn--secondary {
border: 1px solid var(--bna-border);
background: transparent;
color: var(--bna-dim) !important;
}
.bna-btn--secondary:hover {
border-color: var(--bna-border-gold);
color: var(--bna-gold) !important;
}
.bna-cta-note {
color: var(--bna-muted);
font-size: .76rem;
line-height: 1.45;
margin: 0;
text-align: center;
}
.bna-details {
border-top: 1px solid var(--bna-border);
}
.bna-details summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: rgba(255,255,255,.025);
color: var(--bna-dim);
cursor: pointer;
font-size: .84rem;
font-weight: 800;
list-style: none;
padding: 14px 20px;
}
.bna-details summary::-webkit-details-marker {
display: none;
}
.bna-details[open] summary,
.bna-details summary:hover {
color: var(--bna-gold);
}
.bna-detail-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
padding: 20px;
}
.bna-detail-col {
min-width: 0;
}
.bna-detail-col h3 {
color: var(--bna-white);
font-size: .96rem;
line-height: 1.3;
margin: 0 0 12px;
}
.bna-detail-col h4 {
color: var(--bna-dim);
font-size: .78rem;
letter-spacing: .05em;
margin: 0 0 9px;
text-transform: uppercase;
}
.bna-facts {
display: grid;
gap: 9px;
margin: 0;
}
.bna-facts div {
border-bottom: 1px dashed rgba(255,255,255,.09);
padding-bottom: 8px;
}
.bna-facts dt {
color: var(--bna-muted);
font-size: .7rem;
font-weight: 850;
letter-spacing: .07em;
margin-bottom: 3px;
text-transform: uppercase;
}
.bna-facts dd {
color: var(--bna-dim);
font-size: .85rem;
line-height: 1.5;
margin: 0;
}
.bna-chip-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0 0 12px;
}
.bna-chip {
min-height: 26px;
font-size: .72rem;
padding: 5px 9px;
}
.bna-procon {
display: grid;
gap: 16px;
}
.bna-empty {
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--bna-surface);
margin-top: 22px;
padding: clamp(22px, 4vw, 36px);
}
.bna-empty h2 {
color: var(--bna-white);
margin: 0 0 8px;
}
.bna-empty p {
color: var(--bna-dim);
margin: 0;
}
@media (max-width: 1180px) {
.bna-card {
grid-template-columns: 220px minmax(0, 1fr) minmax(170px, 210px) 160px;
}
.bna-cta-area {
grid-column: 1 / -1;
border-top: 1px solid var(--bna-border);
border-right: 0;
flex-direction: row;
justify-content: flex-end;
}
.bna-ad-label {
width: auto;
}
.bna-btn {
width: auto;
min-width: 170px;
}
.bna-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.bna-wrap {
width: min(100% - 24px, 1300px);
}
.bna-card {
display: block;
}
.bna-card-top,
.bna-feature-area,
.bna-bonus-area,
.bna-rating-area,
.bna-cta-area {
border-right: 0;
border-bottom: 1px solid var(--bna-border);
padding: 17px;
}
.bna-cta-area {
border-bottom: 0;
flex-direction: column;
align-items: stretch;
}
.bna-card-top {
grid-template-columns: 58px minmax(0, 1fr);
}
.bna-rank {
min-height: 118px;
}
.bna-bonus-area {
align-items: flex-start;
text-align: left;
}
.bna-rating-area {
align-items: center;
text-align: center;
}
.bna-score {
margin: 2px auto 0;
}
.bna-ad-label {
justify-content: center;
text-align: center;
width: 100%;
}
.bna-btn {
width: 100%;
min-width: 0;
}
.bna-detail-grid {
grid-template-columns: 1fr;
}
.bna-sortbar {
align-items: stretch;
flex-direction: column;
}
.bna-sortbar form {
align-items: stretch;
flex-direction: column;
width: 100%;
}
.bna-sortbar select {
min-width: 0;
width: 100%;
}
.bna-count {
margin-left: 0;
}
}
@media (max-width: 430px) {
#bna-main {
padding-top: 16px;
}
.bna-wrap {
width: min(100% - 18px, 1300px);
}
.bna-hero {
padding: 26px 16px;
}
.bna-card-top {
grid-template-columns: 46px minmax(0, 1fr);
gap: 8px;
padding: 15px;
}
.bna-rank span {
font-size: 1.7rem;
}
.bna-logo-area img,
.bna-logo-placeholder {
max-width: 118px;
}
.bna-details summary {
padding: 13px 15px;
}
.bna-detail-grid {
padding: 16px;
}
} .bna-hub-content,
.bna-info-split,
.bna-hub-faq,
.bna-related-links {
border: 1px solid var(--bna-border);
border-radius: var(--bna-radius);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--bna-surface);
box-shadow: var(--bna-shadow);
margin-top: 22px;
}
.bna-hub-content,
.bna-hub-faq {
padding: clamp(22px, 4vw, 36px);
}
.bna-hub-content .bna-kicker,
.bna-hub-faq .bna-kicker {
margin-bottom: 12px;
}
.bna-criteria-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 22px;
}
.bna-criteria-grid article,
.bna-info-split article,
.bna-faq-list-live details {
border: 1px solid var(--bna-border);
border-radius: var(--bna-radius-sm);
background: rgba(255,255,255,.035);
}
.bna-criteria-grid article {
padding: 18px;
}
.bna-criteria-grid h3,
.bna-info-split h2 {
color: var(--bna-white);
line-height: 1.25;
margin: 0 0 10px;
}
.bna-criteria-grid h3 {
font-size: 1rem;
}
.bna-criteria-grid p,
.bna-info-split p,
.bna-faq-list-live p {
color: var(--bna-dim);
font-size: .9rem;
line-height: 1.75;
margin: 0;
}
.bna-info-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
.bna-info-split article {
border: 0;
border-radius: 0;
background: transparent;
padding: clamp(22px, 4vw, 34px);
}
.bna-info-split article + article {
border-left: 1px solid var(--bna-border);
}
.bna-info-split h2 {
font-size: clamp(1.16rem, 2.4vw, 1.55rem);
}
.bna-info-split p + p {
margin-top: 12px;
}
.bna-faq-list-live {
display: grid;
gap: 10px;
margin-top: 18px;
}
.bna-faq-list-live details {
overflow: hidden;
}
.bna-faq-list-live summary {
color: var(--bna-white);
cursor: pointer;
font-size: .96rem;
font-weight: 850;
line-height: 1.4;
list-style: none;
padding: 17px 18px;
}
.bna-faq-list-live summary::-webkit-details-marker {
display: none;
}
.bna-faq-list-live summary:hover,
.bna-faq-list-live details[open] summary {
color: var(--bna-gold);
}
.bna-faq-list-live p {
border-top: 1px solid var(--bna-border);
padding: 16px 18px 18px;
}
.bna-faq-list-live code {
color: var(--bna-gold);
font-size: .88em;
white-space: normal;
}
.bna-related-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 16px 18px;
}
.bna-related-links span {
color: var(--bna-muted);
font-size: .82rem;
font-weight: 850;
letter-spacing: .06em;
text-transform: uppercase;
}
.bna-related-links a {
border: 1px solid var(--bna-border);
border-radius: 999px;
color: var(--bna-dim);
font-size: .86rem;
font-weight: 750;
padding: 8px 12px;
text-decoration: none;
}
.bna-related-links a:hover {
border-color: var(--bna-border-gold);
color: var(--bna-gold);
} .bna-guide-bar,
.bna-rating-method {
border: 1px solid var(--bna-border);
border-radius: var(--bna-radius);
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--bna-surface);
box-shadow: var(--bna-shadow);
margin-bottom: 18px;
}
.bna-guide-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
.bna-guide-bar article {
padding: 16px 18px;
}
.bna-guide-bar article + article {
border-left: 1px solid var(--bna-border);
}
.bna-guide-bar strong {
color: var(--bna-white);
display: block;
font-size: .9rem;
line-height: 1.35;
margin-bottom: 6px;
}
.bna-guide-bar span {
color: var(--bna-dim);
display: block;
font-size: .84rem;
line-height: 1.62;
}
.bna-rating-method {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
gap: 24px;
margin-top: 22px;
padding: clamp(22px, 4vw, 36px);
}
.bna-rating-method h2 {
color: var(--bna-white);
font-size: clamp(1.28rem, 2.7vw, 1.85rem);
line-height: 1.2;
margin: 0 0 10px;
}
.bna-rating-method p {
color: var(--bna-dim);
line-height: 1.75;
margin: 0;
}
.bna-rating-method-list {
display: grid;
gap: 9px;
list-style: none;
margin: 0;
padding: 0;
}
.bna-rating-method-list li {
color: var(--bna-dim);
font-size: .9rem;
line-height: 1.45;
padding-left: 18px;
position: relative;
}
.bna-rating-method-list li::before {
background: var(--bna-gold);
border-radius: 50%;
content: '';
height: 6px;
left: 0;
position: absolute;
top: .58em;
width: 6px;
}
@media (max-width: 900px) {
.bna-guide-bar,
.bna-rating-method {
grid-template-columns: 1fr;
}
.bna-guide-bar article + article {
border-left: 0;
border-top: 1px solid var(--bna-border);
}
}
@media (max-width: 720px) {
.bna-info-split {
grid-template-columns: 1fr;
}
.bna-info-split article + article {
border-left: 0;
border-top: 1px solid var(--bna-border);
}
.bna-related-links {
align-items: stretch;
flex-direction: column;
}
.bna-related-links a {
text-align: center;
}
}