/* phl789 base stylesheet - mobile-first casino gaming site */
/* All custom classes use the v36f- prefix to keep namespace isolated */

:root{
  --v36f-primary:#FFA500;
  --v36f-bg:#1C2833;
  --v36f-bg-soft:#222f3d;
  --v36f-bg-deep:#141d27;
  --v36f-text:#BAFFC9;
  --v36f-text-soft:#FFFFBA;
  --v36f-accent:#3CB371;
  --v36f-accent-deep:#2f9a5e;
  --v36f-muted:#9fb0c3;
  --v36f-border:rgba(255,165,0,.22);
  --v36f-radius:1.2rem;
  --v36f-shadow:0 .4rem 1.2rem rgba(0,0,0,.35);
  --v36f-header-h:6rem;
  --v36f-bottomnav-h:6.4rem;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--v36f-bg);
  color:#f3f7f4;
  line-height:1.5rem;
  font-size:1.5rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--v36f-primary);text-decoration:none;}
ul{list-style:none;}

.v36f-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem;}
.v36f-wrapper{padding-top:var(--v36f-header-h);padding-bottom:var(--v36f-bottomnav-h);min-height:100vh;}

/* ---------- Header ---------- */
.v36f-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#1a2531 0%,#141d27 100%);
  border-bottom:.1rem solid var(--v36f-border);
  box-shadow:var(--v36f-shadow);
}
.v36f-header-inner{
  max-width:430px;margin:0 auto;height:var(--v36f-header-h);
  padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.v36f-brand{display:flex;align-items:center;gap:.8rem;min-width:0;}
.v36f-brand-logo{width:3rem;height:3rem;border-radius:.8rem;object-fit:cover;border:.1rem solid var(--v36f-primary);}
.v36f-brand-name{font-size:1.7rem;font-weight:800;color:var(--v36f-primary);letter-spacing:.05rem;white-space:nowrap;}
.v36f-brand-name span{color:var(--v36f-text);}
.v36f-header-actions{display:flex;align-items:center;gap:.8rem;}
.v36f-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:3.6rem;padding:0 1.4rem;border:none;border-radius:2rem;
  font-size:1.3rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;
  white-space:nowrap;
}
.v36f-btn:active{transform:scale(.96);}
.v36f-btn-register{background:linear-gradient(135deg,#FFA500,#ff8a1e);color:#1C2833;box-shadow:0 .3rem .8rem rgba(255,165,0,.35);}
.v36f-btn-login{background:transparent;color:var(--v36f-text);border:.12rem solid var(--v36f-accent);}
.v36f-menu-btn{
  background:transparent;border:.1rem solid var(--v36f-border);border-radius:.8rem;
  width:3.6rem;height:3.6rem;color:var(--v36f-primary);font-size:1.8rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- Mobile expandable nav ---------- */
.v36f-nav{
  position:fixed;top:var(--v36f-header-h);left:0;right:0;z-index:9999;
  max-height:0;overflow:hidden;background:var(--v36f-bg-deep);
  border-bottom:.1rem solid var(--v36f-border);
  transition:max-height .3s ease;
}
.v36f-nav.v36f-open{max-height:48rem;}
.v36f-nav-inner{max-width:430px;margin:0 auto;padding:1rem 1.2rem;}
.v36f-nav-link{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1rem;
  color:var(--v36f-text);font-size:1.45rem;font-weight:600;
  border-radius:.8rem;border-bottom:.05rem solid rgba(255,255,255,.04);
}
.v36f-nav-link:active{background:rgba(255,165,0,.12);}
.v36f-nav-link i,.v36f-nav-link .material-icons-outlined{color:var(--v36f-primary);font-size:2rem;width:2.2rem;text-align:center;}

/* ---------- Hero carousel ---------- */
.v36f-hero{margin:1.2rem 0;}
.v36f-carousel{position:relative;border-radius:var(--v36f-radius);overflow:hidden;box-shadow:var(--v36f-shadow);}
.v36f-carousel-track{display:flex;transition:transform .5s ease;}
.v36f-carousel-slide{min-width:100%;position:relative;cursor:pointer;}
.v36f-carousel-slide img{width:100%;height:18rem;object-fit:cover;}
.v36f-carousel-caption{
  position:absolute;left:0;right:0;bottom:0;padding:1.2rem;
  background:linear-gradient(0deg,rgba(20,29,39,.92),rgba(20,29,39,0));
}
.v36f-carousel-caption h2{font-size:1.7rem;color:var(--v36f-primary);font-weight:800;margin-bottom:.3rem;}
.v36f-carousel-caption p{font-size:1.25rem;color:var(--v36f-text);}
.v36f-carousel-dots{display:flex;justify-content:center;gap:.6rem;padding:.8rem 0;}
.v36f-carousel-dot{width:.8rem;height:.8rem;border-radius:50%;background:rgba(255,255,255,.3);border:none;cursor:pointer;}
.v36f-carousel-dot.v36f-active{background:var(--v36f-primary);width:2rem;border-radius:.5rem;}

/* ---------- Section ---------- */
.v36f-section{margin:2.4rem 0;}
.v36f-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.v36f-section-title{font-size:1.9rem;font-weight:800;color:var(--v36f-primary);}
.v36f-section-title i{margin-right:.6rem;color:var(--v36f-accent);}
.v36f-section-more{font-size:1.25rem;color:var(--v36f-text-soft);font-weight:600;}

/* ---------- H1 ---------- */
.v36f-h1-wrap{padding:1rem 0 .4rem;}
.v36f-h1{font-size:2.4rem;font-weight:900;color:#fff;line-height:1.35;}
.v36f-h1 em{color:var(--v36f-primary);font-style:normal;}
.v36f-subtitle{font-size:1.35rem;color:var(--v36f-muted);margin-top:.4rem;}

/* ---------- Game grid ---------- */
.v36f-game-list{display:flex;flex-direction:column;gap:1.6rem;}
.v36f-cat-block{background:var(--v36f-bg-soft);border-radius:var(--v36f-radius);padding:1.2rem;border:.1rem solid var(--v36f-border);}
.v36f-cat-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.v36f-cat-icon{
  width:3.4rem;height:3.4rem;border-radius:.8rem;display:flex;align-items:center;justify-content:center;
  background:rgba(255,165,0,.16);color:var(--v36f-primary);font-size:1.8rem;
}
.v36f-cat-name{font-size:1.6rem;font-weight:800;color:#fff;}
.v36f-cat-count{font-size:1.15rem;color:var(--v36f-muted);margin-left:auto;}
.v36f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.v36f-game{cursor:pointer;text-align:center;transition:transform .15s;}
.v36f-game:active{transform:scale(.94);}
.v36f-game-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.9rem;
  border:.1rem solid rgba(255,165,0,.25);background:#0e161f;
}
.v36f-game-name{
  font-size:1.05rem;color:var(--v36f-text);margin-top:.4rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
}

/* ---------- Cards ---------- */
.v36f-card{
  background:var(--v36f-bg-soft);border-radius:var(--v36f-radius);padding:1.6rem;
  border:.1rem solid var(--v36f-border);box-shadow:var(--v36f-shadow);margin-bottom:1.4rem;
}
.v36f-card-title{font-size:1.7rem;font-weight:800;color:var(--v36f-primary);margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;}
.v36f-card-title .material-icons-outlined{color:var(--v36f-accent);}
.v36f-card p{color:#dfe7e0;font-size:1.4rem;line-height:1.6rem;margin-bottom:.8rem;}
.v36f-card p:last-child{margin-bottom:0;}
.v36f-card ul{margin:.4rem 0 .8rem;padding-left:1.4rem;}
.v36f-card li{color:#dfe7e0;font-size:1.35rem;line-height:1.6rem;margin-bottom:.4rem;list-style:disc;}

/* ---------- Promo text links ---------- */
.v36f-promolink{
  color:var(--v36f-primary);font-weight:800;cursor:pointer;
  border-bottom:.12rem solid var(--v36f-primary);padding-bottom:.1rem;
}
.v36f-promolink:hover{color:#ffcf6b;}
.v36f-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0;}
.v36f-cta .v36f-btn{flex:1;min-width:12rem;}

/* ---------- RTP / stats ---------- */
.v36f-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;}
.v36f-stat{background:var(--v36f-bg-deep);border-radius:.9rem;padding:1rem;text-align:center;border:.1rem solid var(--v36f-border);}
.v36f-stat-num{font-size:2rem;font-weight:900;color:var(--v36f-primary);}
.v36f-stat-label{font-size:1.15rem;color:var(--v36f-muted);margin-top:.2rem;}

/* ---------- Testimonials ---------- */
.v36f-testi{background:var(--v36f-bg-deep);border-radius:1rem;padding:1.2rem;margin-bottom:1rem;border-left:.3rem solid var(--v36f-accent);}
.v36f-testi-text{color:#e6efe8;font-size:1.35rem;line-height:1.6rem;font-style:italic;}
.v36f-testi-author{font-size:1.2rem;color:var(--v36f-primary);margin-top:.6rem;font-weight:700;}

/* ---------- Payment ---------- */
.v36f-pay{display:flex;flex-wrap:wrap;gap:.6rem;}
.v36f-pay-item{
  background:var(--v36f-bg-deep);border-radius:.8rem;padding:.7rem 1.1rem;
  font-size:1.25rem;color:var(--v36f-text);border:.1rem solid var(--v36f-border);
  display:flex;align-items:center;gap:.5rem;font-weight:600;
}

/* ---------- Winners ---------- */
.v36f-winner{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:.05rem solid rgba(255,255,255,.05);}
.v36f-winner:last-child{border-bottom:none;}
.v36f-winner-name{font-size:1.3rem;color:#fff;font-weight:700;flex:1;}
.v36f-winner-game{font-size:1.15rem;color:var(--v36f-muted);}
.v36f-winner-amt{font-size:1.4rem;color:var(--v36f-primary);font-weight:900;}

/* ---------- App download CTA ---------- */
.v36f-app-cta{background:linear-gradient(135deg,#223244,#16202c);border-radius:var(--v36f-radius);padding:1.6rem;border:.1rem solid var(--v36f-accent);text-align:center;}
.v36f-app-cta h3{font-size:1.8rem;color:var(--v36f-primary);margin-bottom:.6rem;}
.v36f-app-cta p{color:#dfe7e0;font-size:1.3rem;margin-bottom:1rem;}

/* ---------- Footer ---------- */
.v36f-footer{background:var(--v36f-bg-deep);padding:2.4rem 0 1.4rem;margin-top:2rem;border-top:.1rem solid var(--v36f-border);}
.v36f-footer-brand{font-size:1.4rem;color:var(--v36f-text);line-height:1.6rem;margin-bottom:1.2rem;}
.v36f-footer-promos{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem;}
.v36f-footer-promos .v36f-btn{min-height:3.4rem;padding:0 1.1rem;font-size:1.2rem;}
.v36f-footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 1rem;margin-bottom:1.4rem;}
.v36f-footer-links a{color:var(--v36f-muted);font-size:1.25rem;}
.v36f-footer-links a:active{color:var(--v36f-primary);}
.v36f-footer-copy{font-size:1.15rem;color:#7e8a99;text-align:center;border-top:.05rem solid rgba(255,255,255,.06);padding-top:1.2rem;}

/* ---------- Mobile bottom nav ---------- */
.v36f-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:var(--v36f-bottomnav-h);
  background:linear-gradient(180deg,#1a2531 0%,#0f1620 100%);
  border-top:.1rem solid var(--v36f-border);box-shadow:0 -.3rem 1rem rgba(0,0,0,.4);
  display:flex;justify-content:space-around;align-items:stretch;
}
.v36f-bottomnav-item{
  flex:1;min-width:60px;min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--v36f-muted);cursor:pointer;padding:.4rem;gap:.2rem;
  transition:color .15s,transform .15s;position:relative;
}
.v36f-bottomnav-item:active{transform:scale(.92);}
.v36f-bottomnav-item i,.v36f-bottomnav-item .material-icons-outlined,.v36f-bottomnav-item .ionicon{font-size:2.4rem;}
.v36f-bottomnav-item span{font-size:1.05rem;font-weight:600;}
.v36f-bottomnav-item.v36f-active{color:var(--v36f-primary);}
.v36f-bottomnav-item.v36f-active::before{
  content:"";position:absolute;top:0;width:2.4rem;height:.25rem;border-radius:.2rem;background:var(--v36f-primary);
}
.v36f-bottomnav-item.v36f-promo{color:var(--v36f-accent);}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .v36f-bottomnav{display:none;}
  .v36f-header-inner,.v36f-nav-inner,.v36f-container{max-width:760px;}
}
@media (max-width:768px){
  .v36f-wrapper{padding-bottom:calc(var(--v36f-bottomnav-h) + 1rem);}
}