/*!
 * JL 77 - design.css
 * Mobile-first (max-width: 430px) casino layout.
 * Palette: #FF9500 / #7CFC00 / #228B22 / #1C2833
 * Every custom class uses the "g4e9-" prefix.
 */
:root{
  --g4e9-primary:#FF9500;
  --g4e9-accent:#7CFC00;
  --g4e9-deep:#228B22;
  --g4e9-bg:#1C2833;
  --g4e9-bg-2:#22303d;
  --g4e9-bg-3:#2c3a48;
  --g4e9-text:#f3f6f4;
  --g4e9-muted:#a7b3bd;
  --g4e9-line:rgba(255,255,255,.08);
  --g4e9-shadow:0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  margin:0;padding:0;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--g4e9-bg);
  color:var(--g4e9-text);
  line-height:1.5rem;
  font-size:1.4rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--g4e9-accent);text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- Layout container (mobile-first cap) ---------- */
.g4e9-wrapper{
  width:100%;
  max-width:430px;
  margin:0 auto;
  position:relative;
  background:var(--g4e9-bg);
  min-height:100vh;
}
.g4e9-container{
  width:100%;
  padding:0 1.2rem;
}

/* ---------- Header / top navigation ---------- */
.g4e9-header{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  background:linear-gradient(180deg,rgba(28,40,51,.98),rgba(28,40,51,.9));
  border-bottom:2px solid var(--g4e9-primary);
  backdrop-filter:blur(8px);
}
.g4e9-header-inner{
  max-width:430px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.8rem 1rem;
  height:5.6rem;
}
.g4e9-brand{display:flex;align-items:center;gap:.6rem;color:var(--g4e9-text);}
.g4e9-brand .g4e9-logo{
  width:3rem;height:3rem;border-radius:.6rem;
  background:linear-gradient(135deg,var(--g4e9-primary),var(--g4e9-deep));
  display:flex;align-items:center;justify-content:center;
  color:#1C2833;font-weight:800;font-size:1.3rem;
}
.g4e9-brand-name{font-size:1.6rem;font-weight:800;letter-spacing:.04em;}
.g4e9-brand-name span{color:var(--g4e9-primary);}

.g4e9-header-actions{display:flex;align-items:center;gap:.6rem;}
.g4e9-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:4rem;min-width:4.4rem;
  padding:.6rem 1.2rem;
  border-radius:2.4rem;
  font-size:1.3rem;font-weight:700;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.g4e9-btn:active{transform:scale(.96);}
.g4e9-btn-register{
  background:linear-gradient(135deg,var(--g4e9-primary),#ff7a00);
  color:#1C2833;
  box-shadow:0 4px 12px rgba(255,149,0,.35);
}
.g4e9-btn-login{
  background:transparent;
  color:var(--g4e9-accent);
  border-color:var(--g4e9-accent);
}
.g4e9-btn-login:hover{background:rgba(124,252,0,.08);}

.g4e9-menu-btn{
  background:transparent;border:none;color:var(--g4e9-text);
  font-size:1.8rem;cursor:pointer;padding:.4rem .6rem;border-radius:.6rem;
}
.g4e9-menu-btn:hover{background:rgba(255,255,255,.06);}

/* Expandable nav menu */
.g4e9-nav-menu{
  position:fixed;top:5.6rem;left:0;right:0;
  max-width:430px;margin:0 auto;
  background:var(--g4e9-bg-2);
  border-bottom:1px solid var(--g4e9-line);
  padding:0 1rem;
  max-height:0;overflow:hidden;
  transition:max-height .28s ease, padding .28s ease;
  z-index:999;
}
.g4e9-nav-menu.g4e9-nav-open{
  max-height:60rem;
  padding:1rem;
}
.g4e9-nav-menu a{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem;border-radius:.8rem;
  color:var(--g4e9-text);font-weight:600;
  border-bottom:1px solid var(--g4e9-line);
}
.g4e9-nav-menu a:last-child{border-bottom:none;}
.g4e9-nav-menu a:hover{background:var(--g4e9-bg-3);color:var(--g4e9-accent);}

/* ---------- Hero / carousel ---------- */
.g4e9-hero{
  margin-top:5.6rem;
  position:relative;
  overflow:hidden;
  border-radius:0 0 1.4rem 1.4rem;
}
.g4e9-hero-track{
  display:flex;flex-direction:row;
  position:relative;
  height:18rem;
}
.g4e9-hero-slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity .6s ease;
  background-size:cover;background-position:center;
  cursor:pointer;
}
.g4e9-hero-slide.g4e9-slide-active{opacity:1;}
.g4e9-hero-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,40,51,.05),rgba(28,40,51,.85));
}
.g4e9-hero-caption{
  position:absolute;left:1.2rem;right:1.2rem;bottom:1rem;z-index:2;
  color:#fff;
}
.g4e9-hero-caption h2{font-size:1.8rem;margin:0 0 .4rem;line-height:2.2rem;}
.g4e9-hero-caption p{margin:0;color:var(--g4e9-accent);font-weight:600;font-size:1.3rem;}
.g4e9-hero-dots{
  position:absolute;left:0;right:0;bottom:.6rem;z-index:3;
  display:flex;justify-content:center;gap:.5rem;
}
.g4e9-hero-dots button{
  width:.8rem;height:.8rem;border-radius:50%;
  border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;
}
.g4e9-hero-dots button.g4e9-dot-active{background:var(--g4e9-primary);}

