/* MV88 App - core stylesheet (prefix: gbdb-) */
/* Color palette: #212F3D bg | #C9C9FF | #FF8A80 | #FF8C00 | #FA8072 */

:root{
  --gbdb-bg:#212F3D;
  --gbdb-bg-2:#1a2330;
  --gbdb-bg-3:#283a52;
  --gbdb-primary:#FF8C00;
  --gbdb-primary-2:#FA8072;
  --gbdb-accent:#C9C9FF;
  --gbdb-warm:#FF8A80;
  --gbdb-text:#f4f6fb;
  --gbdb-text-dim:#aeb8cf;
  --gbdb-border:rgba(201,201,255,.18);
  --gbdb-radius:14px;
  --gbdb-shadow:0 8px 24px rgba(0,0,0,.28);
  --gbdb-header-h:56px;
  --gbdb-nav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI","Noto Sans",Roboto,Arial,sans-serif;
  background:var(--gbdb-bg);
  color:var(--gbdb-text);
  line-height:1.5;
  max-width:430px;
  margin:0 auto;
  position:relative;
  overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:var(--gbdb-accent);text-decoration:none}
ul{list-style:none}

/* layout helpers */
.gbdb-container{width:100%;padding:0 14px}
.gbdb-wrapper{padding:14px 0}
.gbdb-section{padding:22px 14px}
.gbdb-section--alt{background:linear-gradient(180deg,var(--gbdb-bg-2),var(--gbdb-bg))}
.gbdb-section-title{
  font-size:1.9rem;font-weight:800;color:#fff;margin-bottom:4px;
  display:flex;align-items:center;gap:8px;
}
.gbdb-section-title i{color:var(--gbdb-primary)}
.gbdb-section-sub{font-size:1.25rem;color:var(--gbdb-text-dim);margin-bottom:14px}

/* buttons */
.gbdb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:0;cursor:pointer;border-radius:30px;padding:10px 18px;
  font-size:1.3rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--gbdb-primary),var(--gbdb-primary-2));
  box-shadow:0 4px 14px rgba(255,140,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:40px;
}
.gbdb-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,140,0,.5)}
.gbdb-btn--ghost{background:transparent;border:1.5px solid var(--gbdb-accent);color:var(--gbdb-accent);box-shadow:none}
.gbdb-btn--ghost:hover{background:rgba(201,201,255,.12)}
.gbdb-btn--lg{padding:14px 26px;font-size:1.5rem;min-height:48px}
.gbdb-btn--block{width:100%}

/* text link */
.gbdb-link{
  color:var(--gbdb-primary-2);font-weight:700;cursor:pointer;
  border-bottom:1px dashed rgba(250,128,114,.5);
}
.gbdb-link:hover{color:var(--gbdb-primary)}

/* ===== Header ===== */
.gbdb-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--gbdb-header-h);z-index:1000;
  background:linear-gradient(90deg,var(--gbdb-bg-2),var(--gbdb-bg-3));
  border-bottom:1px solid var(--gbdb-border);
  display:flex;align-items:center;padding:0 12px;gap:8px;
}
.gbdb-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.gbdb-logo img{width:30px;height:30px;border-radius:8px;object-fit:cover}
.gbdb-logo span{font-size:1.5rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbdb-logo small{display:block;font-size:1.05rem;color:var(--gbdb-primary);font-weight:600}
.gbdb-header-actions{display:flex;align-items:center;gap:6px}
.gbdb-header-actions .gbdb-btn{padding:8px 14px;font-size:1.2rem;min-height:36px}
.gbdb-menu-toggle{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--gbdb-border);
  background:rgba(201,201,255,.1);color:#fff;font-size:1.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ===== Mobile Slide Menu ===== */
.gbdb-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:.25s;z-index:9998;
}
.gbdb-menu-backdrop.gbdb-open{opacity:1;visibility:visible}
.gbdb-menu{
  position:fixed;top:0;right:0;height:100vh;width:82%;max-width:340px;z-index:9999;
  background:linear-gradient(180deg,var(--gbdb-bg-3),var(--gbdb-bg-2));
  transform:translateX(100%);transition:transform .28s ease;padding:18px 16px;overflow-y:auto;
}
.gbdb-menu.gbdb-open{transform:translateX(0)}
.gbdb-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.gbdb-menu-head h3{font-size:1.6rem;color:#fff;font-weight:800}
.gbdb-menu-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:0;font-size:1.8rem;cursor:pointer}
.gbdb-menu-section{margin-bottom:18px}
.gbdb-menu-section h4{font-size:1.2rem;color:var(--gbdb-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;padding:0 4px}
.gbdb-menu-section a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  color:var(--gbdb-text);font-size:1.4rem;font-weight:600;
  border:1px solid transparent;
}
.gbdb-menu-section a:hover{background:rgba(201,201,255,.1);border-color:var(--gbdb-border)}
.gbdb-menu-section a i{color:var(--gbdb-accent);font-size:1.6rem;width:22px;text-align:center}
.gbdb-menu-cta{display:flex;flex-direction:column;gap:8px;margin-top:14px}

