/* ===========================================================
   Lucky Bingo - theme.css
   Mobile-first HTML5 casino homepage stylesheet.
   Color base: #3A3A3A (dark surface) + #FFB74D (amber accent)
   All custom classes use the `wd023-` prefix.
   =========================================================== */

/* ---------- Design tokens ---------- */
:root{
  --wd023-bg:        #3A3A3A;
  --wd023-bg-2:      #2A2A2A;
  --wd023-bg-3:      #1E1E1E;
  --wd023-surface:   #4A4A4A;
  --wd023-surface-2: #525252;
  --wd023-line:      rgba(255,255,255,0.08);
  --wd023-accent:    #FFB74D;
  --wd023-accent-2:  #FFCF7A;
  --wd023-accent-3:  #FF9A1F;
  --wd023-text:      #FFFFFF;
  --wd023-text-soft: #E6E6E6;
  --wd023-text-mute: #A8A8A8;
  --wd023-success:   #46C28E;
  --wd023-danger:    #F26B6B;
  --wd023-radius:    16px;
  --wd023-radius-sm: 10px;
  --wd023-shadow:    0 6px 24px rgba(0,0,0,0.35);
  --wd023-shadow-amber: 0 8px 24px rgba(255,183,77,0.25);
  --wd023-header-h:  60px;
  --wd023-bottom-h:  64px;
  --wd023-max:       430px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:62.5%; -webkit-text-size-adjust:100%; }
body{
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #4A4A4A 0%, var(--wd023-bg) 55%, var(--wd023-bg-3) 100%);
  color: var(--wd023-text);
  line-height: 1.55;
  font-size: 1.5rem;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--wd023-accent); text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--wd023-accent-2); }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Layout helpers ---------- */
.wd023-wrap{
  width:100%;
  max-width: var(--wd023-max);
  margin:0 auto;
  padding:0 14px;
}
.wd023-section{ padding:28px 0; }
.wd023-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; gap:10px;
}
.wd023-section-title{
  font-size:2rem; font-weight:800; color:var(--wd023-text);
  display:flex; align-items:center; gap:8px; letter-spacing:.2px;
}
.wd023-section-title::before{
  content:""; width:5px; height:20px; border-radius:3px;
  background: linear-gradient(180deg,var(--wd023-accent),var(--wd023-accent-3));
  display:inline-block;
}
.wd023-section-link{
  font-size:1.25rem; color:var(--wd023-accent); font-weight:600;
  white-space:nowrap;
}
.wd023-eyebrow{
  font-size:1.15rem; letter-spacing:2px; text-transform:uppercase;
  color: var(--wd023-accent); font-weight:700; margin-bottom:6px;
}

