/* OKBet basefiles stylesheet - prefix ge88- */
/* Color palette: #F5DEB3 | #8B7355 | #D4AF37 | #1A1A1A | #FFCC33 */

:root{
  --ge88-bg:#1A1A1A;
  --ge88-bg2:#23201a;
  --ge88-card:#241f17;
  --ge88-wheat:#F5DEB3;
  --ge88-brown:#8B7355;
  --ge88-gold:#D4AF37;
  --ge88-gold2:#FFCC33;
  --ge88-text:#F5DEB3;
  --ge88-muted:#c9b896;
  --ge88-border:rgba(212,175,55,.25);
  --ge88-radius:14px;
  --ge88-header-h:60px;
  --ge88-nav-h:62px;
}

*{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",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#2a2418 0%,var(--ge88-bg) 60%);
  color:var(--ge88-text);
  line-height:1.5;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--ge88-gold2);text-decoration:none;}
img{max-width:100%;display:block;}

/* ===== Header ===== */
.ge88-header{
  position:fixed;top:0;left:0;right:0;height:var(--ge88-header-h);
  z-index:1000;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  background:linear-gradient(180deg,rgba(26,26,26,.96),rgba(26,26,26,.82));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ge88-border);
}
.ge88-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:2rem;color:var(--ge88-gold2);letter-spacing:.5px;}
.ge88-logo .ge88-badge{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--ge88-gold),var(--ge88-brown));
  display:flex;align-items:center;justify-content:center;color:#1A1A1A;font-weight:900;font-size:1.5rem;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.ge88-header-actions{display:flex;align-items:center;gap:8px;}
.ge88-btn{
  border:0;cursor:pointer;font-weight:700;border-radius:30px;padding:9px 16px;font-size:1.3rem;
  display:inline-flex;align-items:center;gap:6px;transition:transform .15s,filter .15s;
}
.ge88-btn:active{transform:scale(.95);}
.ge88-btn-ghost{background:transparent;color:var(--ge88-wheat);border:1px solid var(--ge88-border);}
.ge88-btn-gold{background:linear-gradient(135deg,var(--ge88-gold2),var(--ge88-gold));color:#1A1A1A;box-shadow:0 3px 12px rgba(212,175,55,.35);}
.ge88-menu-btn{background:transparent;border:0;color:var(--ge88-wheat);font-size:2rem;cursor:pointer;padding:6px;display:none;}

/* ===== Mobile menu ===== */
.ge88-mobile-menu{
  position:fixed;top:0;right:0;height:100vh;width:82%;max-width:340px;z-index:9999;
  background:linear-gradient(180deg,#211c14,#1A1A1A);
  border-left:1px solid var(--ge88-border);
  padding:20px 18px;transform:translateX(110%);transition:transform .3s ease;
  overflow-y:auto;
}
.ge88-mobile-menu.ge88-open{transform:translateX(0);}
.ge88-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--ge88-border);}
.ge88-menu-close{background:transparent;border:0;color:var(--ge88-wheat);font-size:2.4rem;cursor:pointer;line-height:1;}
.ge88-menu-link{
  display:flex;align-items:center;gap:12px;padding:12px 8px;border-radius:10px;color:var(--ge88-text);
  font-size:1.5rem;font-weight:600;border-bottom:1px solid rgba(212,175,55,.08);
}
.ge88-menu-link i{color:var(--ge88-gold2);width:22px;text-align:center;}
.ge88-menu-link:active{background:rgba(212,175,55,.08);}
.ge88-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:.3s;}
.ge88-overlay.ge88-open{opacity:1;visibility:visible;}

/* ===== Layout ===== */
.ge88-main{padding-top:calc(var(--ge88-header-h) + 8px);padding-bottom:20px;max-width:430px;margin:0 auto;}
@media (max-width:768px){
  .ge88-main{padding-bottom:calc(var(--ge88-nav-h) + 18px);}
}