/* ===== Hero / Carousel ===== */
.gbdb-main{padding-top:calc(var(--gbdb-header-h) + 8px);padding-bottom:calc(var(--gbdb-nav-h) + 18px)}
.gbdb-carousel{
  position:relative;border-radius:var(--gbdb-radius);overflow:hidden;
  box-shadow:var(--gbdb-shadow);margin:14px 0;
}
.gbdb-carousel-track{display:flex;transition:transform .45s ease}
.gbdb-carousel-slide{min-width:100%;position:relative}
.gbdb-carousel-slide img{width:100%;height:200px;object-fit:cover}
.gbdb-carousel-cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  background:linear-gradient(0deg,rgba(33,47,61,.92),rgba(33,47,61,0));
  padding:14px 14px 12px;border-radius:12px;
}
.gbdb-carousel-cap h2{font-size:1.7rem;color:#fff;margin-bottom:6px}
.gbdb-carousel-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}
.gbdb-carousel-dots button{
  width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;
}
.gbdb-carousel-dots button.gbdb-active{background:var(--gbdb-primary);width:20px;border-radius:4px}

/* H1 intro */
.gbdb-intro h1{font-size:2.1rem;line-height:1.3;font-weight:800;color:#fff;margin-bottom:8px}
.gbdb-intro h1 em{font-style:normal;color:var(--gbdb-primary)}
.gbdb-intro p{font-size:1.35rem;color:var(--gbdb-text-dim);margin-bottom:12px}

/* ===== Game grid ===== */
.gbdb-cat-head{
  display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px;
}
.gbdb-cat-head h2{font-size:1.7rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.gbdb-cat-head h2 i{color:var(--gbdb-primary)}
.gbdb-cat-head .gbdb-more{font-size:1.2rem;color:var(--gbdb-accent);font-weight:600}

.gbdb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gbdb-grid--4{grid-template-columns:repeat(4,1fr)}
.gbdb-card{
  background:var(--gbdb-bg-3);border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid var(--gbdb-border);transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.gbdb-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.4)}
.gbdb-card-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}
.gbdb-card-img img{width:100%;height:100%;object-fit:cover}
.gbdb-card-hot{
  position:absolute;top:5px;left:5px;background:var(--gbdb-warm);color:#fff;
  font-size:.95rem;font-weight:800;padding:2px 6px;border-radius:6px;
}
.gbdb-card-name{
  font-size:1.15rem;color:var(--gbdb-text);font-weight:600;
  padding:6px 6px 8px;text-align:center;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===== Feature / Highlights cards ===== */
.gbdb-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gbdb-feature{
  background:linear-gradient(135deg,var(--gbdb-bg-3),var(--gbdb-bg-2));
  border:1px solid var(--gbdb-border);border-radius:12px;padding:14px;
}
.gbdb-feature i{font-size:2.2rem;color:var(--gbdb-primary);margin-bottom:8px}
.gbdb-feature.material-icons{font-family:'Material Icons'}
.gbdb-feature h3{font-size:1.35rem;color:#fff;margin-bottom:4px}
.gbdb-feature p{font-size:1.15rem;color:var(--gbdb-text-dim);line-height:1.4}

/* steps */
.gbdb-steps{counter-reset:step;display:flex;flex-direction:column;gap:10px}
.gbdb-step{
  display:flex;gap:12px;background:var(--gbdb-bg-3);border-radius:12px;padding:12px;
  border:1px solid var(--gbdb-border);
}
.gbdb-step-num{
  flex:0 0 36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gbdb-primary),var(--gbdb-primary-2));
  color:#fff;font-weight:800;font-size:1.5rem;display:flex;align-items:center;justify-content:center;
}
.gbdb-step h4{font-size:1.35rem;color:#fff;margin-bottom:2px}
.gbdb-step p{font-size:1.15rem;color:var(--gbdb-text-dim)}

/* testimonials */
.gbdb-testi{display:flex;flex-direction:column;gap:10px}
.gbdb-testi-item{
  background:var(--gbdb-bg-3);border-radius:12px;padding:12px;
  border-left:4px solid var(--gbdb-primary);
}
.gbdb-testi-item .gbdb-stars{color:var(--gbdb-primary);font-size:1.2rem;margin-bottom:4px}
.gbdb-testi-item p{font-size:1.2rem;color:var(--gbdb-text);margin-bottom:6px}
.gbdb-testi-item span{font-size:1.1rem;color:var(--gbdb-text-dim);font-weight:600}

/* payment methods */
.gbdb-pay{display:flex;flex-wrap:wrap;gap:8px}
.gbdb-pay span{
  background:var(--gbdb-bg-3);border:1px solid var(--gbdb-border);
  padding:8px 12px;border-radius:10px;font-size:1.15rem;color:var(--gbdb-text);
  display:inline-flex;align-items:center;gap:6px;
}
.gbdb-pay i{color:var(--gbdb-accent)}

/* winners */
.gbdb-winners{display:flex;flex-direction:column;gap:8px}
.gbdb-winner{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--gbdb-bg-3);border:1px solid var(--gbdb-border);border-radius:10px;padding:10px 12px;
}
.gbdb-winner .gbdb-w-name{font-size:1.2rem;color:var(--gbdb-text);font-weight:600}
.gbdb-winner .gbdb-w-game{font-size:1.05rem;color:var(--gbdb-text-dim)}
.gbdb-winner .gbdb-w-amount{color:var(--gbdb-primary);font-weight:800;font-size:1.4rem}