/* ---------- Sections ---------- */
.g4e9-section{padding:2rem 0;}
.g4e9-section-title{
  display:flex;align-items:center;gap:.6rem;
  font-size:1.7rem;font-weight:800;color:var(--g4e9-text);
  margin:0 0 1.2rem;
}
.g4e9-section-title::before{
  content:"";width:.4rem;height:1.8rem;border-radius:.3rem;
  background:linear-gradient(180deg,var(--g4e9-primary),var(--g4e9-deep));
}
.g4e9-section-title .g4e9-more{margin-left:auto;font-size:1.2rem;font-weight:600;color:var(--g4e9-accent);}

/* ---------- Filter tabs ---------- */
.g4e9-filter-row{
  display:flex;gap:.6rem;overflow-x:auto;
  padding:.4rem 0 1rem;
  -ms-overflow-style:none;scrollbar-width:none;
}
.g4e9-filter-row::-webkit-scrollbar{display:none;}
.g4e9-filter-tab{
  flex:0 0 auto;
  padding:.7rem 1.2rem;border-radius:2rem;
  background:var(--g4e9-bg-2);color:var(--g4e9-muted);
  font-size:1.2rem;font-weight:600;border:1px solid var(--g4e9-line);
  cursor:pointer;
}
.g4e9-filter-tab.g4e9-filter-active{
  background:linear-gradient(135deg,var(--g4e9-primary),var(--g4e9-deep));
  color:#1C2833;border-color:transparent;
}

