/* =========================================================
   binggo.click — core stylesheet (layout.css)
   Prefix  : v97b-
   Palette : #ADFF2F | #1E1E1E | #F4A460 | #6F4E37 | #2E8B57
   Mobile-first, max 430px design width.
   All comments in English.
   ========================================================= */

:root{
  --v97b-bg:        #1E1E1E;
  --v97b-bg-soft:   #262421;
  --v97b-bg-card:   #2f2a25;
  --v97b-text:      #F4F1EA;
  --v97b-text-dim:  #B9B0A2;
  --v97b-accent:    #ADFF2F;   /* primary brand green-yellow */
  --v97b-sand:      #F4A460;   /* warm sandy brown */
  --v97b-coffee:    #6F4E37;
  --v97b-sea:       #2E8B57;   /* sea green */
  --v97b-danger:    #e25551;
  --v97b-shadow:    0 .4rem 1.2rem rgba(0,0,0,.45);
  --v97b-radius:    .9rem;
  --v97b-header-h:  4rem;
  --v97b-nav-h:     4rem;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html{ font-size:62.5%; scroll-behavior:smooth; }

body{
  font-family:"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--v97b-bg);
  color:var(--v97b-text);
  line-height:1.6;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--v97b-accent); text-decoration:none; }
a:hover{ color:var(--v97b-sand); }

.v97b-container{
  width:100%;
  max-width:430px;
  margin:0 auto;
  padding:0 1.2rem;
}

