/* =========================================================
   table game 5 - core layout stylesheet
   Prefix : vab9-
   Palette: #FFB347 (amber) / #FFEBCD (cream) / #262626 (dark)
            #20B2AA (teal) / #E0F2F1 (mist)
   ========================================================= */

:root{
  --vab9-primary:#FFB347;
  --vab9-primary-deep:#E8941E;
  --vab9-cream:#FFEBCD;
  --vab9-bg:#1f1f1f;
  --vab9-bg-2:#262626;
  --vab9-bg-3:#303030;
  --vab9-teal:#20B2AA;
  --vab9-mist:#E0F2F1;
  --vab9-text:#FFEBCD;
  --vab9-text-soft:#cfc7b3;
  --vab9-text-mute:#9a907a;
  --vab9-line:rgba(255,179,71,.18);
  --vab9-line-2:rgba(255,235,205,.08);
  --vab9-shadow:0 10px 26px rgba(0,0,0,.45);
  --vab9-rad:14px;
  --vab9-rad-sm:10px;
  --vab9-grad:linear-gradient(135deg,#FFB347 0%,#E8941E 60%,#20B2AA 130%);
  --vab9-grad-dark:linear-gradient(160deg,#262626 0%,#1a1a1a 100%);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--vab9-bg);
  color:var(--vab9-text);
  line-height:1.5;
  font-size:1.5rem;
  max-width:430px;
  margin:0 auto;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:var(--vab9-primary);text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul,ol{list-style:none;}

/* ---------- Container ---------- */
.vab9-container{width:100%;max-width:430px;margin:0 auto;padding:0 14px;}
.vab9-wrapper{padding:18px 14px;}
.vab9-section{padding:26px 0;border-bottom:1px solid var(--vab9-line-2);}
.vab9-section--alt{background:linear-gradient(180deg,#232323,#1c1c1c);}

/* ---------- Header ---------- */
.vab9-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;
  background:rgba(31,31,31,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vab9-line);
}
.vab9-header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;gap:8px;
}
.vab9-brand{display:flex;align-items:center;gap:8px;min-width:0;}
.vab9-brand-icon{
  width:32px;height:32px;border-radius:9px;
  background:var(--vab9-grad);
  display:flex;align-items:center;justify-content:center;
  color:#1a1a1a;font-weight:800;font-size:1.5rem;
  box-shadow:0 4px 12px rgba(255,179,71,.4);
}
.vab9-brand-name{
  font-size:1.6rem;font-weight:800;color:var(--vab9-primary);
  letter-spacing:.3px;white-space:nowrap;
}
.vab9-brand-name small{display:block;font-size:1rem;color:var(--vab9-text-soft);font-weight:500;letter-spacing:.2px;}
.vab9-header-actions{display:flex;align-items:center;gap:8px;}
.vab9-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:30px;font-size:1.3rem;font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vab9-btn:active{transform:scale(.94);}
.vab9-btn--login{
  background:transparent;color:var(--vab9-cream);
  border:1.5px solid var(--vab9-teal);
}
.vab9-btn--register{
  background:var(--vab9-grad);color:#1a1a1a;
  box-shadow:0 5px 14px rgba(255,179,71,.45);
}
.vab9-icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--vab9-bg-3);color:var(--vab9-cream);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;border:1px solid var(--vab9-line);
}

/* ---------- Mobile menu ---------- */
.vab9-menu-toggle{display:flex;}
.vab9-menu-panel{
  position:fixed;top:0;right:-100%;width:80%;max-width:340px;
  height:100vh;background:var(--vab9-bg-2);z-index:9999;
  transition:right .28s ease;padding:80px 18px 30px;
  overflow-y:auto;border-left:1px solid var(--vab9-line);
  box-shadow:-10px 0 30px rgba(0,0,0,.5);
}
.vab9-menu-panel.vab9-is-open{right:0;}
.vab9-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .25s ease;max-width:430px;left:50%;transform:translateX(-50%);width:100%;
}
.vab9-menu-overlay.vab9-is-open{opacity:1;visibility:visible;}
.vab9-menu-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  background:var(--vab9-bg-3);color:var(--vab9-cream);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
}
.vab9-menu-title{font-size:1.4rem;color:var(--vab9-primary);font-weight:700;margin-bottom:12px;letter-spacing:.5px;text-transform:uppercase;}
.vab9-menu-list{margin-bottom:22px;}
.vab9-menu-list li{border-bottom:1px solid var(--vab9-line-2);}
.vab9-menu-list a{
  display:flex;align-items:center;gap:10px;
  padding:13px 10px;color:var(--vab9-cream);font-size:1.4rem;font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.vab9-menu-list a:hover{background:var(--vab9-bg-3);color:var(--vab9-primary);}
.vab9-menu-list .material-symbols-rounded{font-size:2rem;color:var(--vab9-teal);}
.vab9-menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.vab9-menu-cta .vab9-btn{justify-content:center;padding:13px;}

/* ---------- Main ---------- */
main{padding-top:68px;padding-bottom:90px;}

/* ---------- Hero / Carousel ---------- */
.vab9-hero{position:relative;overflow:hidden;}
.vab9-carousel{position:relative;border-radius:0 0 18px 18px;overflow:hidden;}
.vab9-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}
.vab9-slides::-webkit-scrollbar{display:none;}
.vab9-slide{
  flex:0 0 100%;scroll-snap-align:start;position:relative;
  min-height:230px;display:flex;align-items:flex-end;
}
.vab9-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vab9-slide-overlay{
  position:relative;z-index:2;width:100%;
  padding:20px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%);
}
.vab9-slide-tag{
  display:inline-block;padding:4px 10px;border-radius:20px;
  background:var(--vab9-primary);color:#1a1a1a;font-size:1.1rem;font-weight:700;margin-bottom:8px;
}
.vab9-slide-title{font-size:2rem;font-weight:800;color:#fff;line-height:1.25;margin-bottom:6px;}
.vab9-slide-sub{font-size:1.25rem;color:var(--vab9-cream);margin-bottom:12px;}
.vab9-slide-dots{display:flex;gap:6px;justify-content:center;padding:10px 0;background:#1a1a1a;}
.vab9-slide-dots button{
  width:8px;height:8px;border-radius:50%;background:rgba(255,235,205,.3);
  transition:all .2s ease;
}
.vab9-slide-dots button.vab9-active{background:var(--vab9-primary);width:22px;border-radius:5px;}

/* ---------- Section heading ---------- */
.vab9-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;}
.vab9-section-title{
  font-size:1.7rem;font-weight:800;color:var(--vab9-primary);
  display:flex;align-items:center;gap:8px;line-height:1.2;
}
.vab9-section-title i,.vab9-section-title .material-symbols-rounded{font-size:2rem;color:var(--vab9-teal);}
.vab9-section-more{font-size:1.2rem;color:var(--vab9-text-soft);font-weight:600;white-space:nowrap;}
.vab9-section-more:hover{color:var(--vab9-primary);}
.vab9-eyebrow{
  display:inline-block;font-size:1.1rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--vab9-teal);font-weight:700;margin-bottom:6px;
}

