:root {
--color-primary: #1DBA84;
--color-secondary: #0E7C66;
--color-accent: #F3C85A;
--color-bg: #081311;
--color-surface: #12211D;
--color-text-pri: #EAF7F2;
--color-text-sec: #A9C5BB;
--font-heading: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
--radius-md: 8px;
--radius-lg: 16px;
--transition: all 0.3s ease;
}
*, *::before, *::after { box-sizing: border-box; }
body.boomtop_body {
margin: 0;
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text-pri);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-accent); margin-top: 0; }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }
.boomtop_container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.boomtop_header {
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-secondary);
position: sticky;
top: 0;
z-index: 100;
}
.boomtop_header_inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
max-width: 1200px;
margin: 0 auto;
}
.boomtop_logo a {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
}
.boomtop_nav { display: flex; gap: 20px; }
.boomtop_nav a { color: var(--color-text-pri); font-weight: 500; }
.boomtop_nav a:hover { color: var(--color-accent); }
.boomtop_header_actions { display: flex; align-items: center; gap: 15px; }
.boomtop_age_badge {
background: var(--color-secondary);
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.boomtop_wallet_chip {
background: rgba(29,186,132,0.1);
border: 1px solid var(--color-primary);
padding: 6px 12px;
border-radius: 20px;
display: flex;
gap: 5px;
align-items: center;
}
.boomtop_currency_symbol { color: var(--color-accent); font-weight: bold; }
.boomtop_btn {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
padding: 10px 20px;
border-radius: var(--radius-md);
transition: var(--transition);
display: inline-block;
text-align: center;
}
.boomtop_btn_primary {
background: var(--color-primary);
color: var(--color-bg);
}
.boomtop_btn_primary:hover {
background: var(--color-accent);
color: var(--color-bg);
}
.boomtop_btn_secondary {
border: 1px solid var(--color-primary);
color: var(--color-primary);
}
.boomtop_btn_secondary:hover {
background: var(--color-primary);
color: var(--color-bg);
}
.boomtop_burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
}
.boomtop_burger_line {
width: 25px;
height: 3px;
background: var(--color-primary);
}
.boomtop_hero_asymmetric {
display: flex;
min-height: 80vh;
background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface) 100%);
}
.boomtop_hero_left {
flex: 1;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.boomtop_hero_title { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }
.boomtop_hero_subtitle { font-size: 1.2rem; color: var(--color-text-sec); margin-bottom: 30px; max-width: 500px; }
.boomtop_hero_right {
flex: 1;
background: radial-gradient(circle at center, var(--color-secondary) 0%, var(--color-bg) 80%);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.boomtop_proof_cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.boomtop_proof_card {
background: rgba(18,33,29,0.8);
border-left: 4px solid var(--color-accent);
padding: 20px;
border-radius: var(--radius-md);
backdrop-filter: blur(5px);
}
.boomtop_proof_card strong { display: block; color: var(--color-primary); font-size: 1.1rem; }
.boomtop_games_band { padding: 60px 0; background: var(--color-bg); }
.boomtop_section_title { text-align: center; font-size: 2.5rem; margin-bottom: 10px; }
.boomtop_section_desc { text-align: center; color: var(--color-text-sec); margin-bottom: 40px; }
[data-social-games-zone] {
display: grid;
grid-template-columns: 1fr;
max-width: 960px;
width: 100%;
margin: 0 auto;
gap: 40px;
}
[data-game-card] {
background: var(--color-surface);
border: 1px solid var(--color-secondary);
border-radius: var(--radius-lg);
padding: 30px;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
.boomtop_game_header { margin-bottom: 20px; text-align: center; }
.boomtop_game_header h3 { margin: 0; font-size: 1.8rem; }
.boomtop_game_header span { color: var(--color-text-sec); font-size: 0.9rem; }
[data-slot-stage] {
background: #000;
border: 2px solid var(--color-secondary);
border-radius: var(--radius-md);
min-height: clamp(260px, 24vw, 360px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
overflow: hidden;
}
[data-slot-reel-window] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
height: 100%;
padding: 10px;
overflow: hidden;
position: relative;
}
[data-slot-reel] {
background: rgba(255,255,255,0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
position: relative;
}
[data-slot-symbol] {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.boomtop_payline {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: rgba(243, 200, 90, 0.5);
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
[data-wheel-stage] {
background: #000;
border: 2px solid var(--color-secondary);
border-radius: 50%;
aspect-ratio: 1/1;
max-width: 400px;
margin: 0 auto 20px;
position: relative;
display: grid;
grid-template-areas: "wheel";
overflow: hidden;
}
[data-wheel-img] {
grid-area: wheel;
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform-origin: center;
border-radius: 50%;
}
[data-wheel-pointer] {
grid-area: wheel;
place-self: start center;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid var(--color-accent);
z-index: 10;
transform: translateY(-5px);
}
.boomtop_game_controls {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.boomtop_bet_select {
background: var(--color-bg);
color: var(--color-text-pri);
border: 1px solid var(--color-secondary);
padding: 8px;
border-radius: 4px;
}
.boomtop_roulette_choices {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.boomtop_bet_btn {
background: var(--color-bg);
border: 1px solid var(--color-secondary);
color: var(--color-text-pri);
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: var(--transition);
}
.boomtop_bet_btn.is-active, .boomtop_bet_btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
.boomtop_game_status {
text-align: center;
margin-top: 15px;
font-weight: 500;
color: var(--color-accent);
min-height: 24px;
}
.boomtop_center_cta { text-align: center; margin-top: 40px; }
.boomtop_editorial_block, .boomtop_info_strip, .boomtop_faq_block, .boomtop_content_block {
padding: 60px 0;
}
.boomtop_alt_bg { background: var(--color-surface); }
.boomtop_split_grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.boomtop_img_responsive { border-radius: var(--radius-md); }
.boomtop_info_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.boomtop_info_card {
background: var(--color-surface);
padding: 30px;
border-radius: var(--radius-md);
border-top: 3px solid var(--color-primary);
}
.boomtop_list { padding-left: 20px; }
.boomtop_list li { margin-bottom: 10px; }
.boomtop_accordion_item {
border-bottom: 1px solid var(--color-secondary);
}
.boomtop_accordion_trigger {
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--color-text-pri);
font-size: 1.1rem;
font-weight: 600;
padding: 20px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.boomtop_accordion_trigger::after {
content: '+';
color: var(--color-primary);
}
.boomtop_accordion_trigger[aria-expanded="true"]::after { content: '-'; }
.boomtop_accordion_panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.boomtop_accordion_trigger[aria-expanded="true"] + .boomtop_accordion_panel {
max-height: 200px;
}
.boomtop_accordion_panel p { padding-bottom: 20px; margin: 0; color: var(--color-text-sec); }
.boomtop_easter_egg_section { text-align: center; padding: 40px 0; }
.boomtop_egg_wrapper { display: inline-block; cursor: pointer; }
.boomtop_egg_img { width: 60px; opacity: 0.5; transition: var(--transition); }
.boomtop_egg_wrapper:hover .boomtop_egg_img { opacity: 1; }
.boomtop_egg_hint { font-size: 0.8rem; color: var(--color-text-sec); opacity: 0; transition: var(--transition); }
.boomtop_egg_wrapper:hover .boomtop_egg_hint { opacity: 1; }
.boomtop_footer {
background: #040c0b;
padding: 60px 0 20px;
border-top: 1px solid var(--color-secondary);
font-size: 0.9rem;
}
.boomtop_footer_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.boomtop_footer h4 { color: var(--color-text-pri); margin-bottom: 15px; }
.boomtop_footer p, .boomtop_footer a { color: var(--color-text-sec); }
.boomtop_footer_links a { display: block; margin-bottom: 8px; }
.boomtop_partner_link img { max-width: 120px; margin-bottom: 10px; border-radius: 4px; }
.boomtop_partner_light img { background: #fff; padding: 5px; }
.boomtop_partner_dark img { background: #111; padding: 5px; }
.boomtop_footer_bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.boomtop_modal_overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.boomtop_modal_overlay.is-active {
opacity: 1;
pointer-events: auto;
}
.boomtop_modal_content {
background: var(--color-surface);
padding: 40px;
border-radius: var(--radius-lg);
max-width: 400px;
width: 90%;
position: relative;
border: 1px solid var(--color-primary);
}
.boomtop_modal_close {
position: absolute;
top: 15px; right: 15px;
background: none;
border: none;
color: var(--color-text-sec);
font-size: 1.5rem;
cursor: pointer;
}
.boomtop_auth_form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.boomtop_auth_form input {
background: var(--color-bg);
border: 1px solid var(--color-secondary);
color: var(--color-text-pri);
padding: 12px;
border-radius: 4px;
}
.boomtop_toast {
position: fixed;
bottom: 20px; right: 20px;
background: var(--color-accent);
color: var(--color-bg);
padding: 15px 25px;
border-radius: 4px;
font-weight: bold;
transform: translateY(100px);
opacity: 0;
transition: var(--transition);
z-index: 2000;
}
.boomtop_toast.is-visible {
transform: translateY(0);
opacity: 1;
}
.boomtop_page_hero { padding: 80px 0 40px; text-align: center; background: var(--color-surface); }
.boomtop_page_hero h1 { font-size: 3rem; margin-bottom: 10px; }
.boomtop_contact_form { display: flex; flex-direction: column; gap: 15px; }
.boomtop_contact_form label { display: flex; flex-direction: column; gap: 5px; color: var(--color-text-sec); }
.boomtop_contact_form input, .boomtop_contact_form textarea {
background: var(--color-bg);
border: 1px solid var(--color-secondary);
color: var(--color-text-pri);
padding: 12px;
border-radius: 4px;
font-family: var(--font-body);
}
.boomtop_lobby_section { padding: 40px 0; }
.boomtop_lobby_grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 30px;
}
.boomtop_sidebar_terminal {
background: var(--color-surface);
padding: 20px;
border-radius: var(--radius-md);
border: 1px solid var(--color-secondary);
align-self: start;
position: sticky;
top: 90px;
}
.boomtop_terminal_wallet { margin-bottom: 30px; }
.boomtop_balance_display_large { display: block; font-size: 2rem; color: var(--color-accent); }
.boomtop_terminal_missions { margin-bottom: 30px; }
.boomtop_text_accent { color: var(--color-primary); font-weight: bold; }
.boomtop_three_col_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.boomtop_three_col_grid [data-game-card] { max-width: 100%; }
@media (max-width: 768px) {
.boomtop_header_inner { flex-wrap: wrap; }
.boomtop_burger { display: flex; }
.boomtop_nav {
display: none;
width: 100%;
flex-direction: column;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--color-secondary);
}
.boomtop_nav.is-open { display: flex; }
.boomtop_hero_asymmetric { flex-direction: column; }
.boomtop_hero_left, .boomtop_hero_right { padding: 40px 20px; }
.boomtop_hero_title { font-size: 2.5rem; }
.boomtop_split_grid, .boomtop_lobby_grid { grid-template-columns: 1fr; }
.boomtop_sidebar_terminal { position: static; }
}
@keyframes spinReel {
0% { transform: translateY(-50px); opacity: 0.5; }
50% { transform: translateY(50px); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.is-spinning [data-slot-symbol] {
animation: spinReel 0.2s infinite linear;
}
.boomtop_spin_anim {
transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* footer-logo-contrast-guard-v2 */
a[href*="begambleaware.org"],
a[href*="gambleaware"] {
  background: #ffffff !important;
  color: #111111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.7rem !important;
  box-sizing: border-box !important;
}

a[href*="begambleaware.org"] img,
a[href*="begambleaware.org"] picture,
a[href*="begambleaware.org"] .partner-logo,
img[src*="gambleaware"],
img[alt*="BeGambleAware" i],
img[alt*="GambleAware" i] {
  background: #ffffff !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.7rem !important;
  box-sizing: border-box !important;
}

a[href*="gamcare.org"] {
  background: #111111 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.7rem !important;
  box-sizing: border-box !important;
}

a[href*="gamcare.org"] img,
a[href*="gamcare.org"] picture,
a[href*="gamcare.org"] .partner-logo,
img[src*="gamcare"],
img[alt*="GamCare" i] {
  background: #111111 !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.7rem !important;
  box-sizing: border-box !important;
}

/* social-game-layering-guard-v4 */
[data-home-live-game],
[data-game-card],
[data-slot-game],
[data-slot-stage],
[data-wheel-game],
[data-wheel-stage],
[data-mechanic],
[class*="game_wrapper"],
[class*="game-wrapper"],
[class*="game_board"],
[class*="game-board"],
[class*="slot_board"],
[class*="slot-board"],
[class*="roulette_board"],
[class*="roulette-board"] {
  position: relative !important;
  isolation: isolate !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

[class*="slot"][class*="frame"],
[class*="slot"][class*="bg"],
[class*="slot"][class*="background"],
img[class*="slot_frame"],
img[class*="slot-frame"],
img[class*="frame_img"],
img[class*="frame-img"],
[data-game-mechanic="slot"] [class*="game_visual"] > img:first-child,
[data-game-mechanic="slot"] [class*="game-visual"] > img:first-child,
[data-game-mechanic="slot"] img[class*="game_bg"],
[data-game-mechanic="slot"] img[class*="game-bg"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

[class*="roulette"][class*="wheel"] img,
img[class*="roulette"][class*="wheel"],
[data-wheel-img] {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform-origin: center !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%) !important;
  pointer-events: none !important;
}

[data-wheel-stage],
[data-wheel-game] [class*="wheel_stage"],
[data-wheel-game] [class*="wheel-stage"],
[class*="wheel_board"],
[class*="wheel-board"],
[class*="roulette_board"],
[class*="roulette-board"] {
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

[data-game-mechanic="slot"] [class*="game_visual"],
[data-game-mechanic="slot"] [class*="game-visual"] {
  min-height: clamp(260px, 42vw, 560px) !important;
  aspect-ratio: 4 / 3 !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-slot-stage],
[data-slot-game] [class*="slot_stage"],
[data-slot-game] [class*="slot-stage"],
[data-game-mechanic="slot"] [class*="slot_board"],
[data-game-mechanic="slot"] [class*="slot-board"] {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 16 / 7 !important;
  display: grid !important;
  align-items: center !important;
}

[data-slot-reel-window],
[data-slot-game] [class*="slot_reel_window"],
[data-slot-game] [class*="slot-reel-window"],
[data-slot-game] [class*="reel_window"],
[data-slot-game] [class*="reel-window"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(170px, 22vw, 320px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(0.55rem, 1.5vw, 1.2rem) !important;
  overflow: hidden !important;
  position: relative !important;
}

[class*="slot_reels"],
[class*="slot-reels"],
[class*="reels"],
[data-home-live-game] [data-reel-index] {
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  top: 35% !important;
  bottom: 35% !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(0.45rem, 1.4vw, 1.1rem) !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

[data-slot-symbol],
[class*="slot_symbol"],
[class*="slot-symbol"],
[class*="reel"] img,
[data-home-live-game] [data-reel-index] img {
  position: relative !important;
  z-index: 70 !important;
  display: block !important;
  width: clamp(72px, 62%, 170px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 88% !important;
  object-fit: contain !important;
}

[class*="slot_reel"]:not([class*="window"]),
[class*="slot-reel"]:not([class*="window"]),
[data-slot-reel],
[data-home-live-game] [data-reel-index] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: clamp(72px, 10vw, 150px) !important;
  background: rgba(2, 8, 18, 0.88) !important;
  border: 2px solid rgba(255,255,255,0.78) !important;
  border-radius: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 0.9rem 1.8rem rgba(0,0,0,0.35) !important;
}

[class*="roulette"][class*="pointer"],
[class*="wheel"][class*="pointer"],
[data-wheel-pointer],
[data-home-live-game] [data-roulette-bet],
[data-home-live-game] [class*="game_ui"],
[data-home-live-game] [class*="game-ui"],
[data-home-live-game] [class*="game_controls"],
[data-home-live-game] [class*="game-controls"],
[data-home-live-game] [class*="bet"],
[data-home-live-game] [class*="result"],
[data-home-live-game] [class*="status"],
[data-home-live-game] button,
[data-home-live-game] select,
[data-home-live-game] input {
  position: relative !important;
  z-index: 90 !important;
}