/* ---------- Header ---------- */
.v97b-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--v97b-header-h);
  background:rgba(30,30,30,.96);
  backdrop-filter:blur(10px);
  border-bottom:.1rem solid rgba(173,255,47,.18);
  z-index:1000;
}
.v97b-header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.v97b-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--v97b-text);
  font-weight:800;
  font-size:1.8rem;
  letter-spacing:.04em;
}
.v97b-brand .v97b-brand-mark{
  width:3.2rem; height:3.2rem;
  display:grid; place-items:center;
  border-radius:.8rem;
  background:linear-gradient(135deg,var(--v97b-accent),var(--v97b-sea));
  color:#0d1f0a;
  font-weight:900;
}
.v97b-brand small{
  display:block;
  font-size:1rem;
  font-weight:600;
  color:var(--v97b-text-dim);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.v97b-header-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.v97b-btn{
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:1.3rem;
  padding:.7rem 1.1rem;
  border-radius:.7rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:inherit;
}
.v97b-btn:active{ transform:scale(.96); }
.v97b-btn-login{
  background:transparent;
  color:var(--v97b-text);
  border:.12rem solid rgba(173,255,47,.45);
}
.v97b-btn-register{
  background:linear-gradient(135deg,var(--v97b-accent),var(--v97b-sea));
  color:#0d1f0a;
  box-shadow:0 .3rem .8rem rgba(173,255,47,.25);
}
.v97b-menu-toggle{
  background:transparent;
  border:0;
  color:var(--v97b-accent);
  font-size:2rem;
  cursor:pointer;
  padding:.3rem;
  display:inline-flex;
}

/* ---------- Mobile slide menu ---------- */
.v97b-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s;
  z-index:9998;
}
.v97b-menu-backdrop.v97b-open{ opacity:1; visibility:visible; }
.v97b-mobile-menu{
  position:fixed;
  top:0; right:-80%;
  width:80%;
  max-width:320px;
  height:100%;
  background:var(--v97b-bg-soft);
  padding:2rem 1.5rem;
  z-index:9999;
  transition:right .28s ease;
  overflow-y:auto;
}
.v97b-mobile-menu.v97b-open{ right:0; }
.v97b-menu-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.6rem;
}
.v97b-menu-head h3{
  color:var(--v97b-accent);
  font-size:1.8rem;
  letter-spacing:.05em;
}
.v97b-menu-close{
  background:transparent;
  border:0;
  color:var(--v97b-text);
  font-size:2rem;
  cursor:pointer;
}
.v97b-menu-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.v97b-menu-list a{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:1rem .8rem;
  color:var(--v97b-text);
  border-radius:.7rem;
  font-weight:600;
  border:.05rem solid transparent;
}
.v97b-menu-list a:hover,
.v97b-menu-list a.v97b-active{
  background:var(--v97b-bg-card);
  border-color:rgba(173,255,47,.25);
  color:var(--v97b-accent);
}
.v97b-menu-list .material-icons,
.v97b-menu-list i{ font-size:2rem; color:var(--v97b-sand); }
.v97b-menu-cta{
  margin-top:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

/* ---------- Main shell ---------- */
main{
  padding-top:calc(var(--v97b-header-h) + .8rem);
  padding-bottom:1rem;
}
@media (max-width:768px){
  main{ padding-bottom:calc(var(--v97b-nav-h) + 1.4rem); }
}

.v97b-section{
  margin-top:2.2rem;
}
.v97b-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.v97b-section-title{
  font-size:1.8rem;
  font-weight:800;
  color:var(--v97b-text);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.v97b-section-title::before{
  content:"";
  width:.4rem;
  height:1.8rem;
  border-radius:.3rem;
  background:linear-gradient(var(--v97b-accent),var(--v97b-sea));
}
.v97b-section-more{
  font-size:1.2rem;
  color:var(--v97b-accent);
  font-weight:600;
}

/* ---------- Hero / Carousel ---------- */
.v97b-hero{
  position:relative;
  border-radius:var(--v97b-radius);
  overflow:hidden;
  box-shadow:var(--v97b-shadow);
  background:linear-gradient(135deg,#243018,#10140c);
}
.v97b-carousel{ position:relative; }
.v97b-slides{ display:flex; transition:transform .45s ease; }
.v97b-slide{
  min-width:100%;
  padding:2rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  position:relative;
}
.v97b-slide-tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(173,255,47,.15);
  color:var(--v97b-accent);
  border:.1rem solid rgba(173,255,47,.4);
  padding:.35rem .8rem;
  border-radius:99px;
  font-size:1.1rem;
  font-weight:700;
  width:max-content;
}
.v97b-slide h1, .v97b-slide h2{
  font-size:2.3rem;
  line-height:1.25;
  color:#fff;
}
.v97b-slide h1 span, .v97b-slide h2 span{ color:var(--v97b-accent); }
.v97b-slide p{
  color:var(--v97b-text-dim);
  font-size:1.35rem;
}
.v97b-slide .v97b-slide-cta{
  margin-top:.6rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}
.v97b-hero-cta{
  background:linear-gradient(135deg,var(--v97b-accent),var(--v97b-sea));
  color:#0d1f0a;
  font-weight:800;
  padding:.9rem 1.6rem;
  border-radius:.7rem;
  border:0;
  cursor:pointer;
  font-size:1.35rem;
}
.v97b-hero-ghost{
  background:transparent;
  color:#fff;
  border:.12rem solid rgba(255,255,255,.4);
  padding:.9rem 1.4rem;
  border-radius:.7rem;
  cursor:pointer;
  font-size:1.3rem;
  font-weight:700;
}
.v97b-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 0;
}
.v97b-dots button{
  width:.8rem; height:.8rem;
  border-radius:50%;
  border:.1rem solid var(--v97b-accent);
  background:transparent;
  cursor:pointer;
}
.v97b-dots button.v97b-active{ background:var(--v97b-accent); }

/* ---------- Marquee strip ---------- */
.v97b-strip{
  margin-top:1.4rem;
  background:var(--v97b-bg-soft);
  border:.1rem solid rgba(244,164,96,.25);
  border-radius:.7rem;
  padding:.7rem 1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  overflow:hidden;
}
.v97b-strip .material-icons{ color:var(--v97b-sand); }
.v97b-strip p{
  font-size:1.2rem;
  color:var(--v97b-text-dim);
  white-space:nowrap;
}

/* ---------- Stats row ---------- */
.v97b-stats{
  margin-top:1.4rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7rem;
}
.v97b-stat{
  background:var(--v97b-bg-card);
  border-radius:.7rem;
  padding:1rem .6rem;
  text-align:center;
  border:.1rem solid rgba(173,255,47,.12);
}
.v97b-stat strong{
  display:block;
  color:var(--v97b-accent);
  font-size:1.8rem;
  font-weight:800;
}
.v97b-stat span{
  font-size:1.05rem;
  color:var(--v97b-text-dim);
}

/* ---------- Category chips ---------- */
.v97b-chips{
  display:flex;
  gap:.6rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  margin-bottom:1rem;
  scrollbar-width:none;
}
.v97b-chips::-webkit-scrollbar{ display:none; }
.v97b-chip{
  flex:0 0 auto;
  padding:.6rem 1.2rem;
  border-radius:99px;
  background:var(--v97b-bg-card);
  color:var(--v97b-text-dim);
  font-size:1.25rem;
  font-weight:600;
  border:.1rem solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.v97b-chip.v97b-active,
.v97b-chip:hover{
  background:rgba(173,255,47,.12);
  color:var(--v97b-accent);
  border-color:rgba(173,255,47,.4);
}

/* ---------- Game grid ---------- */
.v97b-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}
.v97b-card{
  background:var(--v97b-bg-card);
  border-radius:.8rem;
  overflow:hidden;
  position:relative;
  border:.1rem solid rgba(255,255,255,.05);
  transition:transform .15s ease;
}
.v97b-card:active{ transform:scale(.97); }
.v97b-card-media{
  position:relative;
  aspect-ratio:1/1;
  background:#000;
}
.v97b-card-media img{
  width:100%; height:100%;
  object-fit:cover;
}
.v97b-card-badge{
  position:absolute;
  top:.4rem; left:.4rem;
  background:var(--v97b-sand);
  color:#1E1E1E;
  font-size:1rem;
  font-weight:800;
  padding:.15rem .5rem;
  border-radius:.4rem;
  text-transform:uppercase;
}
.v97b-card-badge.v97b-hot{ background:var(--v97b-danger); color:#fff; }
.v97b-card-badge.v97b-new{ background:var(--v97b-accent); color:#0d1f0a; }
.v97b-card-play{
  position:absolute;
  inset:0;
  background:rgba(13,20,8,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s ease;
}
.v97b-card:hover .v97b-card-play{ opacity:1; }
.v97b-card-play button{
  background:var(--v97b-accent);
  color:#0d1f0a;
  border:0;
  border-radius:99px;
  padding:.5rem 1rem;
  font-weight:800;
  font-size:1.2rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.v97b-card-body{
  padding:.5rem .6rem .7rem;
}
.v97b-card-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--v97b-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v97b-card-type{
  font-size:1rem;
  color:var(--v97b-text-dim);
  text-transform:capitalize;
}

/* ---------- Featured (2-col) ---------- */
.v97b-featured{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.8rem;
}
.v97b-feature{
  position:relative;
  border-radius:var(--v97b-radius);
  overflow:hidden;
  background:linear-gradient(135deg,#2a3a1a,#0e130a);
  padding:1.2rem;
  min-height:11rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.v97b-feature h4{ color:#fff; font-size:1.5rem; }
.v97b-feature span{ color:var(--v97b-accent); font-size:1.1rem; font-weight:700; }
.v97b-feature .v97b-feature-icon{
  position:absolute;
  top:.8rem; right:.8rem;
  font-size:2.4rem;
  color:var(--v97b-sand);
}

/* ---------- Promo banner ---------- */
.v97b-promo{
  margin-top:1.4rem;
  background:linear-gradient(135deg,var(--v97b-coffee),#3a2a1d);
  border-radius:var(--v97b-radius);
  padding:1.4rem;
  display:flex;
  gap:1rem;
  align-items:center;
  border:.1rem solid rgba(244,164,96,.35);
}
.v97b-promo .v97b-promo-ico{
  font-size:3.2rem;
  color:var(--v97b-sand);
}
.v97b-promo h3{ color:#fff; font-size:1.5rem; }
.v97b-promo p{ color:var(--v97b-text-dim); font-size:1.15rem; }

/* ---------- Article / SEO content ---------- */
.v97b-article{
  background:var(--v97b-bg-soft);
  border-radius:var(--v97b-radius);
  padding:1.6rem 1.4rem;
  border:.1rem solid rgba(173,255,47,.1);
}
.v97b-article h2{
  font-size:2rem;
  color:var(--v97b-accent);
  margin-bottom:.7rem;
  line-height:1.3;
}
.v97b-article h3{
  font-size:1.55rem;
  color:var(--v97b-sand);
  margin:1.2rem 0 .5rem;
}
.v97b-article p{
  color:var(--v97b-text);
  margin-bottom:.8rem;
  font-size:1.35rem;
}
.v97b-article ul, .v97b-article ol{
  margin:.5rem 0 1rem 1.6rem;
  color:var(--v97b-text);
}
.v97b-article li{ margin-bottom:.4rem; font-size:1.3rem; }
.v97b-article a{ color:var(--v97b-accent); text-decoration:underline; }
.v97b-pill-tbl{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
  margin:.8rem 0;
}
.v97b-pill{
  background:var(--v97b-bg-card);
  border-radius:.7rem;
  padding:.8rem;
  border:.1rem solid rgba(173,255,47,.12);
}
.v97b-pill strong{ color:var(--v97b-accent); display:block; font-size:1.2rem; }
.v97b-pill span{ color:var(--v97b-text-dim); font-size:1.1rem; }

/* ---------- FAQ ---------- */
.v97b-faq-item{
  background:var(--v97b-bg-card);
  border:.1rem solid rgba(255,255,255,.06);
  border-radius:.7rem;
  margin-bottom:.7rem;
  overflow:hidden;
}
.v97b-faq-q{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--v97b-text);
  font-weight:700;
  font-size:1.3rem;
  padding:1rem 1.1rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  font-family:inherit;
}
.v97b-faq-q .v97b-faq-ico{ color:var(--v97b-accent); transition:transform .2s ease; }
.v97b-faq-item.v97b-open .v97b-faq-ico{ transform:rotate(45deg); }
.v97b-faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  color:var(--v97b-text-dim);
  font-size:1.25rem;
}
.v97b-faq-a p{ padding:0 1.1rem 1rem; }

/* ---------- Footer ---------- */
.v97b-footer{
  margin-top:2.5rem;
  background:var(--v97b-bg-soft);
  border-top:.1rem solid rgba(173,255,47,.18);
  padding:2rem 0 1rem;
}
.v97b-footer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem;
}
.v97b-footer-col h4{
  color:var(--v97b-sand);
  font-size:1.35rem;
  margin-bottom:.7rem;
}
.v97b-footer-col ul{ list-style:none; }
.v97b-footer-col li{ margin-bottom:.4rem; }
.v97b-footer-col a{
  color:var(--v97b-text-dim);
  font-size:1.2rem;
}
.v97b-footer-col a:hover{ color:var(--v97b-accent); }
.v97b-footer-bottom{
  text-align:center;
  margin-top:1.6rem;
  padding-top:1rem;
  border-top:.1rem solid rgba(255,255,255,.06);
  color:var(--v97b-text-dim);
  font-size:1.1rem;
}
.v97b-18{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .7rem;
  border-radius:99px;
  border:.1rem solid var(--v97b-sand);
  color:var(--v97b-sand);
  font-weight:700;
  font-size:1rem;
  margin-top:.8rem;
}

/* ---------- Bottom nav ---------- */
.v97b-bottomnav{
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--v97b-nav-h);
  background:rgba(30,30,30,.98);
  border-top:.1rem solid rgba(173,255,47,.22);
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  z-index:1000;
  padding-bottom:env(safe-area-inset-bottom);
}
.v97b-bottomnav button,
.v97b-bottomnav a{
  flex:1;
  background:transparent;
  border:0;
  color:var(--v97b-text-dim);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  padding:.3rem;
  cursor:pointer;
  font-family:inherit;
  position:relative;
}
.v97b-bottomnav .v97b-nav-ico{ font-size:2rem; }
.v97b-bottomnav button.v97b-nav-coupon{
  color:#0d1f0a;
}
.v97b-bottomnav button.v97b-nav-coupon .v97b-nav-pill{
  background:linear-gradient(135deg,var(--v97b-accent),var(--v97b-sea));
  width:3.6rem; height:3.6rem;
  border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 .3rem .8rem rgba(173,255,47,.35);
  margin-top:-1.4rem;
}
.v97b-bottomnav button.v97b-nav-coupon .v97b-nav-pill .v97b-nav-ico{ font-size:2rem; color:#0d1f0a; }
.v97b-bottomnav .v97b-active{ color:var(--v97b-accent); }
.v97b-bottomnav .v97b-active::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:1.8rem; height:.18rem;
  background:var(--v97b-accent);
  border-radius:99px;
}

/* ---------- Desktop helpers ---------- */
@media (min-width:769px){
  body{ background:#161616; }
  .v97b-bottomnav{ display:none; }
  .v97b-container{ max-width:960px; }
  .v97b-grid{ grid-template-columns:repeat(6,1fr); }
  .v97b-featured{ grid-template-columns:repeat(4,1fr); }
  .v97b-footer-grid{ grid-template-columns:repeat(4,1fr); }
  .v97b-menu-toggle{ display:none; }
}