/* ---------- Game grid ---------- */
.g4e9-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}
.g4e9-card{
  background:var(--g4e9-bg-2);
  border-radius:1rem;overflow:hidden;
  border:1px solid var(--g4e9-line);
  position:relative;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.g4e9-card:active{transform:scale(.97);}
.g4e9-card .g4e9-card-img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  background:linear-gradient(135deg,#22303d,#2c3a48);
}
.g4e9-card .g4e9-card-name{
  padding:.5rem .6rem;font-size:1.1rem;font-weight:600;
  color:var(--g4e9-text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.g4e9-card .g4e9-card-badge{
  position:absolute;top:.4rem;left:.4rem;
  background:var(--g4e9-primary);color:#1C2833;
  font-size:.9rem;font-weight:700;
  padding:.1rem .5rem;border-radius:.4rem;
}

/* ---------- Promo / CTA ---------- */
.g4e9-cta{
  background:linear-gradient(135deg,rgba(255,149,0,.18),rgba(34,139,34,.18));
  border:1px solid rgba(255,149,0,.4);
  border-radius:1.2rem;padding:1.4rem;
  text-align:center;margin:1.4rem 0;
}
.g4e9-cta h3{margin:0 0 .4rem;font-size:1.6rem;color:var(--g4e9-primary);}
.g4e9-cta p{margin:0 0 1rem;color:var(--g4e9-text);}
.g4e9-cta .g4e9-link{
  color:var(--g4e9-primary);font-weight:800;
  text-decoration:underline;
}
.g4e9-link-strong{color:var(--g4e9-primary);font-weight:800;}
.g4e9-link-bold{color:var(--g4e9-accent);font-weight:700;}

/* ---------- Feature / info cards ---------- */
.g4e9-info-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;
}
.g4e9-info-card{
  background:var(--g4e9-bg-2);border-radius:1rem;padding:1rem;
  border:1px solid var(--g4e9-line);
}
.g4e9-info-card .g4e9-ic{font-size:2rem;color:var(--g4e9-primary);margin-bottom:.4rem;}
.g4e9-info-card h4{margin:0 0 .3rem;font-size:1.3rem;color:var(--g4e9-text);}
.g4e9-info-card p{margin:0;font-size:1.1rem;color:var(--g4e9-muted);}

/* ---------- RTP table ---------- */
.g4e9-rpt-table{
  width:100%;border-collapse:collapse;
  background:var(--g4e9-bg-2);border-radius:1rem;overflow:hidden;
}
.g4e9-rpt-table th,.g4e9-rpt-table td{
  padding:.8rem;font-size:1.2rem;text-align:left;border-bottom:1px solid var(--g4e9-line);
}
.g4e9-rpt-table th{color:var(--g4e9-primary);background:var(--g4e9-bg-3);}
.g4e9-rpt-table td:last-child{color:var(--g4e9-accent);font-weight:700;text-align:right;}

/* ---------- Testimonials ---------- */
.g4e9-quote{
  background:var(--g4e9-bg-2);border-left:3px solid var(--g4e9-primary);
  border-radius:.6rem;padding:1rem;margin-bottom:.8rem;
}
.g4e9-quote p{margin:0 0 .4rem;color:var(--g4e9-text);}
.g4e9-quote span{color:var(--g4e9-accent);font-weight:700;font-size:1.1rem;}

/* ---------- Payment ---------- */
.g4e9-pay-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.g4e9-pay-chip{
  background:var(--g4e9-bg-2);border:1px solid var(--g4e9-line);
  border-radius:.8rem;padding:.7rem 1rem;
  font-size:1.1rem;font-weight:600;color:var(--g4e9-text);
  display:flex;align-items:center;gap:.5rem;
}

/* ---------- FAQ ---------- */
.g4e9-faq-item{
  background:var(--g4e9-bg-2);border-radius:.8rem;margin-bottom:.6rem;
  border:1px solid var(--g4e9-line);
}
.g4e9-faq-item summary{
  padding:.9rem 1rem;cursor:pointer;font-weight:700;color:var(--g4e9-text);
  list-style:none;
}
.g4e9-faq-item summary::-webkit-details-marker{display:none;}
.g4e9-faq-item p{padding:0 1rem .9rem;margin:0;color:var(--g4e9-muted);}

/* ---------- Footer ---------- */
.g4e9-footer{
  background:var(--g4e9-bg-2);
  border-top:2px solid var(--g4e9-primary);
  padding:2rem 0 6rem;
  margin-top:1rem;
}
.g4e9-footer-brand{font-size:1.3rem;color:var(--g4e9-text);margin-bottom:1rem;}
.g4e9-footer-promos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.2rem;
}
.g4e9-footer-promos button,
.g4e9-footer-promos a{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.9rem;border-radius:.8rem;font-size:1.2rem;font-weight:700;
  background:linear-gradient(135deg,var(--g4e9-primary),var(--g4e9-deep));
  color:#1C2833;border:none;cursor:pointer;text-align:center;
}
.g4e9-footer-promos a.g4e9-footer-ghost{
  background:var(--g4e9-bg-3);color:var(--g4e9-accent);border:1px solid var(--g4e9-line);
}
.g4e9-footer-links{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem .8rem;margin-bottom:1rem;
}
.g4e9-footer-links a{font-size:1.2rem;color:var(--g4e9-muted);}
.g4e9-footer-links a:hover{color:var(--g4e9-accent);}
.g4e9-copy{font-size:1.1rem;color:var(--g4e9-muted);text-align:center;border-top:1px solid var(--g4e9-line);padding-top:1rem;}

/* ---------- Bottom navigation (mobile fixed) ---------- */
.g4e9-bottomnav{
  position:fixed;left:0;right:0;bottom:0;
  z-index:1000;
  max-width:430px;margin:0 auto;
  background:rgba(28,40,51,.98);
  border-top:1px solid var(--g4e9-line);
  display:flex;justify-content:space-around;align-items:stretch;
  height:6rem;
  backdrop-filter:blur(8px);
}
.g4e9-bottomnav-btn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;background:transparent;border:none;color:var(--g4e9-muted);
  font-size:1rem;font-weight:600;cursor:pointer;padding:.4rem;min-height:6rem;
  transition:color .15s ease, transform .15s ease;
}
.g4e9-bottomnav-btn:active{transform:scale(.92);}
.g4e9-bottomnav-btn .g4e9-ic-wrap{font-size:2.2rem;line-height:1;}
.g4e9-bottomnav-btn.g4e9-bottomnav-current,
.g4e9-bottomnav-btn:hover{color:var(--g4e9-primary);}
.g4e9-bottomnav-btn.g4e9-bottomnav-current .g4e9-ic-wrap{color:var(--g4e9-primary);}
.g4e9-bottomnav-btn.g4e9-bottomnav-promo{color:var(--g4e9-accent);}
.g4e9-bottomnav-btn.g4e9-bottomnav-promo .g4e9-ic-wrap{color:var(--g4e9-accent);}

/* Mobile bottom padding so content is never hidden by bottom nav */
main{padding-bottom:8rem;}

/* ---------- Winners showcase ---------- */
.g4e9-winner{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--g4e9-bg-2);border-radius:.8rem;padding:.7rem 1rem;
  margin-bottom:.5rem;border:1px solid var(--g4e9-line);
}
.g4e9-winner .g4e9-who{font-size:1.2rem;color:var(--g4e9-text);font-weight:700;}
.g4e9-winner .g4e9-amt{color:var(--g4e9-primary);font-weight:800;}

/* ---------- Desktop / large screens ---------- */
@media (min-width: 769px){
  .g4e9-bottomnav{display:none;}
  main{padding-bottom:2rem;}
  .g4e9-wrapper{
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
}

/* ---------- Small screen tweaks ---------- */
@media (max-width: 360px){
  .g4e9-grid{grid-template-columns:repeat(2,1fr);}
  .g4e9-footer-promos{grid-template-columns:1fr;}
}