/* 789 club ba - Core base stylesheet (mobile-first) */
/* Prefix: w97ae- */
:root{
  --w97ae-primary:#BA55D3;
  --w97ae-primary-2:#DB7093;
  --w97ae-accent:#CC99FF;
  --w97ae-light:#E6E6FA;
  --w97ae-paper:#FAFAFA;
  --w97ae-bg:#1C2833;
  --w97ae-bg-2:#243340;
  --w97ae-bg-3:#2f3b49;
  --w97ae-text:#FAFAFA;
  --w97ae-muted:#c9b8d8;
  --w97ae-gold:#FFD86b;
  --w97ae-green:#5ed6a6;
  --w97ae-radius:14px;
  --w97ae-shadow:0 6px 18px rgba(0,0,0,.35);
  --w97ae-header-h:60px;
  --w97ae-bottom-h:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,Arial,sans-serif;
  background:var(--w97ae-bg);
  color:var(--w97ae-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--w97ae-accent);text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .8rem;line-height:1.25;font-weight:800;}
h1{font-size:2.4rem;}
h2{font-size:2rem;}
h3{font-size:1.7rem;}
p{margin:0 0 1rem;}

/* ========== Layout ========== */
.w97ae-wrapper{max-width:430px;margin:0 auto;position:relative;min-height:100vh;}
.w97ae-container{padding:0 1.4rem;width:100%;}
.w97ae-main{padding-top:calc(var(--w97ae-header-h) + .8rem);padding-bottom:calc(var(--w97ae-bottom-h) + 2rem);}

