/* ===========================================================
   3win slot - design.css
   Prefix: wb51e-
   Palette: #FFEB3B | #00695C | #6C757D | #0D1117 | #20B2AA | #FF6347
   Mobile-first, root font-size 62.5% (1rem = 10px)
   =========================================================== */

:root{
  --wb51e-yellow:#FFEB3B;
  --wb51e-teal-deep:#00695C;
  --wb51e-gray:#6C757D;
  --wb51e-bg:#0D1117;
  --wb51e-teal:#20B2AA;
  --wb51e-tomato:#FF6347;
  --wb51e-bg-soft:#141b25;
  --wb51e-card:#1b2430;
  --wb51e-text:#f3f6f4;
  --wb51e-text-muted:#aeb9c4;
  --wb51e-border:#28323f;
  --wb51e-shadow:0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Segoe UI","Roboto","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--wb51e-bg);
  color:var(--wb51e-text);
  line-height:1.5rem;
  max-width:430px;
  margin:0 auto;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:var(--wb51e-yellow);text-decoration:none;}
a:active{opacity:.85;}

/* ===================== Layout ===================== */
.wb51e-container{width:100%;padding:0 1.2rem;}
.wb51e-wrapper{max-width:430px;margin:0 auto;}
.wb51e-section{padding:2.4rem 0;}
.wb51e-grid{display:grid;gap:1rem;}
.wb51e-section-title{
  font-size:1.8rem;font-weight:800;color:var(--wb51e-yellow);
  margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem;line-height:2rem;
}
.wb51e-section-title i{color:var(--wb51e-tomato);}
.wb51e-section-sub{font-size:1.3rem;color:var(--wb51e-text-muted);margin-bottom:1.4rem;}

/* ===================== Header ===================== */
.wb51e-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(135deg,#0b141d 0%,#0e1a26 60%,#103039 100%);
  border-bottom:2px solid var(--wb51e-teal);
  box-shadow:0 2px 12px rgba(0,0,0,.45);
}
.wb51e-header-row{
  max-width:430px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;gap:.6rem;
}
.wb51e-logo{display:flex;align-items:center;gap:.55rem;color:var(--wb51e-text);}
.wb51e-logo-icon{
  width:3rem;height:3rem;border-radius:.6rem;
  background:linear-gradient(135deg,var(--wb51e-tomato),var(--wb51e-yellow));
  display:flex;align-items:center;justify-content:center;
  color:#0D1117;font-weight:900;font-size:1.4rem;
}
.wb51e-logo-text{font-size:1.5rem;font-weight:900;color:var(--wb51e-yellow);line-height:1.2rem;}
.wb51e-logo-text small{display:block;font-size:1rem;font-weight:600;color:var(--wb51e-text-muted);}
.wb51e-header-actions{display:flex;align-items:center;gap:.5rem;}
.wb51e-btn{
  border:none;cursor:pointer;border-radius:2rem;font-weight:800;
  font-size:1.25rem;padding:.65rem 1.3rem;transition:transform .15s ease, box-shadow .15s ease;
  display:inline-flex;align-items:center;gap:.4rem;line-height:1.2rem;
}
.wb51e-btn:active{transform:scale(.95);}
.wb51e-btn-yellow{background:var(--wb51e-yellow);color:#0D1117;}
.wb51e-btn-outline{background:transparent;border:2px solid var(--wb51e-teal);color:var(--wb51e-teal);}
.wb51e-btn-tomato{background:var(--wb51e-tomato);color:#fff;}
.wb51e-menu-btn{
  background:transparent;border:none;color:var(--wb51e-yellow);font-size:1.8rem;cursor:pointer;
  padding:.4rem .6rem;
}

/* ===================== Mobile Menu ===================== */
.wb51e-mobile-menu{
  position:fixed;top:0;right:-100%;width:80%;max-width:340px;height:100vh;
  background:#0e1722;z-index:9999;padding:2rem 1.4rem;
  transition:right .28s ease;overflow-y:auto;box-shadow:-4px 0 18px rgba(0,0,0,.5);
}
.wb51e-mobile-menu.wb51e-open{right:0;}
.wb51e-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  display:none;
}
.wb51e-overlay.wb51e-open{display:block;}
.wb51e-menu-close{font-size:2.2rem;color:var(--wb51e-tomato);float:right;cursor:pointer;}
.wb51e-menu-title{font-size:1.6rem;font-weight:900;color:var(--wb51e-yellow);margin-bottom:1.4rem;}
.wb51e-menu-link{
  display:flex;align-items:center;gap:.8rem;color:var(--wb51e-text);
  padding:1rem;border-radius:.6rem;font-size:1.35rem;font-weight:600;
  border-bottom:1px solid var(--wb51e-border);
}
.wb51e-menu-link:active{background:rgba(32,178,170,.12);}
.wb51e-menu-link i{color:var(--wb51e-teal);font-size:1.6rem;}

/* ===================== Main ===================== */
.wb51e-main{padding-top:6.4rem;}
@media (max-width:768px){
  .wb51e-main{padding-bottom:8rem;}
}

/* ===================== Hero Carousel ===================== */
.wb51e-hero{padding:1rem 0 0;}
.wb51e-carousel{position:relative;overflow:hidden;border-radius:1rem;}
.wb51e-carousel-track{display:flex;transition:transform .45s ease;}
.wb51e-carousel-slide{min-width:100%;position:relative;}
.wb51e-carousel-slide img{width:100%;height:180px;object-fit:cover;border-radius:1rem;}
.wb51e-carousel-slide a{display:block;}
.wb51e-carousel-cap{
  position:absolute;left:1rem;bottom:1rem;right:1rem;
  background:rgba(13,17,23,.55);backdrop-filter:blur(2px);
  padding:.6rem .9rem;border-radius:.6rem;font-size:1.2rem;color:var(--wb51e-yellow);font-weight:700;
}
.wb51e-carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.7rem;}
.wb51e-carousel-dots span{
  width:.8rem;height:.8rem;border-radius:50%;background:var(--wb51e-gray);cursor:pointer;transition:.2s;
}
.wb51e-carousel-dots span.wb51e-active{background:var(--wb51e-yellow);width:2rem;border-radius:.4rem;}