/* ---------- Header ---------- */
.wd023-header{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, rgba(30,30,30,.96), rgba(58,58,58,.92));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--wd023-line);
}
.wd023-header-inner{
  height: var(--wd023-header-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.wd023-logo{ display:flex; align-items:center; gap:8px; min-width:0; }
.wd023-logo-mark{
  width:34px; height:34px; border-radius:10px; flex:0 0 34px;
  background: linear-gradient(135deg,var(--wd023-accent),var(--wd023-accent-3));
  display:grid; place-items:center; color:#2a2a2a; font-weight:900; font-size:1.6rem;
  box-shadow: var(--wd023-shadow-amber);
}
.wd023-logo-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.wd023-logo-text b{ font-size:1.55rem; font-weight:800; letter-spacing:.3px; }
.wd023-logo-text span{ font-size:1rem; color:var(--wd023-text-mute); }
.wd023-header-actions{ display:flex; align-items:center; gap:8px; }
.wd023-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 14px; border-radius:999px;
  font-size:1.35rem; font-weight:700; min-height:38px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.wd023-btn:active{ transform: translateY(1px) scale(.98); }
.wd023-btn-login{
  background: rgba(255,255,255,0.08);
  color: var(--wd023-text);
  border:1px solid rgba(255,255,255,0.18);
}
.wd023-btn-login:hover{ background: rgba(255,255,255,0.14); }
.wd023-btn-register{
  background: linear-gradient(135deg,var(--wd023-accent),var(--wd023-accent-3));
  color:#2A1A04; box-shadow: var(--wd023-shadow-amber);
}
.wd023-btn-register:hover{ filter:brightness(1.06); color:#2A1A04; }
.wd023-hamburger{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--wd023-line);
}
.wd023-hamburger i{ font-size:1.9rem; color:var(--wd023-text); }

/* ---------- Desktop nav (hidden on mobile) ---------- */
.wd023-desktop-nav{ display:none; }

/* ---------- Mobile slide menu ---------- */
.wd023-menu-overlay{
  position:fixed; inset:0; z-index:9999;
  background: rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.wd023-menu-overlay.is-open{ opacity:1; visibility:visible; }
.wd023-menu-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:10000;
  width: 84%; max-width: 360px;
  background: linear-gradient(180deg,#2A2A2A,#1E1E1E);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;
  box-shadow: -10px 0 30px rgba(0,0,0,.4);
}
.wd023-menu-overlay.is-open .wd023-menu-panel{ transform: translateX(0); }
.wd023-menu-head{
  padding:16px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--wd023-line);
}
.wd023-menu-head b{ font-size:1.6rem; }
.wd023-menu-close{
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,.06); display:grid; place-items:center;
}
.wd023-menu-close i{ font-size:1.7rem; }
.wd023-menu-body{ padding:12px; overflow-y:auto; flex:1; }
.wd023-menu-body li a, .wd023-menu-body li button{
  display:flex; align-items:center; gap:12px;
  padding:14px 12px; border-radius:12px;
  font-size:1.5rem; font-weight:600; color:var(--wd023-text-soft);
  width:100%; text-align:left;
}
.wd023-menu-body li a:hover, .wd023-menu-body li button:hover{
  background: rgba(255,183,77,.08); color:var(--wd023-accent);
}
.wd023-menu-body i{ font-size:1.7rem; color:var(--wd023-accent); width:22px; text-align:center; }
.wd023-menu-sep{ height:1px; background:var(--wd023-line); margin:10px 12px; }
.wd023-menu-cta{
  margin:14px 12px; display:flex; gap:10px;
}
.wd023-menu-cta .wd023-btn{ flex:1; height:44px; min-height:44px; }

/* ---------- Hero ---------- */
.wd023-hero{
  position:relative; padding:18px 0 8px;
}
.wd023-hero-card{
  position:relative; border-radius: var(--wd023-radius);
  overflow:hidden; padding:22px 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,183,77,.25), transparent 55%),
    linear-gradient(135deg,#4D4D4D,#2B2B2B);
  border:1px solid rgba(255,183,77,.18);
  box-shadow: var(--wd023-shadow);
}
.wd023-hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background: rgba(255,183,77,.15);
  color: var(--wd023-accent); font-size:1.15rem; font-weight:700;
  letter-spacing:1px; margin-bottom:10px;
}
.wd023-hero h1{
  font-size:2.6rem; line-height:1.2; font-weight:900;
  margin-bottom:10px;
}
.wd023-hero h1 em{ color: var(--wd023-accent); font-style:normal; }
.wd023-hero p{
  color: var(--wd023-text-soft); font-size:1.4rem;
  margin-bottom:16px; max-width: 92%;
}
.wd023-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.wd023-hero-actions .wd023-btn{ height:46px; padding:0 22px; font-size:1.5rem; min-height:46px; }
.wd023-hero-stats{
  margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.wd023-hero-stat{
  background: rgba(0,0,0,.22); border-radius:12px;
  padding:10px; text-align:center; border:1px solid var(--wd023-line);
}
.wd023-hero-stat b{ display:block; font-size:1.9rem; color:var(--wd023-accent); font-weight:900; }
.wd023-hero-stat span{ font-size:1.1rem; color:var(--wd023-text-mute); }

/* ---------- Marquee ---------- */
.wd023-marquee{
  margin-top:14px; padding:10px 14px;
  background: linear-gradient(90deg, rgba(255,183,77,.12), rgba(255,183,77,.02));
  border:1px solid rgba(255,183,77,.18);
  border-radius:12px;
  display:flex; align-items:center; gap:10px;
  overflow:hidden;
}
.wd023-marquee i{ color: var(--wd023-accent); font-size:1.6rem; flex:0 0 auto; }
.wd023-marquee-track{
  flex:1; overflow:hidden; position:relative;
}
.wd023-marquee-track span{
  display:inline-block; white-space:nowrap;
  font-size:1.3rem; color:var(--wd023-text-soft); font-weight:600;
  animation: wd023scroll 22s linear infinite;
  padding-left:100%;
}
@keyframes wd023scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

/* ---------- Carousel ---------- */
.wd023-carousel{
  position:relative; border-radius:var(--wd023-radius);
  overflow:hidden; box-shadow: var(--wd023-shadow);
}
.wd023-carousel-track{ display:flex; transition: transform .4s ease; }
.wd023-carousel-slide{
  flex:0 0 100%; position:relative;
  padding:22px 18px; min-height:170px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,183,77,.22), transparent 55%),
    linear-gradient(135deg,#525252,#2A2A2A);
}
.wd023-carousel-slide h3{ font-size:1.9rem; margin-bottom:6px; font-weight:800; position:relative; z-index:1; }
.wd023-carousel-slide p{ font-size:1.3rem; color:var(--wd023-text-soft); margin-bottom:12px; position:relative; z-index:1; max-width:66%; }
.wd023-carousel-slide .wd023-btn{ height:42px; padding:0 18px; min-height:42px; position:relative; z-index:1; }
.wd023-carousel-visual{ position:absolute; inset:0 0 0 auto; width:48%; opacity:.48; }
.wd023-carousel-visual::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#3b3b3b 0%,transparent 80%); }
.wd023-carousel-visual img{ width:100%; height:100%; object-fit:cover; }
.wd023-carousel-dots{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; gap:6px; justify-content:center;
}
.wd023-carousel-dots button{
  width:7px; height:7px; border-radius:50%;
  background: rgba(255,255,255,.35); transition: all .2s ease;
}
.wd023-carousel-dots button.is-active{
  background: var(--wd023-accent); width:20px; border-radius:5px;
}