/* app download CTA */
.gbdb-app-cta{
  background:linear-gradient(135deg,rgba(255,140,0,.18),rgba(250,128,114,.14));
  border:1px solid var(--gbdb-border);border-radius:14px;padding:16px;text-align:center;
}
.gbdb-app-cta h3{font-size:1.6rem;color:#fff;margin-bottom:6px}
.gbdb-app-cta p{font-size:1.2rem;color:var(--gbdb-text-dim);margin-bottom:12px}
.gbdb-app-cta .gbdb-btns{display:flex;flex-direction:column;gap:8px}

/* FAQ */
.gbdb-faq-item{
  background:var(--gbdb-bg-3);border:1px solid var(--gbdb-border);
  border-radius:10px;margin-bottom:8px;overflow:hidden;
}
.gbdb-faq-q{
  width:100%;text-align:left;background:none;border:0;color:#fff;
  font-size:1.3rem;font-weight:700;padding:12px 14px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.gbdb-faq-q .gbdb-icon{color:var(--gbdb-primary);transition:transform .25s}
.gbdb-faq-item.gbdb-open .gbdb-icon{transform:rotate(45deg)}
.gbdb-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 14px}
.gbdb-faq-item.gbdb-open .gbdb-faq-a{max-height:280px;padding:0 14px 12px}
.gbdb-faq-a p{font-size:1.18rem;color:var(--gbdb-text-dim)}

/* trust */
.gbdb-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.gbdb-trust .gbdb-t-item{background:var(--gbdb-bg-3);border:1px solid var(--gbdb-border);border-radius:10px;padding:12px 6px}
.gbdb-trust .gbdb-t-item i{font-size:2rem;color:var(--gbdb-primary)}
.gbdb-trust .gbdb-t-item strong{display:block;font-size:1.4rem;color:#fff;margin-top:4px}
.gbdb-trust .gbdb-t-item span{font-size:1rem;color:var(--gbdb-text-dim)}

/* SEO article */
.gbdb-article p{font-size:1.28rem;color:var(--gbdb-text-dim);margin-bottom:10px;line-height:1.6}
.gbdb-article h3{font-size:1.5rem;color:#fff;margin:14px 0 6px}
.gbdb-article a{color:var(--gbdb-accent);font-weight:600;border-bottom:1px dashed rgba(201,201,255,.4)}

/* ===== Footer ===== */
.gbdb-footer{
  background:var(--gbdb-bg-2);border-top:1px solid var(--gbdb-border);
  padding:20px 14px 10px;
}
.gbdb-footer-brand{font-size:1.6rem;font-weight:800;color:#fff;margin-bottom:6px}
.gbdb-footer-brand small{display:block;font-size:1.15rem;color:var(--gbdb-text-dim);font-weight:400;margin-top:4px;line-height:1.5}
.gbdb-footer-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.gbdb-footer-links a{
  font-size:1.15rem;color:var(--gbdb-accent);background:var(--gbdb-bg-3);
  padding:6px 10px;border-radius:8px;border:1px solid var(--gbdb-border);
}
.gbdb-footer-cta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.gbdb-footer-copy{font-size:1.1rem;color:var(--gbdb-text-dim);text-align:center;padding-top:10px;border-top:1px solid var(--gbdb-border);margin-top:10px}

/* ===== Mobile bottom nav ===== */
.gbdb-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--gbdb-nav-h);z-index:1000;
  background:linear-gradient(180deg,var(--gbdb-bg-3),var(--gbdb-bg-2));
  border-top:1px solid var(--gbdb-border);
  display:flex;justify-content:space-around;align-items:center;
  box-shadow:0 -4px 18px rgba(0,0,0,.35);
}
.gbdb-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--gbdb-text-dim);font-size:1.05rem;font-weight:600;gap:2px;
  min-width:60px;min-height:60px;position:relative;transition:color .2s ease, transform .2s ease;
}
.gbdb-bottomnav a i{font-size:2.2rem;transition:transform .2s ease}
.gbdb-bottomnav a.gbdb-active{color:var(--gbdb-primary)}
.gbdb-bottomnav a.gbdb-active i{transform:translateY(-2px) scale(1.1)}
.gbdb-bottomnav a:active i{transform:scale(.92)}
.gbdb-bottomnav a.gbdb-promo{
  color:#fff;
}
.gbdb-bottomnav a.gbdb-promo i{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gbdb-primary),var(--gbdb-primary-2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(255,140,0,.5);
}

/* desktop */
@media (min-width:769px){
  .gbdb-bottomnav{display:none}
  body{max-width:430px}
}

/* utils */
.gbdb-text-center{text-align:center}
.gbdb-mt-12{margin-top:12px}
.gbdb-mt-16{margin-top:16px}
.gbdb-hide-mobile{display:none}
@media (min-width:769px){
  body{padding-bottom:0}
}