:root{
--ptf-primary:#2D6BFF;
--ptf-secondary:#1E3A8A;
--ptf-accent:#F4B942;
--ptf-background:#0A1022;
--ptf-surface:#131F3F;
--ptf-text-primary:#EEF4FF;
--ptf-text-secondary:#B5C2DE;
--ptf-font-heading:'Playfair Display',sans-serif;
--ptf-font-body:'Lato',sans-serif;
--ptf-space-xs:0.5rem;
--ptf-space-sm:1rem;
--ptf-space-md:2rem;
--ptf-space-lg:4rem;
--ptf-space-xl:8rem;
--ptf-border-radius:8px;
--ptf-transition:all 0.3s ease;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
font-family:var(--ptf-font-body);
background-color:var(--ptf-background);
color:var(--ptf-text-primary);
line-height:1.6;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--ptf-font-heading);
font-weight:700;
margin-bottom:var(--ptf-space-sm);
color:var(--ptf-text-primary);
}
a{
color:var(--ptf-accent);
text-decoration:none;
transition:var(--ptf-transition);
}
a:hover{
color:var(--ptf-primary);
}
.playtheflow_btn{
display:inline-block;
padding:0.75rem 1.5rem;
background-color:var(--ptf-accent);
color:var(--ptf-background);
font-weight:700;
border:none;
border-radius:var(--ptf-border-radius);
cursor:pointer;
transition:var(--ptf-transition);
font-family:var(--ptf-font-body);
text-align:center;
}
.playtheflow_btn:hover{
background-color:var(--ptf-primary);
color:var(--ptf-text-primary);
}
.playtheflow_btn_outline{
background-color:transparent;
border:2px solid var(--ptf-accent);
color:var(--ptf-accent);
}
.playtheflow_btn_outline:hover{
background-color:var(--ptf-accent);
color:var(--ptf-background);
}
.playtheflow_header{
position:fixed;
top:0;
width:100%;
background-color:rgba(10,16,34,0.95);
backdrop-filter:blur(10px);
z-index:1000;
border-bottom:1px solid var(--ptf-surface);
}
.playtheflow_header_inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 5%;
max-width:1440px;
margin:0 auto;
}
.playtheflow_logo{
font-family:var(--ptf-font-heading);
font-size:1.5rem;
font-weight:700;
color:var(--ptf-accent);
display:flex;
align-items:center;
gap:0.5rem;
}
.playtheflow_logo_icon{
width:32px;
height:32px;
background-color:var(--ptf-accent);
mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" fill="currentColor"/></svg>') no-repeat center / contain;
-webkit-mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" fill="currentColor"/></svg>') no-repeat center / contain;
}
.playtheflow_nav{
display:flex;
gap:2rem;
align-items:center;
}
.playtheflow_nav_link{
color:var(--ptf-text-primary);
font-weight:700;
font-size:1rem;
}
.playtheflow_nav_link:hover{
color:var(--ptf-accent);
}
.playtheflow_header_actions{
display:flex;
gap:1rem;
align-items:center;
}
.playtheflow_burger{
display:none;
background:none;
border:none;
color:var(--ptf-text-primary);
font-size:2rem;
cursor:pointer;
}
.playtheflow_wallet_compact{
display:flex;
align-items:center;
gap:0.5rem;
background-color:var(--ptf-surface);
padding:0.5rem 1rem;
border-radius:var(--ptf-border-radius);
font-weight:700;
color:var(--ptf-accent);
}
.playtheflow_hero{
padding:calc(var(--ptf-space-xl) + 60px) 5% var(--ptf-space-xl);
background:linear-gradient(135deg,var(--ptf-background) 0%,var(--ptf-secondary) 100%);
position:relative;
overflow:hidden;
}
.playtheflow_hero_container{
max-width:1440px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--ptf-space-md);
align-items:center;
}
.playtheflow_hero_content h1{
font-size:4rem;
line-height:1.1;
margin-bottom:var(--ptf-space-sm);
}
.playtheflow_hero_content p{
font-size:1.25rem;
color:var(--ptf-text-secondary);
margin-bottom:var(--ptf-space-md);
}
.playtheflow_hero_visual{
position:relative;
}
.playtheflow_hero_cards{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
gap:1rem;
width:80%;
z-index:2;
}
.playtheflow_hero_card{
background-color:var(--ptf-surface);
padding:1.5rem;
border-radius:var(--ptf-border-radius);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
border-left:4px solid var(--ptf-accent);
animation:ptfFloat 6s ease-in-out infinite;
}
.playtheflow_hero_card:nth-child(2){
animation-delay:1s;
margin-left:2rem;
}
.playtheflow_hero_image{
width:100%;
height:auto;
border-radius:var(--ptf-border-radius);
opacity:0.6;
}
@keyframes ptfFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-15px);}
}
.playtheflow_age_strip{
background-color:var(--ptf-surface);
padding:1rem 5%;
text-align:center;
border-top:1px solid rgba(255,255,255,0.1);
border-bottom:1px solid rgba(255,255,255,0.1);
font-weight:700;
color:var(--ptf-text-secondary);
font-size:0.9rem;
display:flex;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
}
.playtheflow_section{
padding:var(--ptf-space-xl) 5%;
max-width:1440px;
margin:0 auto;
}
.playtheflow_section_alt{
background-color:var(--ptf-surface);
}
.playtheflow_grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:var(--ptf-space-md);
}
.playtheflow_card{
background-color:var(--ptf-background);
padding:2rem;
border-radius:var(--ptf-border-radius);
border:1px solid rgba(255,255,255,0.05);
}
.playtheflow_card_icon{
font-size:2.5rem;
color:var(--ptf-accent);
margin-bottom:1rem;
}
.playtheflow_live_game_block{
background:linear-gradient(to bottom right,var(--ptf-surface),var(--ptf-secondary));
padding:var(--ptf-space-md);
border-radius:var(--ptf-border-radius);
border:2px solid var(--ptf-accent);
box-shadow:0 20px 40px rgba(0,0,0,0.4);
text-align:center;
margin:var(--ptf-space-md) 0;
}
.playtheflow_game_title{
font-size:2rem;
margin-bottom:0.5rem;
color:var(--ptf-accent);
}
.playtheflow_game_desc{
color:var(--ptf-text-secondary);
margin-bottom:var(--ptf-space-md);
}
.playtheflow_slot_machine{
display:inline-block;
background-color:var(--ptf-background);
padding:1rem;
border-radius:var(--ptf-border-radius);
border:4px solid var(--ptf-surface);
margin-bottom:1rem;
position:relative;
}
.playtheflow_slot_reels{
display:flex;
gap:0.5rem;
position:relative;
}
.playtheflow_slot_payline{
position:absolute;
top:50%;
left:-10px;
right:-10px;
height:4px;
background-color:rgba(244,185,66,0.6);
transform:translateY(-50%);
z-index:10;
box-shadow:0 0 10px var(--ptf-accent);
border-radius:2px;
}
.playtheflow_reel{
width:100px;
height:100px;
background-color:var(--ptf-surface);
border-radius:4px;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.playtheflow_reel_img{
width:80%;
height:80%;
object-fit:contain;
transition:transform 0.1s;
}
.playtheflow_game_controls{
display:flex;
flex-direction:column;
gap:1rem;
align-items:center;
margin-top:1rem;
}
.playtheflow_bet_selector{
display:flex;
align-items:center;
gap:1rem;
background-color:var(--ptf-surface);
padding:0.5rem 1rem;
border-radius:var(--ptf-border-radius);
}
.playtheflow_bet_btn{
background:none;
border:1px solid var(--ptf-accent);
color:var(--ptf-accent);
width:30px;
height:30px;
border-radius:50%;
cursor:pointer;
font-weight:bold;
}
.playtheflow_spin_btn{
font-size:1.5rem;
padding:1rem 3rem;
text-transform:uppercase;
letter-spacing:2px;
background:linear-gradient(to right,var(--ptf-primary),var(--ptf-accent));
color:var(--ptf-background);
}
.playtheflow_game_status{
min-height:30px;
font-weight:bold;
color:var(--ptf-text-primary);
margin-top:1rem;
font-size:1.2rem;
}
.playtheflow_lobby_layout{
display:grid;
grid-template-columns:300px 1fr;
gap:var(--ptf-space-md);
max-width:1440px;
margin:0 auto;
padding:calc(var(--ptf-space-xl) + 60px) 5% var(--ptf-space-xl);
}
.playtheflow_sidebar{
background-color:var(--ptf-surface);
padding:var(--ptf-space-md);
border-radius:var(--ptf-border-radius);
position:sticky;
top:100px;
height:fit-content;
}
.playtheflow_sidebar_wallet{
background-color:var(--ptf-background);
padding:1.5rem;
border-radius:var(--ptf-border-radius);
text-align:center;
margin-bottom:var(--ptf-space-md);
border:1px solid var(--ptf-accent);
}
.playtheflow_sidebar_wallet_label{
font-size:0.9rem;
color:var(--ptf-text-secondary);
text-transform:uppercase;
letter-spacing:1px;
}
.playtheflow_sidebar_wallet_amount{
font-size:2.5rem;
font-family:var(--ptf-font-heading);
color:var(--ptf-accent);
margin:0.5rem 0;
}
.playtheflow_milestone_tracker{
margin-top:var(--ptf-space-md);
}
.playtheflow_milestone_item{
margin-bottom:1rem;
padding-bottom:1rem;
border-bottom:1px solid rgba(255,255,255,0.1);
}
.playtheflow_milestone_title{
font-weight:bold;
color:var(--ptf-text-primary);
}
.playtheflow_milestone_desc{
font-size:0.85rem;
color:var(--ptf-text-secondary);
}
.playtheflow_game_stack{
display:flex;
flex-direction:column;
gap:var(--ptf-space-md);
}
.playtheflow_game_panel{
background-color:var(--ptf-surface);
padding:var(--ptf-space-md);
border-radius:var(--ptf-border-radius);
border:1px solid rgba(255,255,255,0.05);
}
.playtheflow_wheel_container{
display:flex;
flex-direction:column;
align-items:center;
margin:2rem 0;
position:relative;
}
.playtheflow_wheel_pointer{
position:absolute;
top:-20px;
z-index:20;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:40px solid var(--ptf-accent);
}
.playtheflow_wheel_board{
width:300px;
height:300px;
border-radius:50%;
overflow:hidden;
border:8px solid var(--ptf-background);
box-shadow:0 0 30px rgba(0,0,0,0.5);
position:relative;
}
.playtheflow_wheel_img{
width:100%;
height:100%;
object-fit:cover;
transform:rotate(0deg);
}
.is-spinning .playtheflow_wheel_img{
transition:transform 2.5s cubic-bezier(0.25,0.1,0.25,1);
}
.playtheflow_history{
display:flex;
gap:0.5rem;
justify-content:center;
margin-top:1rem;
}
.playtheflow_history_item{
background-color:var(--ptf-background);
padding:0.25rem 0.75rem;
border-radius:12px;
font-size:0.8rem;
color:var(--ptf-text-secondary);
}
.playtheflow_history_item.win{
color:var(--ptf-accent);
border:1px solid var(--ptf-accent);
}
.playtheflow_footer{
background-color:var(--ptf-background);
border-top:1px solid var(--ptf-surface);
padding:var(--ptf-space-xl) 5% var(--ptf-space-md);
}
.playtheflow_footer_grid{
max-width:1440px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--ptf-space-md);
margin-bottom:var(--ptf-space-md);
}
.playtheflow_footer_col h4{
color:var(--ptf-text-primary);
margin-bottom:1rem;
}
.playtheflow_footer_links{
list-style:none;
}
.playtheflow_footer_links li{
margin-bottom:0.5rem;
}
.playtheflow_footer_links a{
color:var(--ptf-text-secondary);
}
.playtheflow_footer_links a:hover{
color:var(--ptf-accent);
}
.playtheflow_footer_text{
color:var(--ptf-text-secondary);
font-size:0.9rem;
margin-bottom:1rem;
}
.playtheflow_footer_bottom{
max-width:1440px;
margin:0 auto;
padding-top:var(--ptf-space-md);
border-top:1px solid var(--ptf-surface);
text-align:center;
color:var(--ptf-text-secondary);
font-size:0.85rem;
}
.playtheflow_partners{
display:flex;
gap:1.5rem;
margin-top:1rem;
align-items:center;
flex-wrap:wrap;
}
.playtheflow_partner_link{
display:block;
background-color:var(--ptf-surface);
padding:0.5rem;
border-radius:4px;
transition:var(--ptf-transition);
}
.playtheflow_partner_link:hover{
transform:translateY(-3px);
}
.playtheflow_partner_link img{
height:40px;
width:auto;
display:block;
}
.playtheflow_partner_link.gamcare{
background-color:#ffffff;
}
.playtheflow_partner_link.begambleaware{
background-color:#111111;
}
.playtheflow_modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(10,16,34,0.9);
backdrop-filter:blur(5px);
z-index:2000;
justify-content:center;
align-items:center;
}
.playtheflow_modal.is-active{
display:flex;
}
.playtheflow_modal_content{
background-color:var(--ptf-surface);
padding:var(--ptf-space-md);
border-radius:var(--ptf-border-radius);
max-width:400px;
width:90%;
position:relative;
border:1px solid var(--ptf-accent);
}
.playtheflow_modal_close{
position:absolute;
top:10px;
right:15px;
background:none;
border:none;
color:var(--ptf-text-secondary);
font-size:1.5rem;
cursor:pointer;
}
.playtheflow_form_group{
margin-bottom:1rem;
}
.playtheflow_form_group label{
display:block;
margin-bottom:0.5rem;
color:var(--ptf-text-secondary);
font-size:0.9rem;
}
.playtheflow_form_group input,.playtheflow_form_group textarea{
width:100%;
padding:0.75rem;
background-color:var(--ptf-background);
border:1px solid rgba(255,255,255,0.1);
border-radius:4px;
color:var(--ptf-text-primary);
font-family:var(--ptf-font-body);
}
.playtheflow_form_group input:focus,.playtheflow_form_group textarea:focus{
outline:none;
border-color:var(--ptf-accent);
}
.playtheflow_toast_container{
position:fixed;
bottom:20px;
right:20px;
display:flex;
flex-direction:column;
gap:10px;
z-index:3000;
}
.playtheflow_toast{
background-color:var(--ptf-surface);
color:var(--ptf-text-primary);
padding:1rem 1.5rem;
border-radius:var(--ptf-border-radius);
border-left:4px solid var(--ptf-accent);
box-shadow:0 5px 15px rgba(0,0,0,0.3);
animation:ptfSlideIn 0.3s forwards;
}
@keyframes ptfSlideIn{
from{transform:translateX(100%);opacity:0;}
to{transform:translateX(0);opacity:1;}
}
.playtheflow_longform{
max-width:900px;
margin:0 auto;
}
.playtheflow_longform h2{
margin-top:2rem;
color:var(--ptf-accent);
}
.playtheflow_longform p{
margin-bottom:1.5rem;
color:var(--ptf-text-secondary);
}
.playtheflow_longform ul{
margin-bottom:1.5rem;
padding-left:2rem;
color:var(--ptf-text-secondary);
}
.playtheflow_longform li{
margin-bottom:0.5rem;
}
.playtheflow_accordion{
margin-top:2rem;
}
.playtheflow_accordion_item{
border-bottom:1px solid rgba(255,255,255,0.1);
margin-bottom:1rem;
}
.playtheflow_accordion_header{
width:100%;
text-align:left;
background:none;
border:none;
color:var(--ptf-text-primary);
font-size:1.2rem;
font-weight:bold;
cursor:pointer;
padding:1rem 0;
display:flex;
justify-content:space-between;
align-items:center;
}
.playtheflow_accordion_content{
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease;
color:var(--ptf-text-secondary);
}
.playtheflow_accordion_content_inner{
padding-bottom:1rem;
}
.playtheflow_accordion_item.is-active .playtheflow_accordion_content{
max-height:500px;
}
.playtheflow_easter_egg_trigger{
cursor:pointer;
opacity:0.5;
transition:opacity 0.3s;
display:inline-block;
margin-top:2rem;
}
.playtheflow_easter_egg_trigger:hover{
opacity:1;
}
.playtheflow_easter_egg_trigger img{
width:40px;
height:40px;
}
.playtheflow_split_editorial{
display:grid;
grid-template-columns:1fr 1fr;
gap:var(--ptf-space-md);
align-items:center;
}
.playtheflow_editorial_img{
width:100%;
border-radius:var(--ptf-border-radius);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
@media(max-width:1024px){
.playtheflow_hero_content h1{font-size:3rem;}
.playtheflow_lobby_layout{grid-template-columns:1fr;}
.playtheflow_sidebar{position:static;display:flex;justify-content:space-between;align-items:center;}
.playtheflow_sidebar_wallet{margin-bottom:0;flex:1;margin-right:1rem;}
}
@media(max-width:768px){
.playtheflow_burger{display:block;}
.playtheflow_nav{position:fixed;top:70px;left:0;width:100%;background-color:var(--ptf-surface);flex-direction:column;padding:2rem 0;transform:translateY(-150%);transition:transform 0.3s;border-bottom:2px solid var(--ptf-accent);}
.playtheflow_nav.is-open{transform:translateY(0);}
.playtheflow_header_actions{display:none;}
.playtheflow_hero_container{grid-template-columns:1fr;text-align:center;}
.playtheflow_hero_cards{position:relative;transform:none;top:0;left:0;width:100%;margin-top:2rem;flex-direction:row;justify-content:center;flex-wrap:wrap;}
.playtheflow_hero_card{width:100%;max-width:300px;margin-left:0 !important;}
.playtheflow_split_editorial{grid-template-columns:1fr;}
.playtheflow_sidebar{flex-direction:column;align-items:stretch;}
.playtheflow_sidebar_wallet{margin-right:0;margin-bottom:1rem;}
}
@media(max-width:360px){
.playtheflow_hero_content h1{font-size:2.2rem;}
.playtheflow_slot_machine{padding:0.5rem;}
.playtheflow_reel{width:70px;height:70px;}
.playtheflow_wheel_board{width:250px;height:250px;}
}
/* 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;
}