/* ---------- Category chips ---------- */
.wd023-chips{
  display:flex; gap:8px; overflow-x:auto;
  padding:6px 0 12px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wd023-chips::-webkit-scrollbar{ display:none; }
.wd023-chip{
  flex:0 0 auto; padding:9px 16px; border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--wd023-line);
  color: var(--wd023-text-soft);
  font-size:1.3rem; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px;
}
.wd023-chip.is-active{
  background: linear-gradient(135deg,var(--wd023-accent),var(--wd023-accent-3));
  color:#2A1A04; border-color:transparent;
  box-shadow: var(--wd023-shadow-amber);
}
.wd023-chip i{ font-size:1.4rem; }

/* ---------- Game grid ---------- */
.wd023-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.wd023-card{
  position:relative; border-radius:12px; overflow:hidden;
  background: var(--wd023-surface);
  border:1px solid var(--wd023-line);
  transition: transform .15s ease, box-shadow .2s ease;
  cursor:pointer;
}
.wd023-card:active{ transform: scale(.97); }
.wd023-card-media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background: linear-gradient(135deg,#444,#2B2B2B);
}
.wd023-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .35s ease;
}
.wd023-card:hover .wd023-card-media img{ transform: scale(1.06); }
.wd023-card-tag{
  position:absolute; top:6px; left:6px;
  font-size:1rem; font-weight:700; padding:2px 8px; border-radius:6px;
  background: var(--wd023-accent); color:#2A1A04;
}
.wd023-card-tag.hot{ background: var(--wd023-danger); color:#fff; }
.wd023-card-tag.new{ background: var(--wd023-success); color:#0A2A1A; }
.wd023-card-body{
  padding:8px 10px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.wd023-card-name{
  font-size:1.2rem; font-weight:600; color:var(--wd023-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wd023-card-play{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  background: rgba(255,183,77,.18);
  display:grid; place-items:center;
  color: var(--wd023-accent); font-size:1.2rem;
}

/* ---------- Featured row (horizontal) ---------- */
.wd023-row{
  display:flex; gap:10px; overflow-x:auto;
  padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.wd023-row::-webkit-scrollbar{ display:none; }
.wd023-row .wd023-card{ flex:0 0 120px; width:120px; }

/* ---------- Promo CTA banner ---------- */
.wd023-cta{
  position:relative; border-radius:var(--wd023-radius);
  padding:20px 18px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,207,122,.25), transparent 55%),
    linear-gradient(135deg,#FF9A1F,#7A4A0E);
  color:#1E1203;
  box-shadow: var(--wd023-shadow-amber);
}
.wd023-cta h3{ font-size:2rem; font-weight:900; margin-bottom:6px; }
.wd023-cta p{ font-size:1.3rem; margin-bottom:14px; opacity:.92; }
.wd023-cta .wd023-btn{
  background:#1E1203; color:var(--wd023-accent);
  height:44px; min-height:44px; padding:0 22px;
}
.wd023-cta-shine{
  position:absolute; top:-40%; right:-20%;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
}

/* ---------- Why choose / features ---------- */
.wd023-features{
  display:grid; grid-template-columns:1fr; gap:10px;
}
.wd023-feature{
  display:flex; gap:12px; padding:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--wd023-line);
  border-radius:12px;
}
.wd023-feature-ic{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  background: rgba(255,183,77,.15);
  display:grid; place-items:center;
  color: var(--wd023-accent); font-size:2rem;
}
.wd023-feature h4{ font-size:1.45rem; margin-bottom:3px; }
.wd023-feature p{ font-size:1.25rem; color:var(--wd023-text-mute); }

/* ---------- SEO content blocks ---------- */
.wd023-prose{
  background: rgba(255,255,255,.03);
  border:1px solid var(--wd023-line);
  border-radius:var(--wd023-radius);
  padding:18px 16px;
}
.wd023-prose h2{
  font-size:1.9rem; margin-bottom:10px; font-weight:800;
  display:flex; align-items:center; gap:8px;
}
.wd023-prose h2::before{
  content:""; width:5px; height:18px; border-radius:3px;
  background: var(--wd023-accent); display:inline-block;
}
.wd023-prose h3{ font-size:1.55rem; margin:14px 0 6px; color:var(--wd023-accent-2); font-weight:700; }
.wd023-prose p{ font-size:1.35rem; color:var(--wd023-text-soft); margin-bottom:10px; }
.wd023-prose ul{ padding-left:18px; margin-bottom:10px; }
.wd023-prose ul li{
  font-size:1.3rem; color:var(--wd023-text-soft); margin-bottom:6px;
  list-style:disc;
}
.wd023-prose ul li a{ color: var(--wd023-accent); font-weight:600; }

/* ---------- FAQ ---------- */
.wd023-faq-item{
  border:1px solid var(--wd023-line);
  border-radius:12px; margin-bottom:8px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.wd023-faq-q{
  width:100%; text-align:left; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:1.4rem; font-weight:700; color:var(--wd023-text);
}
.wd023-faq-q i{ color:var(--wd023-accent); transition: transform .25s ease; }
.wd023-faq-item.is-open .wd023-faq-q i{ transform: rotate(45deg); }
.wd023-faq-a{
  max-height:0; overflow:hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding:0 16px;
  font-size:1.3rem; color:var(--wd023-text-soft);
}
.wd023-faq-item.is-open .wd023-faq-a{
  max-height:400px; padding:0 16px 14px;
}

/* ---------- Footer ---------- */
.wd023-footer{
  margin-top:20px;
  background: linear-gradient(180deg,#2A2A2A,#1A1A1A);
  border-top:1px solid var(--wd023-line);
  padding:26px 0 30px;
}
.wd023-footer-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px;
}
.wd023-footer h5{
  font-size:1.3rem; color:var(--wd023-accent);
  margin-bottom:10px; letter-spacing:1px; text-transform:uppercase;
}
.wd023-footer li{ margin-bottom:7px; }
.wd023-footer li a{ font-size:1.25rem; color:var(--wd023-text-soft); }
.wd023-footer li a:hover{ color: var(--wd023-accent); }
.wd023-footer-bottom{
  border-top:1px solid var(--wd023-line);
  padding-top:14px; text-align:center;
}
.wd023-footer-bottom p{ font-size:1.15rem; color:var(--wd023-text-mute); margin-bottom:6px; }
.wd023-18{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:22px; border-radius:5px; border:1px solid var(--wd023-text-mute);
  font-size:1rem; font-weight:800; color:var(--wd023-text-mute); margin-right:4px;
}

/* ---------- Mobile bottom nav ---------- */
.wd023-bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  height: var(--wd023-bottom-h);
  background: linear-gradient(180deg, rgba(40,40,40,.96), rgba(20,20,20,.99));
  backdrop-filter: blur(12px);
  border-top:1px solid var(--wd023-line);
  display:flex; justify-content:space-around; align-items:stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.wd023-bottomnav a, .wd023-bottomnav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-width:60px; min-height:60px;
  color: var(--wd023-text-mute);
  font-size:1.05rem; font-weight:600;
  transition: color .2s ease, transform .15s ease;
  position:relative;
}
.wd023-bottomnav a.is-active, .wd023-bottomnav button.is-active{ color:var(--wd023-accent); }
.wd023-bottomnav a i, .wd023-bottomnav button i{ font-size:2.2rem; }
.wd023-bottomnav a:active, .wd023-bottomnav button:active{ transform: translateY(-1px); }
.wd023-bottomnav a.is-active::before, .wd023-bottomnav button.is-active::before{
  content:""; position:absolute; top:0; width:32px; height:3px; border-radius:0 0 4px 4px;
  background: var(--wd023-accent);
}
.wd023-bottomnav .wd023-nav-promo{
  color: var(--wd023-accent);
}

/* ---------- Floating quick promo ---------- */
.wd023-float{
  position:fixed; right:12px; bottom:calc(var(--wd023-bottom-h) + 14px);
  z-index: 1100;
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(135deg,var(--wd023-accent),var(--wd023-accent-3));
  display:grid; place-items:center; color:#2A1A04;
  box-shadow: var(--wd023-shadow-amber);
  animation: wd023pulse 2.2s ease-in-out infinite;
}
.wd023-float i{ font-size:2.4rem; }
@keyframes wd023pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ---------- Responsive / desktop ---------- */
@media (min-width: 768px){
  body{ background: radial-gradient(1400px 700px at 50% -10%, #525252 0%, var(--wd023-bg) 55%, var(--wd023-bg-3) 100%); }
  .wd023-wrap{ max-width: 900px; padding:0 22px; }
  .wd023-grid{ grid-template-columns:repeat(5,1fr); }
  .wd023-features{ grid-template-columns:repeat(2,1fr); }
  .wd023-footer-cols{ grid-template-columns:repeat(4,1fr); }
  .wd023-hamburger{ display:none; }
  .wd023-desktop-nav{
    display:flex; align-items:center; gap:18px;
  }
  .wd023-desktop-nav a{
    font-size:1.35rem; font-weight:600; color:var(--wd023-text-soft);
  }
  .wd023-desktop-nav a:hover{ color:var(--wd023-accent); }
  .wd023-bottomnav{ display:none; }
  .wd023-float{ display:none; }
  main{ padding-bottom: 30px !important; }
  .wd023-hero h1{ font-size:3.2rem; }
}

/* Mobile bottom padding so content is never hidden by bottom nav */
@media (max-width: 767px){
  main{ padding-bottom: calc(var(--wd023-bottom-h) + 18px); }
  .wd023-footer{ padding-bottom: calc(30px + var(--wd023-bottom-h)); }
}

/* ---------- Utility ---------- */
.wd023-hide{ display:none !important; }
.wd023-text-amber{ color: var(--wd023-accent); }
.wd023-center{ text-align:center; }
.wd023-mt{ margin-top:14px; }
.wd023-mt-lg{ margin-top:24px; }
.wd023-mb{ margin-bottom:14px; }

/* ---------- Print-friendly fallback (avoid wasting ink) ---------- */
@media print{
  .wd023-header,.wd023-bottomnav,.wd023-float,.wd023-menu-overlay{ display:none !important; }
  body{ background:#fff; color:#000; }
}