/* ========== Header ========== */
.w97ae-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--w97ae-header-h);
  background:linear-gradient(90deg,#1C2833 0%,#2a1d3a 60%,#3a1d2e 100%);
  border-bottom:2px solid var(--w97ae-primary);
  box-shadow:0 3px 12px rgba(0,0,0,.45);
}
.w97ae-header-inner{max-width:430px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;gap:.6rem;}
.w97ae-logo{display:flex;align-items:center;gap:.6rem;min-width:0;}
.w97ae-logo img{width:30px;height:30px;border-radius:8px;object-fit:cover;}
.w97ae-logo b{color:var(--w97ae-paper);font-size:1.7rem;font-weight:800;white-space:nowrap;letter-spacing:.3px;}
.w97ae-logo span{color:var(--w97ae-accent);font-size:1.1rem;font-weight:600;}
.w97ae-head-actions{display:flex;align-items:center;gap:.5rem;}
.w97ae-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.1rem;border-radius:30px;font-size:1.35rem;font-weight:700;
  border:none;cursor:pointer;transition:transform .15s, box-shadow .15s, filter .15s;
  min-height:40px;text-align:center;line-height:1;
}
.w97ae-btn:active{transform:scale(.94);}
.w97ae-btn-primary{background:linear-gradient(90deg,#DB7093,#BA55D3);color:#fff;box-shadow:0 3px 10px rgba(186,85,211,.5);}
.w97ae-btn-outline{background:transparent;color:var(--w97ae-accent);border:1.5px solid var(--w97ae-primary);}
.w97ae-btn-gold{background:linear-gradient(90deg,#FFD86b,#f5a623);color:#1C2833;box-shadow:0 3px 10px rgba(255,216,107,.4);}
.w97ae-btn-block{display:flex;width:100%;justify-content:center;padding:.85rem 1.2rem;font-size:1.5rem;}
.w97ae-btn-lg{padding:1rem 1.6rem;font-size:1.6rem;min-height:48px;}
.w97ae-menu-btn{background:transparent;border:none;color:var(--w97ae-paper);font-size:2rem;cursor:pointer;padding:.4rem .6rem;border-radius:8px;}

/* ========== Mobile slide menu ========== */
.w97ae-side-menu{
  position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;z-index:9999;
  background:linear-gradient(160deg,#1C2833,#241a33 70%);
  box-shadow:-6px 0 24px rgba(0,0,0,.6);
  transition:right .28s ease;padding:1.6rem 1.4rem;overflow-y:auto;
}
.w97ae-side-menu.w97ae-open{right:0;}
.w97ae-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s;}
.w97ae-overlay.w97ae-open{opacity:1;pointer-events:auto;}
.w97ae-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(204,153,255,.25);}
.w97ae-menu-head b{color:var(--w97ae-paper);font-size:1.8rem;}
.w97ae-menu-close{background:transparent;border:none;color:var(--w97ae-paper);font-size:2.4rem;cursor:pointer;line-height:1;}
.w97ae-menu-link{
  display:flex;align-items:center;gap:.7rem;padding:1rem .8rem;border-radius:10px;
  color:var(--w97ae-light);font-size:1.5rem;font-weight:600;margin-bottom:.5rem;
  border:1px solid transparent;transition:all .18s;
}
.w97ae-menu-link:hover,.w97ae-menu-link:focus{background:rgba(186,85,211,.18);border-color:rgba(186,85,211,.4);color:#fff;}
.w97ae-menu-link i{color:var(--w97ae-accent);width:22px;text-align:center;}
.w97ae-menu-promo{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(204,153,255,.25);display:flex;flex-direction:column;gap:.6rem;}

/* ========== Hero / Carousel ========== */
.w97ae-hero{position:relative;margin:0 0 1.6rem;overflow:hidden;border-radius:0 0 18px 18px;}
.w97ae-carousel{position:relative;overflow:hidden;border-radius:14px;box-shadow:var(--w97ae-shadow);}
.w97ae-track{display:flex;transition:transform .45s ease;}
.w97ae-slide{min-width:100%;position:relative;cursor:pointer;}
.w97ae-slide img{width:100%;height:200px;object-fit:cover;}
.w97ae-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;background:linear-gradient(0deg,rgba(28,40,51,.92),rgba(28,40,51,0));color:#fff;}
.w97ae-slide-cap b{font-size:1.7rem;color:var(--w97ae-gold);}
.w97ae-slide-cap span{font-size:1.25rem;color:var(--w97ae-light);display:block;margin-top:.2rem;}
.w97ae-dots{display:flex;justify-content:center;gap:.5rem;padding:.7rem 0;}
.w97ae-dots button{width:9px;height:9px;border-radius:50%;background:rgba(204,153,255,.4);border:none;cursor:pointer;padding:0;}
.w97ae-dots button.w97ae-active{background:var(--w97ae-primary);transform:scale(1.3);}

/* ========== Section ========== */
.w97ae-section{margin:0 0 2rem;padding:0;}
.w97ae-section-title{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:2rem;color:var(--w97ae-paper);}
.w97ae-section-title i{color:var(--w97ae-primary-2);}
.w97ae-section-title em{font-style:normal;color:var(--w97ae-accent);font-size:1.3rem;font-weight:600;margin-left:auto;}
.w97ae-card{background:linear-gradient(160deg,#2a3543,#202a36);border:1px solid rgba(204,153,255,.18);border-radius:var(--w97ae-radius);padding:1.2rem;box-shadow:var(--w97ae-shadow);}
.w97ae-card p{color:var(--w97ae-light);font-size:1.4rem;}

/* ========== Game grid ========== */
.w97ae-cat-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 1rem;scrollbar-width:none;}
.w97ae-cat-tabs::-webkit-scrollbar{display:none;}
.w97ae-cat-tab{flex:0 0 auto;padding:.5rem 1.1rem;border-radius:20px;background:#243340;color:var(--w97ae-light);font-size:1.3rem;font-weight:700;border:1px solid transparent;cursor:pointer;white-space:nowrap;}
.w97ae-cat-tab.w97ae-active{background:linear-gradient(90deg,#DB7093,#BA55D3);color:#fff;border-color:transparent;}
.w97ae-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.w97ae-game-card{background:linear-gradient(160deg,#2f3b49,#222c38);border:1px solid rgba(204,153,255,.18);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s, box-shadow .18s;text-align:center;}
.w97ae-game-card:active{transform:scale(.95);}
.w97ae-game-card img{width:100%;height:78px;object-fit:cover;border-bottom:1px solid rgba(204,153,255,.18);}
.w97ae-game-card b{display:block;padding:.5rem .3rem;font-size:1.15rem;color:var(--w97ae-paper);font-weight:600;min-height:3.2rem;line-height:1.25;}
.w97ae-game-card.w97ae-hot::after{content:"HOT";position:absolute;}
.w97ae-game-badge{position:absolute;top:6px;left:6px;background:linear-gradient(90deg,#DB7093,#BA55D3);color:#fff;font-size:1rem;font-weight:800;padding:.15rem .5rem;border-radius:6px;}
.w97ae-game-wrap{position:relative;}
.w97ae-cat-head{display:flex;align-items:center;justify-content:space-between;margin:1.4rem 0 .8rem;}
.w97ae-cat-head h3{margin:0;font-size:1.8rem;color:var(--w97ae-paper);}
.w97ae-cat-head a{font-size:1.25rem;color:var(--w97ae-accent);font-weight:700;}

/* ========== Features / steps ========== */
.w97ae-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;}
.w97ae-feature{background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.2);border-radius:12px;padding:1rem;text-align:center;}
.w97ae-feature i{font-size:2.6rem;color:var(--w97ae-primary);margin-bottom:.5rem;}
.w97ae-feature b{display:block;color:var(--w97ae-paper);font-size:1.35rem;margin-bottom:.3rem;}
.w97ae-feature p{margin:0;color:var(--w97ae-muted);font-size:1.2rem;line-height:1.35;}
.w97ae-steps{counter-reset:step;list-style:none;padding:0;margin:0;}
.w97ae-steps li{position:relative;padding:0 0 1.2rem 3rem;margin:0;}
.w97ae-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(90deg,#DB7093,#BA55D3);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;}
.w97ae-steps li b{color:var(--w97ae-paper);font-size:1.45rem;display:block;margin-bottom:.2rem;}
.w97ae-steps li p{margin:0;color:var(--w97ae-light);font-size:1.3rem;}

/* ========== FAQ ========== */
.w97ae-faq-item{background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:10px;margin-bottom:.7rem;overflow:hidden;}
.w97ae-faq-q{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:1rem 1.1rem;cursor:pointer;font-weight:700;color:var(--w97ae-paper);font-size:1.4rem;}
.w97ae-faq-q i{color:var(--w97ae-primary);transition:transform .25s;}
.w97ae-faq-item.w97ae-open .w97ae-faq-q i{transform:rotate(180deg);}
.w97ae-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.1rem;color:var(--w97ae-light);font-size:1.3rem;}
.w97ae-faq-item.w97ae-open .w97ae-faq-a{max-height:320px;padding:0 1.1rem 1rem;}

/* ========== Testimonial ========== */
.w97ae-testi-grid{display:grid;grid-template-columns:1fr;gap:.8rem;}
.w97ae-testi{background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:12px;padding:1.1rem;}
.w97ae-testi-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem;}
.w97ae-testi-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(90deg,#DB7093,#BA55D3);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.5rem;}
.w97ae-testi-name{color:var(--w97ae-paper);font-weight:700;font-size:1.35rem;}
.w97ae-testi-stars{color:var(--w97ae-gold);font-size:1.2rem;margin-top:.1rem;}
.w97ae-testi p{margin:0;color:var(--w97ae-light);font-size:1.3rem;line-height:1.4;}

/* ========== Winners ========== */
.w97ae-winner-list{display:flex;flex-direction:column;gap:.5rem;}
.w97ae-winner{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem 1rem;background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:10px;}
.w97ae-winner-name{color:var(--w97ae-paper);font-weight:700;font-size:1.3rem;}
.w97ae-winner-game{color:var(--w97ae-muted);font-size:1.15rem;}
.w97ae-winner-amt{color:var(--w97ae-gold);font-weight:800;font-size:1.4rem;}

/* ========== Payment ========== */
.w97ae-pay-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.w97ae-pay{flex:1 1 30%;min-width:90px;background:#243340;border:1px solid rgba(204,153,255,.18);border-radius:10px;padding:.8rem;text-align:center;color:var(--w97ae-light);font-size:1.2rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.w97ae-pay i{font-size:2.2rem;color:var(--w97ae-accent);}

/* ========== Promo CTA ========== */
.w97ae-cta{background:linear-gradient(120deg,#3a1d2e,#2a1d3a 60%,#1d2a3a);border:1px solid var(--w97ae-primary);border-radius:16px;padding:1.4rem;text-align:center;margin:0 0 1.6rem;}
.w97ae-cta h3{color:var(--w97ae-gold);margin-bottom:.4rem;}
.w97ae-cta p{color:var(--w97ae-light);margin-bottom:1rem;}
.w97ae-cta-actions{display:flex;flex-direction:column;gap:.6rem;}

/* ========== Tricks ========== */
.w97ae-trick{display:flex;gap:.8rem;align-items:flex-start;background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:12px;padding:1rem;margin-bottom:.6rem;}
.w97ae-trick i{font-size:2.2rem;color:var(--w97ae-primary-2);flex:0 0 auto;}
.w97ae-trick b{color:var(--w97ae-paper);font-size:1.4rem;display:block;margin-bottom:.2rem;}
.w97ae-trick p{margin:0;color:var(--w97ae-light);font-size:1.25rem;line-height:1.4;}

/* ========== Achievements ========== */
.w97ae-ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
.w97ae-ach{background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:10px;padding:.9rem;text-align:center;}
.w97ae-ach b{display:block;color:var(--w97ae-gold);font-size:1.9rem;margin-bottom:.2rem;}
.w97ae-ach span{color:var(--w97ae-light);font-size:1.2rem;}

/* ========== Security ========== */
.w97ae-sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
.w97ae-sec{background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:10px;padding:1rem;display:flex;gap:.6rem;align-items:center;}
.w97ae-sec i{font-size:2.2rem;color:var(--w97ae-green);}
.w97ae-sec b{color:var(--w97ae-paper);font-size:1.3rem;display:block;}
.w97ae-sec span{color:var(--w97ae-muted);font-size:1.15rem;}

/* ========== App download ========== */
.w97ae-app-box{background:linear-gradient(120deg,#2a1d3a,#1d2a3a);border:1px solid var(--w97ae-primary);border-radius:16px;padding:1.3rem;display:flex;flex-direction:column;gap:.8rem;align-items:center;text-align:center;}
.w97ae-app-box h3{color:var(--w97ae-paper);}
.w97ae-app-box p{color:var(--w97ae-light);margin:0;font-size:1.3rem;}
.w97ae-app-actions{display:flex;flex-direction:column;gap:.5rem;width:100%;}

/* ========== RTP ========== */
.w97ae-rpt-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem 1rem;background:linear-gradient(160deg,#2a3543,#1f2935);border:1px solid rgba(204,153,255,.18);border-radius:10px;margin-bottom:.5rem;}
.w97ae-rpt-name{color:var(--w97ae-paper);font-weight:700;font-size:1.3rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.w97ae-rpt-bar{flex:1.2;height:8px;border-radius:5px;background:#243340;overflow:hidden;max-width:120px;}
.w97ae-rpt-bar span{display:block;height:100%;background:linear-gradient(90deg,#DB7093,#BA55D3);}
.w97ae-rpt-val{color:var(--w97ae-gold);font-weight:800;font-size:1.3rem;}

/* ========== Footer ========== */
.w97ae-footer{background:linear-gradient(180deg,#1C2833,#0f1620);border-top:2px solid var(--w97ae-primary);padding:1.8rem 1.4rem 2rem;margin-top:1.5rem;}
.w97ae-footer p{color:var(--w97ae-muted);font-size:1.25rem;line-height:1.5;}
.w97ae-footer-links{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0;}
.w97ae-footer-links a{flex:1 1 auto;min-width:80px;text-align:center;background:#243340;border:1px solid rgba(204,153,255,.2);color:var(--w97ae-light);padding:.55rem .7rem;border-radius:8px;font-size:1.15rem;font-weight:600;}
.w97ae-footer-links a:hover{color:#fff;border-color:var(--w97ae-primary);}
.w97ae-footer-promo{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.8rem 0;}
.w97ae-footer-promo button{width:100%;}
.w97ae-foot-copy{font-size:1.1rem;color:var(--w97ae-muted);text-align:center;margin-top:1rem;border-top:1px solid rgba(204,153,255,.15);padding-top:1rem;}

/* ========== Bottom nav ========== */
.w97ae-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;height:var(--w97ae-bottom-h);
  background:linear-gradient(90deg,#1C2833 0%,#2a1d3a 50%,#3a1d2e 100%);
  border-top:2px solid var(--w97ae-primary);
  display:flex;justify-content:space-around;align-items:stretch;
  box-shadow:0 -4px 14px rgba(0,0,0,.45);
}
.w97ae-bottom-nav button,.w97ae-bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;background:transparent;border:none;color:var(--w97ae-muted);
  font-size:1.05rem;font-weight:700;cursor:pointer;text-decoration:none;
  padding:.4rem .2rem;transition:color .15s, transform .15s;position:relative;
}
.w97ae-bottom-nav button:active,.w97ae-bottom-nav a:active{transform:scale(.9);}
.w97ae-bottom-nav [data-icon-wrap]{font-size:2.3rem;line-height:1;}
.w97ae-bottom-nav .w97ae-active{color:var(--w97ae-gold);}
.w97ae-bottom-nav .w97ae-active::after{content:"";position:absolute;bottom:2px;width:24px;height:3px;border-radius:3px;background:var(--w97ae-gold);}
.w97ae-nav-badge{position:absolute;top:4px;right:18px;background:#DB7093;color:#fff;font-size:.85rem;font-weight:800;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}

/* ========== Promo text link ========== */
.w97ae-promo-link{color:var(--w97ae-gold);font-weight:800;cursor:pointer;border-bottom:1.5px dashed var(--w97ae-primary-2);}
.w97ae-promo-link:hover{color:var(--w97ae-primary-2);}

/* ========== Content helpers ========== */
.w97ae-mini-grid{display:grid;grid-template-columns:1fr;gap:.8rem;}
.w97ae-note{background:linear-gradient(160deg,#2a3543,#1f2935);border-left:4px solid var(--w97ae-primary);border-radius:12px;padding:1rem;margin-bottom:.8rem;}
.w97ae-note b{display:block;color:var(--w97ae-gold);font-size:1.4rem;margin-bottom:.25rem;}
.w97ae-note p{margin:0;color:var(--w97ae-light);font-size:1.28rem;line-height:1.45;}
.w97ae-bullet-list{padding-left:1.8rem;margin:.5rem 0 0;color:var(--w97ae-light);font-size:1.3rem;line-height:1.5;}
.w97ae-bullet-list li{margin-bottom:.45rem;}
.w97ae-media-card{position:relative;overflow:hidden;border-radius:14px;border:1px solid rgba(204,153,255,.2);box-shadow:var(--w97ae-shadow);margin-bottom:1rem;}
.w97ae-media-card img{width:100%;height:155px;object-fit:cover;filter:saturate(1.05);}
.w97ae-media-caption{position:absolute;left:0;right:0;bottom:0;padding:1rem;background:linear-gradient(0deg,rgba(28,40,51,.96),rgba(28,40,51,0));}
.w97ae-media-caption b{color:var(--w97ae-gold);font-size:1.55rem;display:block;}
.w97ae-media-caption span{color:var(--w97ae-light);font-size:1.2rem;}

/* ========== Utility ========== */
.w97ae-text-center{text-align:center;}
.w97ae-mt-1{margin-top:.8rem;}
.w97ae-mt-2{margin-top:1.4rem;}
.w97ae-hidden{display:none !important;}
.w97ae-divider{height:1px;background:rgba(204,153,255,.18);margin:1.2rem 0;border:none;}

/* ========== Desktop adjustments ========== */
@media (min-width:769px){
  .w97ae-bottom-nav{display:none;}
  .w97ae-wrapper{max-width:760px;}
  .w97ae-main{padding-bottom:3rem;}
  .w97ae-game-grid{grid-template-columns:repeat(4,1fr);}
  .w97ae-feature-grid,.w97ae-ach-grid,.w97ae-sec-grid{grid-template-columns:repeat(4,1fr);}
  .w97ae-mini-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .w97ae-main{padding-bottom:calc(var(--w97ae-bottom-h) + 2rem);}
}