/* ===================== Promo CTA bar ===================== */
.wb51e-cta-bar{
  display:flex;gap:.6rem;justify-content:center;padding:1rem 1.2rem;flex-wrap:wrap;
}
.wb51e-cta-bar .wb51e-btn{font-size:1.35rem;padding:.75rem 1.6rem;}

/* ===================== Game grid ===================== */
.wb51e-cat-head{
  display:flex;align-items:center;justify-content:space-between;margin:2.4rem 0 1rem;
  border-left:4px solid var(--wb51e-tomato);padding-left:.8rem;
}
.wb51e-cat-head h2{font-size:1.7rem;font-weight:900;color:var(--wb51e-yellow);line-height:1.8rem;}
.wb51e-cat-head h2 i{color:var(--wb51e-tomato);margin-right:.4rem;}
.wb51e-cat-head .wb51e-tag{font-size:1.05rem;color:var(--wb51e-text-muted);font-weight:600;}
.wb51e-game-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
.wb51e-game-card{
  background:var(--wb51e-card);border:1px solid var(--wb51e-border);border-radius:.8rem;
  overflow:hidden;transition:transform .15s;display:flex;flex-direction:column;
}
.wb51e-game-card:active{transform:scale(.96);}
.wb51e-game-card a{display:block;}
.wb51e-game-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0a0f15;}
.wb51e-game-name{
  font-size:1.1rem;color:var(--wb51e-text);font-weight:600;
  padding:.5rem .4rem;text-align:center;line-height:1.3rem;min-height:2.6rem;
  display:flex;align-items:center;justify-content:center;
}

/* ===================== Info modules ===================== */
.wb51e-card{
  background:var(--wb51e-card);border:1px solid var(--wb51e-border);
  border-radius:1rem;padding:1.4rem;margin-bottom:1.2rem;box-shadow:var(--wb51e-shadow);
}
.wb51e-card h3{font-size:1.5rem;color:var(--wb51e-teal);margin-bottom:.7rem;font-weight:800;}
.wb51e-card p{font-size:1.25rem;color:var(--wb51e-text-muted);margin-bottom:.8rem;line-height:1.7rem;}
.wb51e-card ul{list-style:none;padding-left:0;}
.wb51e-card li{font-size:1.2rem;color:var(--wb51e-text-muted);padding:.35rem 0 .35rem 1.6rem;position:relative;line-height:1.6rem;}
.wb51e-card li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--wb51e-teal);position:absolute;left:0;}
.wb51e-inline-link{color:var(--wb51e-yellow);font-weight:700;border-bottom:1px dashed var(--wb51e-yellow);}