/* ===== Hero ===== */
.ge88-hero{
  margin:14px;padding:22px 18px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2c2415 0%,#3a2f18 60%,#1A1A1A 100%);
  border:1px solid var(--ge88-border);
}
.ge88-hero::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,204,51,.35),transparent 70%);}
.ge88-hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(212,175,55,.15);color:var(--ge88-gold2);padding:5px 12px;border-radius:20px;font-size:1.2rem;font-weight:700;margin-bottom:10px;}
.ge88-hero h1{font-size:2.6rem;line-height:1.15;color:#fff;margin-bottom:10px;font-weight:900;}
.ge88-hero h1 span{color:var(--ge88-gold2);}
.ge88-hero p{color:var(--ge88-muted);font-size:1.4rem;margin-bottom:16px;}
.ge88-hero-cta{display:flex;gap:10px;flex-wrap:wrap;}
.ge88-hero-cta .ge88-btn{padding:11px 18px;font-size:1.4rem;}

/* ===== Marquee ===== */
.ge88-marquee{
  margin:0 14px 14px;background:rgba(212,175,55,.08);border:1px solid var(--ge88-border);
  border-radius:30px;padding:8px 14px;display:flex;align-items:center;gap:10px;overflow:hidden;
}
.ge88-marquee i{color:var(--ge88-gold2);}
.ge88-marquee span{font-size:1.25rem;color:var(--ge88-wheat);white-space:nowrap;}

/* ===== Section ===== */
.ge88-section{margin:18px 14px;}
.ge88-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ge88-section-title{font-size:1.9rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px;}
.ge88-section-title i{color:var(--ge88-gold2);}
.ge88-section-more{font-size:1.25rem;color:var(--ge88-gold2);font-weight:600;}

/* ===== Category chips ===== */
.ge88-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 12px;scrollbar-width:none;}
.ge88-chips::-webkit-scrollbar{display:none;}
.ge88-chip{
  flex:0 0 auto;padding:8px 14px;border-radius:20px;background:var(--ge88-card);color:var(--ge88-wheat);
  font-size:1.25rem;font-weight:600;border:1px solid var(--ge88-border);cursor:pointer;white-space:nowrap;
}
.ge88-chip.ge88-active{background:linear-gradient(135deg,var(--ge88-gold2),var(--ge88-gold));color:#1A1A1A;border-color:transparent;}

/* ===== Game grid ===== */
.ge88-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ge88-card{
  background:var(--ge88-card);border:1px solid var(--ge88-border);border-radius:var(--ge88-radius);overflow:hidden;
  transition:transform .15s,box-shadow .15s;cursor:pointer;position:relative;
}
.ge88-card:active{transform:scale(.97);}
.ge88-card-img{aspect-ratio:1/1;background:#000;}
.ge88-card-img img{width:100%;height:100%;object-fit:cover;}
.ge88-card-body{padding:6px 8px 8px;}
.ge88-card-name{font-size:1.15rem;color:var(--ge88-wheat);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ge88-card-tag{position:absolute;top:6px;left:6px;background:linear-gradient(135deg,#e23b3b,#a30d0d);color:#fff;font-size:1rem;font-weight:700;padding:2px 7px;border-radius:6px;}
.ge88-card-play{
  position:absolute;bottom:34px;right:6px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--ge88-gold2),var(--ge88-gold));color:#1A1A1A;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;opacity:.95;
}

/* ===== Promo banner ===== */
.ge88-promo{
  margin:18px 14px;padding:18px;border-radius:18px;display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#3a2f18,#8B7355);border:1px solid var(--ge88-border);position:relative;overflow:hidden;
}
.ge88-promo-icon{font-size:3.2rem;color:var(--ge88-gold2);}
.ge88-promo-text h3{font-size:1.7rem;color:#fff;margin-bottom:4px;}
.ge88-promo-text p{font-size:1.25rem;color:var(--ge88-wheat);}

/* ===== VIP / Features ===== */
.ge88-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 14px;}
.ge88-feature{
  background:var(--ge88-card);border:1px solid var(--ge88-border);border-radius:14px;padding:14px;text-align:center;
}
.ge88-feature i{font-size:2.6rem;color:var(--ge88-gold2);margin-bottom:6px;}
.ge88-feature h4{font-size:1.35rem;color:#fff;margin-bottom:3px;}
.ge88-feature p{font-size:1.15rem;color:var(--ge88-muted);line-height:1.35;}

/* ===== FAQ ===== */
.ge88-faq{margin:18px 14px;}
.ge88-faq-item{background:var(--ge88-card);border:1px solid var(--ge88-border);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.ge88-faq-q{padding:13px 14px;font-size:1.4rem;font-weight:700;color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ge88-faq-q .ge88-ico{color:var(--ge88-gold2);transition:transform .2s;}
.ge88-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 14px;color:var(--ge88-muted);font-size:1.3rem;}
.ge88-faq-item.ge88-open .ge88-faq-a{max-height:240px;padding:0 14px 14px;}
.ge88-faq-item.ge88-open .ge88-ico{transform:rotate(45deg);}

/* ===== About / SEO text ===== */
.ge88-seo{margin:18px 14px;padding:16px;background:var(--ge88-card);border:1px solid var(--ge88-border);border-radius:14px;}
.ge88-seo h2{font-size:1.8rem;color:#fff;margin-bottom:8px;}
.ge88-seo h3{font-size:1.5rem;color:var(--ge88-gold2);margin:12px 0 6px;}
.ge88-seo p{font-size:1.3rem;color:var(--ge88-muted);margin-bottom:8px;line-height:1.6;}
.ge88-seo ul{margin-left:18px;color:var(--ge88-muted);font-size:1.3rem;}
.ge88-seo li{margin-bottom:5px;}

/* ===== Footer ===== */
.ge88-footer{background:#15120c;border-top:1px solid var(--ge88-border);padding:24px 14px 20px;margin-top:10px;}
.ge88-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:430px;margin:0 auto;}
.ge88-footer h4{font-size:1.4rem;color:var(--ge88-gold2);margin-bottom:8px;}
.ge88-footer ul{list-style:none;}
.ge88-footer li{margin-bottom:5px;}
.ge88-footer a{color:var(--ge88-muted);font-size:1.25rem;}
.ge88-footer a:hover{color:var(--ge88-gold2);}
.ge88-footer-bottom{max-width:430px;margin:18px auto 0;padding-top:14px;border-top:1px solid var(--ge88-border);text-align:center;color:var(--ge88-muted);font-size:1.15rem;line-height:1.5;}

/* ===== Mobile bottom nav ===== */
.ge88-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:var(--ge88-nav-h);z-index:1000;
  background:linear-gradient(180deg,rgba(26,26,26,.95),#0f0d08);
  border-top:1px solid var(--ge88-border);
  display:flex;justify-content:space-around;align-items:stretch;padding:4px 2px;
}
.ge88-nav-btn{
  flex:1;min-width:60px;min-height:54px;background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ge88-muted);
  font-size:1.05rem;font-weight:600;position:relative;transition:color .15s;
}
.ge88-nav-btn i{font-size:2.2rem;}
.ge88-nav-btn.ge88-active{color:var(--ge88-gold2);}
.ge88-nav-btn.ge88-active::before{content:"";position:absolute;top:0;width:32px;height:3px;border-radius:0 0 4px 4px;background:var(--ge88-gold2);}
.ge88-nav-btn:active{color:var(--ge88-gold);}
.ge88-nav-center{
  flex:0 0 auto;min-width:64px;
}
.ge88-nav-center .ge88-nav-play{
  width:48px;height:48px;border-radius:50%;margin-top:-18px;
  background:linear-gradient(135deg,var(--ge88-gold2),var(--ge88-gold));color:#1A1A1A;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;
  box-shadow:0 4px 14px rgba(212,175,55,.5);border:3px solid #1A1A1A;
}

@media (min-width:769px){
  .ge88-bottom-nav{display:none;}
  .ge88-menu-btn{display:none;}
  .ge88-main{max-width:760px;}
}
@media (max-width:430px){
  .ge88-hero h1{font-size:2.2rem;}
  .ge88-grid{gap:8px;}
}