:root {
--color-primary: #E63956;
--color-secondary: #8C1D3A;
--color-accent: #FFB86B;
--color-bg: #0D0D12;
--color-surface: #1A1A24;
--color-text-primary: #FAF1F3;
--color-text-secondary: #C6B4BA;
--font-heading: 'Teko', 'Impact', sans-serif;
--font-body: 'Roboto', 'Inter', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body.roundbyroundplay_body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text-primary);
line-height: 1.6;
font-size: 16px;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; display: block; }
.roundbyroundplay_btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 1.5rem;
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.roundbyroundplay_btn_primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: #fff;
box-shadow: 0 4px 15px rgba(230, 57, 86, 0.4);
}
.roundbyroundplay_btn_primary:hover {
filter: brightness(1.2);
box-shadow: 0 6px 20px rgba(230, 57, 86, 0.6);
}
.roundbyroundplay_btn_secondary {
background: transparent;
color: var(--color-accent);
border: 2px solid var(--color-accent);
}
.roundbyroundplay_btn_secondary:hover {
background: rgba(255, 184, 107, 0.1);
}
.roundbyroundplay_btn_outline {
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-text-secondary);
}
.roundbyroundplay_btn_outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.roundbyroundplay_btn_large { min-height: 54px; font-size: 1.4rem; padding: 0 2.5rem; }
.roundbyroundplay_w100 { width: 100%; }
.roundbyroundplay_text_center { text-align: center; }
.roundbyroundplay_mt4 { margin-top: 2rem; }
.roundbyroundplay_bg_surface { background-color: var(--color-surface); }
.roundbyroundplay_container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
.roundbyroundplay_header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(13, 13, 18, 0.95);
border-bottom: 2px solid var(--color-primary);
backdrop-filter: blur(10px);
}
.roundbyroundplay_header_inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
}
.roundbyroundplay_logo_text {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--color-text-primary);
text-shadow: 0 0 10px rgba(230, 57, 86, 0.5);
}
.roundbyroundplay_nav { display: flex; gap: 2rem; }
.roundbyroundplay_nav_link {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-text-primary);
}
.roundbyroundplay_nav_link:hover, .roundbyroundplay_active { color: var(--color-primary); }
.roundbyroundplay_header_actions { display: flex; align-items: center; gap: 1rem; }
.roundbyroundplay_burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.roundbyroundplay_burger_line {
width: 25px;
height: 3px;
background: var(--color-text-primary);
}
@media (max-width: 768px) {
.roundbyroundplay_nav {
display: none;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background: var(--color-surface);
flex-direction: column;
gap: 0;
border-bottom: 1px solid var(--color-secondary);
}
.roundbyroundplay_nav.is-open { display: flex; }
.roundbyroundplay_nav_link { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.roundbyroundplay_burger { display: flex; }
}
.roundbyroundplay_hero_command {
position: relative;
background: var(--color-bg);
padding: 6rem 1.5rem;
overflow: hidden;
}
.roundbyroundplay_hero_container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.roundbyroundplay_trust_badge {
display: inline-block;
padding: 0.5rem 1rem;
background: rgba(230, 57, 86, 0.1);
border: 1px solid var(--color-primary);
color: var(--color-accent);
font-weight: bold;
font-size: 0.9rem;
border-radius: 20px;
margin-bottom: 1.5rem;
}
.roundbyroundplay_hero_title {
font-size: 4rem;
line-height: 1;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.roundbyroundplay_hero_subtitle {
font-size: 1.2rem;
color: var(--color-text-secondary);
margin-bottom: 2rem;
}
.roundbyroundplay_hero_actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.roundbyroundplay_hero_visual_panel { position: relative; }
.roundbyroundplay_framed_media {
border: 4px solid var(--color-surface);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.8);
}
.roundbyroundplay_floating_stats {
position: absolute;
bottom: -20px;
left: -20px;
display: flex;
gap: 1rem;
}
.roundbyroundplay_stat_card {
background: var(--color-surface);
border: 1px solid var(--color-secondary);
padding: 1rem 1.5rem;
border-radius: 8px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.roundbyroundplay_stat_val {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-accent);
line-height: 1;
}
.roundbyroundplay_stat_label {
font-size: 0.8rem;
color: var(--color-text-secondary);
text-transform: uppercase;
}
@media (max-width: 992px) {
.roundbyroundplay_hero_container { grid-template-columns: 1fr; gap: 3rem; }
.roundbyroundplay_floating_stats { position: relative; bottom: 0; left: 0; margin-top: 1rem; }
}
.roundbyroundplay_ticker_strip {
background: var(--color-primary);
color: #fff;
padding: 0.8rem 0;
overflow: hidden;
margin-top: 4rem;
font-family: var(--font-heading);
font-size: 1.2rem;
letter-spacing: 2px;
}
.roundbyroundplay_ticker_track {
display: flex;
white-space: nowrap;
animation: roundbyroundplay_scroll 20s linear infinite;
gap: 2rem;
}
@keyframes roundbyroundplay_scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.roundbyroundplay_section_title {
font-size: 2.5rem;
color: var(--color-text-primary);
}
.roundbyroundplay_section_desc {
font-size: 1.1rem;
color: var(--color-text-secondary);
max-width: 600px;
margin-bottom: 2rem;
}
.roundbyroundplay_split_row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
@media (max-width: 768px) {
.roundbyroundplay_split_row { grid-template-columns: 1fr; }
}
.roundbyroundplay_feature_list { list-style: none; margin-top: 1rem; }
.roundbyroundplay_feature_list li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.8rem;
color: var(--color-text-secondary);
}
.roundbyroundplay_feature_list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: var(--color-accent);
border-radius: 50%;
}
.roundbyroundplay_grid_3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.roundbyroundplay_info_card {
background: var(--color-surface);
border: 1px solid rgba(255,255,255,0.05);
padding: 2rem;
border-radius: 8px;
transition: transform 0.2s;
}
.roundbyroundplay_info_card:hover { transform: translateY(-5px); border-color: var(--color-secondary); }
.roundbyroundplay_card_title { font-size: 1.5rem; color: var(--color-primary); }
.roundbyroundplay_stats_row {
display: flex;
justify-content: center;
gap: 4rem;
flex-wrap: wrap;
margin-top: 3rem;
}
.roundbyroundplay_stat_item { text-align: center; }
.roundbyroundplay_stat_giant {
font-family: var(--font-heading);
font-size: 5rem;
color: var(--color-accent);
line-height: 1;
text-shadow: 0 0 20px rgba(255, 184, 107, 0.2);
}
.roundbyroundplay_stat_sub {
font-weight: bold;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.roundbyroundplay_faq_accordion { max-width: 800px; margin: 0 auto; }
.roundbyroundplay_faq_item { border-bottom: 1px solid var(--color-secondary); }
.roundbyroundplay_faq_trigger {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 1.5rem 0;
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--color-text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
}
.roundbyroundplay_faq_trigger::after { content: '+'; color: var(--color-primary); }
.roundbyroundplay_faq_trigger.is-active::after { content: '-'; }
.roundbyroundplay_faq_content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.roundbyroundplay_faq_content p {
padding-bottom: 1.5rem;
color: var(--color-text-secondary);
}
.roundbyroundplay_conversion_panel {
max-width: 1280px;
margin: 2rem auto;
background: var(--color-bg);
border: 1px solid var(--color-secondary);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.roundbyroundplay_wallet_conversion_header {
background: linear-gradient(to right, var(--color-surface), #000);
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--color-primary);
flex-wrap: wrap;
gap: 1rem;
}
.roundbyroundplay_hidden_h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.roundbyroundplay_wallet_large {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.roundbyroundplay_wallet_label { color: var(--color-text-secondary); text-transform: uppercase; font-size: 0.9rem; }
.roundbyroundplay_wallet_val { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-accent); line-height: 1; }
.roundbyroundplay_wallet_currency { font-weight: bold; color: var(--color-primary); }
.roundbyroundplay_lobby_highlight_rail {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
}
@media (min-width: 1024px) {
.roundbyroundplay_lobby_highlight_rail { flex-direction: row; }
.roundbyroundplay_highlight_zone { flex: 0 0 70%; }
.roundbyroundplay_rail_zone { flex: 0 0 calc(30% - 2rem); display: flex; flex-direction: column; gap: 1.5rem; }
}
@media (max-width: 1023px) {
.roundbyroundplay_rail_zone { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
}
.roundbyroundplay_game_card {
background: var(--color-surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.roundbyroundplay_game_header {
padding: 1rem;
background: rgba(0,0,0,0.3);
display: flex;
justify-content: space-between;
align-items: center;
}
.roundbyroundplay_game_title { margin: 0; font-size: 1.4rem; color: var(--color-primary); }
.roundbyroundplay_game_board_area {
position: relative;
width: 100%;
padding-top: 60%;
background: #000;
overflow: hidden;
}
.roundbyroundplay_board_bg, .roundbyroundplay_wheel_img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
}
.roundbyroundplay_slot_reels_wrapper {
position: absolute;
top: 15%; left: 10%; right: 10%; bottom: 15%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5%;
}
.roundbyroundplay_slot_reel {
background: rgba(0,0,0,0.8);
border: 2px solid var(--color-secondary);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.roundbyroundplay_symbol_img {
width: 80%;
object-fit: contain;
transition: transform 0.1s;
}
.roundbyroundplay_wheel_pointer {
position: absolute;
top: 5%; left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 30px solid var(--color-accent);
z-index: 10;
}
.roundbyroundplay_game_controls {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.roundbyroundplay_bet_selector label { font-size: 0.9rem; color: var(--color-text-secondary); margin-right: 0.5rem; }
.roundbyroundplay_bet_select {
background: var(--color-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-secondary);
padding: 0.5rem;
border-radius: 4px;
}
.roundbyroundplay_game_result {
padding: 0.5rem 1rem;
text-align: center;
font-weight: bold;
color: var(--color-accent);
background: rgba(255, 184, 107, 0.1);
min-height: 40px;
}
.roundbyroundplay_legal_disclaimer_block {
padding: 1.5rem;
text-align: center;
font-size: 0.85rem;
color: rgba(255,255,255,0.4);
border-top: 1px solid rgba(255,255,255,0.05);
}
.roundbyroundplay_home_live_game_section .roundbyroundplay_game_card {
max-width: 800px;
margin: 0 auto 2rem auto;
}
.roundbyroundplay_footer {
background: #050508;
border-top: 1px solid var(--color-secondary);
padding: 4rem 1.5rem 2rem;
margin-top: 4rem;
}
.roundbyroundplay_footer_container { max-width: 1280px; margin: 0 auto; }
.roundbyroundplay_footer_top {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.roundbyroundplay_footer_brand { color: var(--color-primary); font-size: 1.5rem; }
.roundbyroundplay_footer_identity, .roundbyroundplay_footer_contact {
color: var(--color-text-secondary);
font-size: 0.9rem;
margin-top: 1rem;
}
.roundbyroundplay_footer_heading { color: var(--color-text-primary); font-size: 1.2rem; }
.roundbyroundplay_footer_nav { list-style: none; margin-top: 1rem; }
.roundbyroundplay_footer_nav li { margin-bottom: 0.5rem; }
.roundbyroundplay_footer_nav a { color: var(--color-text-secondary); font-size: 0.9rem; }
.roundbyroundplay_footer_nav a:hover { color: var(--color-accent); }
.roundbyroundplay_partner_logos { display: flex; gap: 1rem; margin-top: 1rem; align-items: center; }
.roundbyroundplay_partner_chip {
display: inline-block;
padding: 0.5rem;
border-radius: 4px;
max-width: 140px;
}
.roundbyroundplay_partner_dark { background: #111; }
.roundbyroundplay_partner_light { background: #fff; }
.roundbyroundplay_footer_badge_text { margin-top: 1rem; font-size: 0.8rem; color: var(--color-accent); }
.roundbyroundplay_footer_bottom {
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 2rem;
text-align: center;
}
.roundbyroundplay_footer_disclaimer {
font-size: 0.8rem;
color: rgba(255,255,255,0.4);
max-width: 800px;
margin: 0 auto 1rem;
}
.roundbyroundplay_footer_copyright { font-size: 0.85rem; color: var(--color-text-secondary); }
.roundbyroundplay_fullscreen_gate {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.95);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.roundbyroundplay_gate_content {
background: var(--color-surface);
padding: 3rem;
border: 2px solid var(--color-primary);
border-radius: 8px;
max-width: 500px;
text-align: center;
}
.roundbyroundplay_gate_title { font-size: 2rem; color: var(--color-primary); }
.roundbyroundplay_gate_desc { color: var(--color-text-secondary); margin-bottom: 1.5rem; }
.roundbyroundplay_modal {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.roundbyroundplay_modal.is-open { display: flex; }
.roundbyroundplay_modal_dialog {
background: var(--color-surface);
width: 100%;
max-width: 400px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-secondary);
}
.roundbyroundplay_modal_header {
background: rgba(0,0,0,0.5);
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-secondary);
}
.roundbyroundplay_modal_close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.roundbyroundplay_modal_body { padding: 2rem 1.5rem; }
.roundbyroundplay_input {
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-secondary);
color: #fff;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 4px;
font-family: var(--font-body);
}
.roundbyroundplay_toast {
position: fixed;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: #fff;
padding: 1rem 2rem;
border-radius: 30px;
z-index: 6000;
transition: bottom 0.3s;
font-weight: bold;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.roundbyroundplay_page_title { font-size: 3rem; text-align: center; margin-bottom: 3rem; }
.roundbyroundplay_subheading { font-size: 2rem; color: var(--color-accent); margin-top: 2rem; }
.roundbyroundplay_longform_section { max-width: 800px; margin: 0 auto; }
.roundbyroundplay_editorial_img { border-radius: 8px; margin: 2rem 0; border: 1px solid var(--color-secondary); }
.roundbyroundplay_hidden_bell { position: absolute; width: 40px; height: 40px; right: 5%; top: 20%; cursor: pointer; z-index: 10; opacity: 0; }
@keyframes roundbyroundplay_reel_spin {
0% { transform: translateY(-50%); }
100% { transform: translateY(50%); }
}
@keyframes roundbyroundplay_wheel_spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(3600deg); }
}
.is-spinning .roundbyroundplay_symbol_img { animation: roundbyroundplay_reel_spin 0.2s linear infinite; filter: blur(2px); }
.is-spinning .roundbyroundplay_wheel_img { transition: transform 2.5s cubic-bezier(0.25, 0.1, 0.15, 1); }

/* footer-logo-contrast-guard */
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: #111111 !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: #ffffff !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.7rem !important;
  box-sizing: border-box !important;
}

a[href*="begambleaware.org"],
a[href*="gamcare.org"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}