/* ---------- Game grid ---------- */
.vab9-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.vab9-grid--2{grid-template-columns:repeat(2,1fr);}
.vab9-card{
  background:var(--vab9-bg-2);border-radius:var(--vab9-rad-sm);
  border:1px solid var(--vab9-line-2);overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative;
}
.vab9-card:hover{transform:translateY(-3px);border-color:var(--vab9-line);box-shadow:var(--vab9-shadow);}
.vab9-card:active{transform:scale(.97);}
.vab9-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111;}
.vab9-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.vab9-card:hover .vab9-card-media img{transform:scale(1.06);}
.vab9-card-badge{
  position:absolute;top:6px;left:6px;
  background:var(--vab9-grad);color:#1a1a1a;
  font-size:1rem;font-weight:700;padding:2px 7px;border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.vab9-card-badge--hot{background:linear-gradient(135deg,#ff5e62,#ff9966);}
.vab9-card-badge--new{background:linear-gradient(135deg,#20B2AA,#0fd3ce);color:#fff;}
.vab9-card-body{padding:8px 9px 10px;}
.vab9-card-name{font-size:1.2rem;font-weight:600;color:var(--vab9-cream);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vab9-card-meta{font-size:1rem;color:var(--vab9-text-mute);margin-top:3px;display:flex;align-items:center;gap:4px;}
.vab9-card-meta i{font-size:1rem;color:var(--vab9-primary);}

/* ---------- Promo CTA banner ---------- */
.vab9-cta{
  background:var(--vab9-grad);color:#1a1a1a;border-radius:var(--vab9-rad);
  padding:18px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 10px 26px rgba(255,179,71,.35);
}
.vab9-cta-text h3{font-size:1.6rem;font-weight:800;}
.vab9-cta-text p{font-size:1.15rem;color:#3a2c10;margin-top:2px;}
.vab9-cta-btn{
  background:#1a1a1a;color:var(--vab9-primary);padding:11px 18px;border-radius:30px;
  font-weight:800;font-size:1.3rem;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.vab9-cta-btn:active{transform:scale(.95);}

/* ---------- Filter chips ---------- */
.vab9-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;}
.vab9-chips::-webkit-scrollbar{display:none;}
.vab9-chip{
  padding:8px 14px;border-radius:30px;background:var(--vab9-bg-3);
  color:var(--vab9-cream);font-size:1.2rem;font-weight:600;white-space:nowrap;
  border:1px solid var(--vab9-line-2);transition:all .15s ease;
}
.vab9-chip.vab9-active{background:var(--vab9-grad);color:#1a1a1a;border-color:transparent;}

/* ---------- Feature / Info blocks ---------- */
.vab9-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.vab9-feature{
  background:var(--vab9-bg-2);border:1px solid var(--vab9-line-2);
  border-radius:var(--vab9-rad);padding:14px;
}
.vab9-feature-ico{
  width:42px;height:42px;border-radius:11px;background:rgba(32,178,170,.15);
  display:flex;align-items:center;justify-content:center;color:var(--vab9-teal);font-size:2rem;margin-bottom:8px;
}
.vab9-feature h4{font-size:1.3rem;font-weight:700;color:var(--vab9-primary);margin-bottom:4px;}
.vab9-feature p{font-size:1.15rem;color:var(--vab9-text-soft);line-height:1.45;}

/* ---------- Prose ---------- */
.vab9-prose{font-size:1.35rem;color:var(--vab9-text-soft);line-height:1.65;}
.vab9-prose h2,.vab9-prose h3{color:var(--vab9-cream);font-weight:800;margin:16px 0 8px;line-height:1.3;}
.vab9-prose h2{font-size:1.7rem;}
.vab9-prose h3{font-size:1.45rem;}
.vab9-prose p{margin-bottom:10px;}
.vab9-prose strong{color:var(--vab9-primary);font-weight:700;}
.vab9-prose ul{padding-left:18px;margin-bottom:10px;}
.vab9-prose ul li{list-style:disc;margin-bottom:5px;color:var(--vab9-text-soft);}
.vab9-prose a{text-decoration:underline;text-decoration-color:rgba(255,179,71,.4);text-underline-offset:2px;}
.vab9-prose a:hover{color:var(--vab9-primary);}

/* ---------- Steps ---------- */
.vab9-steps{counter-reset:step;display:flex;flex-direction:column;gap:12px;}
.vab9-step{
  display:flex;gap:12px;background:var(--vab9-bg-2);
  border:1px solid var(--vab9-line-2);border-radius:var(--vab9-rad);padding:13px 14px;
}
.vab9-step-num{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:var(--vab9-grad);color:#1a1a1a;font-weight:800;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
}
.vab9-step h4{font-size:1.3rem;font-weight:700;color:var(--vab9-primary);margin-bottom:3px;}
.vab9-step p{font-size:1.2rem;color:var(--vab9-text-soft);line-height:1.5;}

/* ---------- FAQ ---------- */
.vab9-faq{display:flex;flex-direction:column;gap:8px;}
.vab9-faq-item{
  background:var(--vab9-bg-2);border:1px solid var(--vab9-line-2);
  border-radius:var(--vab9-rad-sm);overflow:hidden;
}
.vab9-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px;background:none;text-align:left;font-size:1.3rem;font-weight:700;color:var(--vab9-cream);
}
.vab9-faq-q .bi{color:var(--vab9-primary);font-size:1.6rem;transition:transform .2s ease;}
.vab9-faq-item.vab9-open .vab9-faq-q .bi{transform:rotate(45deg);}
.vab9-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 14px;}
.vab9-faq-item.vab9-open .vab9-faq-a{max-height:400px;padding:0 14px 14px;}
.vab9-faq-a p{font-size:1.2rem;color:var(--vab9-text-soft);line-height:1.55;}

/* ---------- Testimonials ---------- */
.vab9-reviews{display:flex;flex-direction:column;gap:10px;}
.vab9-review{
  background:var(--vab9-bg-2);border:1px solid var(--vab9-line-2);
  border-left:3px solid var(--vab9-primary);border-radius:var(--vab9-rad-sm);
  padding:13px 14px;
}
.vab9-review-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.vab9-review-av{
  width:36px;height:36px;border-radius:50%;
  background:var(--vab9-grad);color:#1a1a1a;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.vab9-review-name{font-size:1.25rem;font-weight:700;color:var(--vab9-cream);}
.vab9-review-stars{color:var(--vab9-primary);font-size:1.1rem;}
.vab9-review p{font-size:1.2rem;color:var(--vab9-text-soft);line-height:1.5;}

/* ---------- Payment ---------- */
.vab9-pay{display:flex;flex-wrap:wrap;gap:8px;}
.vab9-pay-item{
  flex:1 1 30%;min-width:90px;background:var(--vab9-bg-2);border:1px solid var(--vab9-line-2);
  border-radius:var(--vab9-rad-sm);padding:12px 8px;text-align:center;
}
.vab9-pay-item i{font-size:2.2rem;color:var(--vab9-teal);}
.vab9-pay-item span{display:block;font-size:1.1rem;color:var(--vab9-text-soft);margin-top:4px;font-weight:600;}

/* ---------- Winners ---------- */
.vab9-winners{background:var(--vab9-bg-2);border:1px solid var(--vab9-line);border-radius:var(--vab9-rad);overflow:hidden;}
.vab9-winner-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--vab9-line-2);gap:8px;}
.vab9-winner-row:last-child{border-bottom:none;}
.vab9-winner-user{display:flex;align-items:center;gap:8px;min-width:0;}
.vab9-winner-av{width:28px;height:28px;border-radius:50%;background:var(--vab9-teal);color:#fff;font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;}
.vab9-winner-name{font-size:1.2rem;color:var(--vab9-cream);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vab9-winner-game{font-size:1.05rem;color:var(--vab9-text-mute);}
.vab9-winner-amt{font-size:1.3rem;font-weight:800;color:var(--vab9-primary);}

/* ---------- App download CTA ---------- */
.vab9-app{
  background:linear-gradient(135deg,#262626,#1a1a1a);
  border:1px solid var(--vab9-line);border-radius:var(--vab9-rad);
  padding:18px;display:flex;flex-direction:column;gap:14px;
}
.vab9-app-row{display:flex;align-items:center;gap:12px;}
.vab9-app-qr{
  width:80px;height:80px;border-radius:12px;background:var(--vab9-cream);
  display:flex;align-items:center;justify-content:center;color:#262626;font-size:2.6rem;flex:0 0 80px;
}
.vab9-app-text h3{font-size:1.6rem;color:var(--vab9-primary);font-weight:800;margin-bottom:3px;}
.vab9-app-text p{font-size:1.2rem;color:var(--vab9-text-soft);}
.vab9-app-btns{display:flex;gap:8px;}
.vab9-app-btn{
  flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  background:var(--vab9-bg-3);border:1px solid var(--vab9-line);color:var(--vab9-cream);
  padding:11px;border-radius:10px;font-weight:700;font-size:1.15rem;
}
.vab9-app-btn i{font-size:1.7rem;color:var(--vab9-primary);}

/* ---------- Security / Trust ---------- */
.vab9-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;}
.vab9-trust-item{background:var(--vab9-bg-2);border:1px solid var(--vab9-line-2);border-radius:var(--vab9-rad-sm);padding:14px 8px;}
.vab9-trust-item i,.vab9-trust-item .material-symbols-rounded{font-size:2.4rem;color:var(--vab9-teal);}
.vab9-trust-item span{display:block;font-size:1.1rem;color:var(--vab9-cream);font-weight:700;margin-top:6px;}
.vab9-trust-item small{font-size:1rem;color:var(--vab9-text-mute);}

/* ---------- Footer ---------- */
.vab9-footer{background:#161616;border-top:1px solid var(--vab9-line);padding:26px 14px 20px;}
.vab9-footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.vab9-footer p{font-size:1.2rem;color:var(--vab9-text-mute);line-height:1.6;margin-bottom:14px;}
.vab9-footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px;}
.vab9-footer-col h5{font-size:1.2rem;color:var(--vab9-primary);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;}
.vab9-footer-col a{display:block;font-size:1.15rem;color:var(--vab9-text-soft);padding:4px 0;}
.vab9-footer-col a:hover{color:var(--vab9-primary);}
.vab9-footer-cta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.vab9-footer-cta .vab9-btn{flex:1;justify-content:center;min-width:120px;}
.vab9-footer-copy{text-align:center;font-size:1.1rem;color:var(--vab9-text-mute);border-top:1px solid var(--vab9-line-2);padding-top:14px;}

/* ---------- Mobile bottom nav ---------- */
.vab9-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;
  background:rgba(22,22,22,.98);backdrop-filter:blur(10px);
  border-top:1px solid var(--vab9-line);
  display:flex;justify-content:space-around;align-items:stretch;
  height:64px;padding:4px 0;
}
.vab9-bottomnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--vab9-text-mute);font-size:1rem;font-weight:600;
  transition:color .15s ease, transform .15s ease;position:relative;min-width:60px;min-height:56px;
}
.vab9-bottomnav-btn i,.vab9-bottomnav-btn .material-symbols-rounded,.vab9-bottomnav-btn .icon{
  font-size:2.2rem;transition:transform .18s ease, color .15s ease;
}
.vab9-bottomnav-btn:active{transform:scale(.9);}
.vab9-bottomnav-btn.vab9-active{color:var(--vab9-primary);}
.vab9-bottomnav-btn.vab9-active i,.vab9-bottomnav-btn.vab9-active .material-symbols-rounded{transform:translateY(-2px);}
.vab9-bottomnav-btn.vab9-promo{
  color:#1a1a1a;background:var(--vab9-grad);
  border-radius:14px;margin:4px 2px;
}
.vab9-bottomnav-btn.vab9-promo i,.vab9-bottomnav-btn.vab9-promo .material-symbols-rounded{color:#1a1a1a;}
.vab9-bottomnav-btn.vab9-promo span{color:#1a1a1a;}
.vab9-badge-dot{
  position:absolute;top:6px;right:18px;
  width:8px;height:8px;border-radius:50%;background:#ff5e62;
  box-shadow:0 0 0 2px rgba(22,22,22,.98);
}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .vab9-bottomnav{display:none;}
  body{max-width:430px;}
}
@media (max-width:768px){
  main{padding-bottom:90px;}
}

/* ---------- Helpers ---------- */
.vab9-hide{display:none !important;}
.vab9-mt-12{margin-top:12px;}
.vab9-mt-16{margin-top:16px;}
.vab9-text-center{text-align:center;}
.vab9-divider{height:1px;background:var(--vab9-line-2);margin:18px 0;}
.vab9-pill{display:inline-block;padding:3px 10px;border-radius:20px;background:rgba(32,178,170,.15);color:var(--vab9-teal);font-size:1.05rem;font-weight:600;}