/* Highlights strip */
.wb51e-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;}
.wb51e-highlight{
  background:linear-gradient(135deg,#15202c,#1f2d3a);border-radius:.8rem;padding:1rem;
  border:1px solid var(--wb51e-border);text-align:center;
}
.wb51e-highlight .ic{font-size:2.2rem;color:var(--wb51e-tomato);margin-bottom:.4rem;}
.wb51e-highlight h4{font-size:1.3rem;color:var(--wb51e-yellow);margin-bottom:.3rem;}
.wb51e-highlight p{font-size:1.1rem;color:var(--wb51e-text-muted);line-height:1.4rem;}

/* Testimonials */
.wb51e-testi{display:flex;flex-direction:column;gap:.8rem;}
.wb51e-testi-item{background:#16202c;border-radius:.8rem;padding:1rem;border-left:3px solid var(--wb51e-teal);}
.wb51e-testi-item .who{font-size:1.2rem;color:var(--wb51e-yellow);font-weight:800;margin-bottom:.3rem;}
.wb51e-testi-item .who .stars{color:var(--wb51e-tomato);font-size:1rem;margin-left:.5rem;}
.wb51e-testi-item p{font-size:1.18rem;color:var(--wb51e-text-muted);line-height:1.6rem;}

/* Winners */
.wb51e-winners{display:flex;flex-direction:column;gap:.5rem;}
.wb51e-winner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .9rem;background:#16202c;border-radius:.6rem;border:1px solid var(--wb51e-border);
}
.wb51e-winner .nm{font-size:1.2rem;color:var(--wb51e-text);font-weight:700;}
.wb51e-winner .gm{font-size:1.05rem;color:var(--wb51e-text-muted);}
.wb51e-winner .amt{font-size:1.3rem;color:var(--wb51e-yellow);font-weight:900;}

/* Payment */
.wb51e-pay{display:flex;flex-wrap:wrap;gap:.6rem;}
.wb51e-pay span{
  background:#16202c;border:1px solid var(--wb51e-border);border-radius:.5rem;
  padding:.6rem .9rem;font-size:1.1rem;color:var(--wb51e-teal);font-weight:700;display:inline-flex;align-items:center;gap:.4rem;
}

/* App download CTA */
.wb51e-app{
  background:linear-gradient(135deg,#103039,#0e1a26);border-radius:1rem;
  padding:1.4rem;border:1px solid var(--wb51e-teal);text-align:center;margin-bottom:1.2rem;
}
.wb51e-app h3{font-size:1.7rem;color:var(--wb51e-yellow);margin-bottom:.5rem;}
.wb51e-app p{font-size:1.2rem;color:var(--wb51e-text-muted);margin-bottom:1rem;line-height:1.6rem;}
.wb51e-app .wb51e-btn{font-size:1.4rem;padding:.85rem 1.8rem;margin:0 .3rem;}

/* FAQ */
.wb51e-faq-item{border-bottom:1px solid var(--wb51e-border);padding:.9rem 0;}
.wb51e-faq-q{font-size:1.3rem;font-weight:700;color:var(--wb51e-yellow);display:flex;justify-content:space-between;cursor:pointer;line-height:1.6rem;}
.wb51e-faq-q .wb51e-ico{color:var(--wb51e-tomato);transition:transform .2s;}
.wb51e-faq-a{font-size:1.18rem;color:var(--wb51e-text-muted);margin-top:.6rem;line-height:1.7rem;display:none;}
.wb51e-faq-item.wb51e-open .wb51e-faq-a{display:block;}
.wb51e-faq-item.wb51e-open .wb51e-ico{transform:rotate(45deg);}

/* ===================== Footer ===================== */
.wb51e-footer{
  background:#0a1018;border-top:3px solid var(--wb51e-teal);
  padding:2rem 1.2rem 1.4rem;margin-top:1rem;
}
.wb51e-footer h4{font-size:1.4rem;color:var(--wb51e-yellow);margin:1rem 0 .6rem;}
.wb51e-footer p{font-size:1.15rem;color:var(--wb51e-text-muted);line-height:1.7rem;}
.wb51e-footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.8rem 0;}
.wb51e-footer-links a{font-size:1.15rem;color:var(--wb51e-text);padding:.4rem 0;border-bottom:1px dashed var(--wb51e-border);}
.wb51e-footer-promo{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0;}
.wb51e-footer-promo button{flex:1 1 40%;}
.wb51e-footer-copy{text-align:center;font-size:1.1rem;color:var(--wb51e-gray);padding-top:1rem;border-top:1px solid var(--wb51e-border);}

/* ===================== Mobile Bottom Nav ===================== */
.wb51e-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#0e1a26,#0a1018);
  border-top:2px solid var(--wb51e-teal);
  display:flex;justify-content:space-around;align-items:stretch;
  height:62px;max-width:430px;margin:0 auto;
}
.wb51e-bottomnav button{
  flex:1;background:transparent;border:none;color:var(--wb51e-text-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;gap:.2rem;cursor:pointer;min-width:60px;min-height:60px;
  transition:color .2s;position:relative;
}
.wb51e-bottomnav button i{font-size:22px;}
.wb51e-bottomnav button.wb51e-active{color:var(--wb51e-yellow);}
.wb51e-bottomnav button.wb51e-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:3px;background:var(--wb51e-tomato);border-radius:0 0 4px 4px;
}
.wb51e-bottomnav button:active{transform:scale(.92);}
.wb51e-bottomnav .wb51e-promo-dot{
  position:absolute;top:6px;right:18px;width:8px;height:8px;border-radius:50%;
  background:var(--wb51e-tomato);
}
@media (min-width:769px){.wb51e-bottomnav{display:none;}}

/* Desktop nav (top menu, mobile hidden via menu button) */
@media (min-width:769px){
  body{max-width:768px;}
}