/* ============================================================
 * lucky bingo - layout.css
 * Mobile-first HTML5 casino/gaming layout
 * All custom classes use the "we74b-" prefix
 * Palette: #6A5ACD | #BA55D3 | #E9ECEF | #273746 | #FF0000 | #7B68EE
 * ============================================================ */

/* ---------- CSS variables ---------- */
:root {
  --we74b-primary: #6A5ACD;
  --we74b-accent: #BA55D3;
  --we74b-light: #E9ECEF;
  --we74b-bg: #273746;
  --we74b-cta: #FF0000;
  --we74b-secondary: #7B68EE;

  --we74b-text: #E9ECEF;
  --we74b-text-muted: rgba(233, 236, 239, 0.74);
  --we74b-bg-dark: #1a2530;
  --we74b-bg-card: #2f4150;
  --we74b-bg-soft: #324a5e;
  --we74b-border: rgba(186, 85, 211, 0.28);
  --we74b-shadow: 0 6px 22px rgba(0, 0, 0, 0.34);
  --we74b-shadow-cta: 0 8px 22px rgba(255, 0, 0, 0.32);
  --we74b-radius: 14px;
  --we74b-radius-sm: 10px;
  --we74b-radius-lg: 22px;
  --we74b-grad-brand: linear-gradient(135deg, #6A5ACD 0%, #BA55D3 60%, #7B68EE 100%);
  --we74b-grad-dark: linear-gradient(160deg, #273746 0%, #1a2530 100%);
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--we74b-bg-dark);
  color: var(--we74b-text);
  line-height: 1.5;
  font-size: 1.5rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: 56px;
}
img { max-width: 100%; display: block; }
a { color: var(--we74b-secondary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--we74b-accent); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 700; }

/* ---------- layout primitives ---------- */
.we74b-container { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 1.2rem; position: relative; }
.we74b-wrapper { width: 100%; }
.we74b-section { padding: 2.4rem 0; }
.we74b-section--alt { background: var(--we74b-bg); }
.we74b-section--soft { background: linear-gradient(180deg, #2a3c4c 0%, #273746 100%); }
.we74b-section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1.2rem; color: var(--we74b-light); }
.we74b-section-title span { color: var(--we74b-accent); }
.we74b-eyebrow { display:inline-block; font-size:1.2rem; letter-spacing:.12em; text-transform:uppercase; color: var(--we74b-secondary); margin-bottom:.6rem; font-weight:600; }

/* ---------- header ---------- */
.we74b-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(26, 37, 48, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--we74b-border);
}
.we74b-header-inner { display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 56px; }
.we74b-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.6rem; color: var(--we74b-light); }
.we74b-logo img { width: 28px; height: 28px; border-radius: 8px; }
.we74b-logo span { background: var(--we74b-grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.we74b-desktop-nav { display: none; }
.we74b-header-actions { display: flex; align-items: center; gap: .5rem; }

/* ---------- buttons ---------- */
.we74b-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.3rem; font-size: 1.35rem; font-weight: 600; border-radius: 999px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; min-height: 38px; }
.we74b-btn:active { transform: scale(0.96); }
.we74b-btn-login { background: rgba(123, 104, 238, 0.18); color: var(--we74b-light); border: 1px solid var(--we74b-secondary); }
.we74b-btn-login:hover { background: rgba(123, 104, 238, 0.32); }
.we74b-btn-register { background: var(--we74b-grad-brand); color: #fff; box-shadow: var(--we74b-shadow); }
.we74b-btn-cta { background: var(--we74b-cta); color: #fff; box-shadow: var(--we74b-shadow-cta); padding: .9rem 1.8rem; font-size: 1.45rem; }
.we74b-btn-cta:hover { background: #e60000; }
.we74b-btn-ghost { background: transparent; color: var(--we74b-light); border: 1px solid var(--we74b-border); }
.we74b-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(123,104,238,.16); color: var(--we74b-light); }
.we74b-menu-toggle .material-icons { font-size: 24px; }

/* ---------- mobile menu ---------- */
.we74b-mobile-menu {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(26, 37, 48, 0.65);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.we74b-mobile-menu--open { opacity: 1; visibility: visible; }
.we74b-mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 84%; max-width: 340px;
  background: var(--we74b-grad-dark); padding: 2rem 1.6rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .28s ease;
  border-left: 1px solid var(--we74b-border);
}
.we74b-mobile-menu--open .we74b-mobile-menu-panel { transform: translateX(0); }
.we74b-mobile-menu-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.we74b-mobile-menu-head h3 { font-size: 1.5rem; color: var(--we74b-light); }
.we74b-mobile-menu-close { width:36px; height:36px; border-radius:10px; background: rgba(255,255,255,.08); color: var(--we74b-light); display:inline-flex; align-items:center; justify-content:center; }
.we74b-mobile-menu .we74b-btn { width: 100%; margin-bottom: .8rem; }
.we74b-mobile-menu-links { margin-top: 1rem; border-top: 1px solid var(--we74b-border); padding-top: 1rem; }
.we74b-mobile-menu-links a { display:flex; align-items:center; gap:.8rem; padding: .9rem .6rem; color: var(--we74b-text); font-size: 1.4rem; border-bottom: 1px dashed rgba(233,236,239,.08); }
.we74b-mobile-menu-links a i { color: var(--we74b-accent); width: 20px; text-align: center; }

/* ---------- carousel ---------- */
.we74b-carousel { position: relative; border-radius: 0 0 var(--we74b-radius-lg) var(--we74b-radius-lg); overflow: hidden; margin-bottom: 1.6rem; }
.we74b-carousel-viewport { overflow: hidden; }
.we74b-carousel-track { display: flex; transition: transform .5s ease; }
.we74b-carousel-slide { position: relative; flex: 0 0 100%; cursor: pointer; }
.we74b-carousel-slide img { width: 100%; height: 220px; object-fit: cover; }
.we74b-carousel-caption { position: absolute; left: 1.2rem; bottom: 1.2rem; right: 1.2rem; }
.we74b-carousel-caption h2 { font-size: 1.7rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); margin-bottom:.4rem; }
.we74b-carousel-caption p { font-size: 1.25rem; color: rgba(255,255,255,.9); text-shadow: 0 2px 6px rgba(0,0,0,.6); margin-bottom:.6rem; }
.we74b-carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.we74b-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(233,236,239,.5); transition: all .25s ease; }
.we74b-carousel-dot--active { background: var(--we74b-accent); width: 22px; border-radius: 5px; }

/* ---------- intro / H1 ---------- */
.we74b-intro h1 { font-size: 2.4rem; line-height: 1.25; margin-bottom: 1rem; color: var(--we74b-light); }
.we74b-intro h1 span { color: var(--we74b-accent); }
.we74b-intro p { color: var(--we74b-text-muted); margin-bottom: 1rem; font-size: 1.4rem; }
.we74b-intro-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.we74b-text-link { color: var(--we74b-secondary); font-weight: 600; border-bottom: 1px dashed var(--we74b-accent); }
.we74b-text-link:hover { color: var(--we74b-accent); }

/* ---------- games ---------- */
.we74b-games-block { margin-bottom: 1.8rem; }
.we74b-games-block h3 { font-size: 1.55rem; margin-bottom: .9rem; color: var(--we74b-light); display:flex; align-items:center; gap:.5rem; }
.we74b-games-block h3 i { color: var(--we74b-accent); }
.we74b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.we74b-game-card { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); overflow:hidden; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease; }
.we74b-game-card:active { transform: scale(0.96); }
.we74b-game-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #1a2530; }
.we74b-game-card-name { font-size: 1.1rem; color: var(--we74b-text); padding: .45rem .4rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- content blocks ---------- */
.we74b-content-block p { color: var(--we74b-text-muted); margin-bottom: 1rem; font-size: 1.4rem; }
.we74b-content-block h3 { font-size:1.6rem; color: var(--we74b-light); margin:1.2rem 0 .6rem; }
.we74b-step-list { display:flex; flex-direction:column; gap:.8rem; counter-reset: step; }
.we74b-step { display:flex; gap:.9rem; background: var(--we74b-bg-card); border:1px solid var(--we74b-border); padding:1rem; border-radius: var(--we74b-radius-sm); }
.we74b-step-num { flex:0 0 30px; height:30px; border-radius:50%; background: var(--we74b-grad-brand); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.we74b-step-body h4 { font-size:1.35rem; color: var(--we74b-light); margin-bottom:.2rem; }
.we74b-step-body p { font-size:1.3rem; color: var(--we74b-text-muted); margin:0; }

/* ---------- feature cards ---------- */
.we74b-feature-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:.8rem; }
.we74b-feature-card { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius); padding:1.2rem; text-align:center; }
.we74b-feature-icon { width:46px; height:46px; margin: 0 auto .6rem; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(123,104,238,.18); color: var(--we74b-accent); font-size:22px; }
.we74b-feature-card h4 { font-size:1.3rem; color: var(--we74b-light); margin-bottom:.3rem; }
.we74b-feature-card p { font-size:1.18rem; color: var(--we74b-text-muted); }

/* ---------- RTP compact ---------- */
.we74b-rtp-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem; }
.we74b-rtp-item { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); padding:.7rem .9rem; display:flex; justify-content:space-between; align-items:center; }
.we74b-rtp-item span:first-child { font-size:1.2rem; color: var(--we74b-text); }
.we74b-rtp-item span:last-child { font-size:1.3rem; font-weight:700; color: var(--we74b-accent); }

/* ---------- winners ---------- */
.we74b-winners-list { display:flex; flex-direction:column; gap:.6rem; }
.we74b-winner { display:flex; align-items:center; gap:.8rem; background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); padding:.7rem .9rem; }
.we74b-winner-avatar { width:36px; height:36px; border-radius:50%; background: var(--we74b-grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.3rem; }
.we74b-winner-info { flex:1; }
.we74b-winner-info h5 { font-size:1.25rem; color: var(--we74b-light); }
.we74b-winner-info small { color: var(--we74b-text-muted); font-size:1.1rem; }
.we74b-winner-amount { color: #ffd54a; font-weight:700; font-size:1.35rem; }

/* ---------- testimonials ---------- */
.we74b-testimonial { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius); padding:1.1rem; margin-bottom:.8rem; }
.we74b-testimonial-stars { color: #ffd54a; margin-bottom:.4rem; font-size:1.2rem; letter-spacing:2px; }
.we74b-testimonial p { color: var(--we74b-text-muted); font-size:1.3rem; margin-bottom:.6rem; }
.we74b-testimonial-author { font-size:1.18rem; color: var(--we74b-light); font-weight:600; }

/* ---------- payments ---------- */
.we74b-payment-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; }
.we74b-payment-card { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); padding:.8rem; text-align:center; }
.we74b-payment-card i { font-size:24px; color: var(--we74b-secondary); margin-bottom:.3rem; display:block; }
.we74b-payment-card span { font-size:1.12rem; color: var(--we74b-text); }

/* ---------- app CTA ---------- */
.we74b-app-cta { background: var(--we74b-grad-brand); border-radius: var(--we74b-radius-lg); padding:1.4rem; text-align:center; color:#fff; }
.we74b-app-cta h3 { font-size:1.7rem; margin-bottom:.4rem; color:#fff; }
.we74b-app-cta p { font-size:1.25rem; color:rgba(255,255,255,.9); margin-bottom:1rem; }
.we74b-app-cta-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.we74b-app-cta-actions .we74b-btn { background:#fff; color: var(--we74b-primary); }

/* ---------- FAQ ---------- */
.we74b-faq-item { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); margin-bottom:.6rem; overflow:hidden; }
.we74b-faq-q { padding:.9rem 1rem; font-size:1.3rem; font-weight:600; color: var(--we74b-light); display:block; }
.we74b-faq-a { padding:0 1rem .9rem; font-size:1.25rem; color: var(--we74b-text-muted); }

/* ---------- highlights ---------- */
.we74b-highlight-list { display:flex; flex-direction:column; gap:.7rem; }
.we74b-highlight { display:flex; gap:.8rem; background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); padding:.9rem; }
.we74b-highlight i { color: var(--we74b-accent); font-size:22px; flex:0 0 26px; }
.we74b-highlight h4 { font-size:1.3rem; color: var(--we74b-light); margin-bottom:.2rem; }
.we74b-highlight p { font-size:1.18rem; color: var(--we74b-text-muted); }

/* ---------- security ---------- */
.we74b-security-list { display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem; }
.we74b-security-item { background: var(--we74b-bg-card); border:1px solid var(--we74b-border); border-radius: var(--we74b-radius-sm); padding:.8rem; text-align:center; }
.we74b-security-item i { font-size:22px; color: #4ade80; margin-bottom:.3rem; display:block; }
.we74b-security-item span { font-size:1.15rem; color: var(--we74b-text); }

/* ---------- footer ---------- */
.we74b-footer { background: var(--we74b-bg-dark); border-top: 1px solid var(--we74b-border); padding: 2.4rem 0 6rem; }
.we74b-footer-brand { color: var(--we74b-text-muted); font-size:1.28rem; margin-bottom:1.2rem; }
.we74b-footer-promo { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.we74b-footer-promo .we74b-btn { flex:1; min-width: 130px; }
.we74b-footer-links { display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem 1rem; margin-bottom:1.4rem; }
.we74b-footer-links a { font-size:1.2rem; color: var(--we74b-text-muted); }
.we74b-footer-links a:hover { color: var(--we74b-accent); }
.we74b-footer-copy { font-size:1.12rem; color: var(--we74b-text-muted); border-top:1px solid var(--we74b-border); padding-top:1rem; text-align:center; }

/* ---------- mobile bottom nav ---------- */
.we74b-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  height: 62px; background: rgba(26, 37, 48, 0.98);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--we74b-border);
  display: flex; justify-content: space-around; align-items: stretch;
  padding: 0 .2rem;
}
.we74b-bottom-nav-btn {
  flex: 1; min-width: 60px; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--we74b-text-muted); transition: color .2s ease, transform .15s ease;
  position: relative;
}
.we74b-bottom-nav-btn i { font-size: 22px; }
.we74b-bottom-nav-btn span { font-size: 1.05rem; }
.we74b-bottom-nav-btn:active { transform: scale(0.92); }
.we74b-bottom-nav-btn--active { color: var(--we74b-accent); }
.we74b-bottom-nav-btn--active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--we74b-accent);
}
.we74b-bottom-nav-btn--promo {
  background: var(--we74b-grad-brand); color: #fff;
  border-radius: 16px 16px 0 0; margin-top: -14px;
  box-shadow: var(--we74b-shadow);
}
.we74b-bottom-nav-btn--promo i { font-size: 26px; }

/* ---------- desktop ---------- */
@media (min-width: 769px) {
  body { padding-top: 64px; }
  .we74b-container { max-width: 960px; padding: 0 2rem; }
  .we74b-desktop-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .we74b-desktop-nav a { font-size: 1.3rem; color: var(--we74b-text-muted); padding: .3rem .2rem; }
  .we74b-desktop-nav a:hover { color: var(--we74b-accent); }
  .we74b-menu-toggle { display: none; }
  .we74b-grid { grid-template-columns: repeat(6, 1fr); }
  .we74b-feature-grid, .we74b-payment-grid { grid-template-columns: repeat(4,1fr); }
  .we74b-footer-links { grid-template-columns: repeat(3,1fr); }
  .we74b-bottom-nav { display: none; }
  .we74b-footer { padding-bottom: 2.4rem; }
  .we74b-carousel-slide img { height: 360px; }
  .we74b-intro h1 { font-size: 3rem; }
}

@media (max-width: 768px) {
  main.we74b-main { padding-bottom: 80px; }
}

/* ---------- utilities ---------- */
.we74b-text-center { text-align:center; }
.we74b-mt-1 { margin-top:.6rem; } .we74b-mt-2 { margin-top:1.2rem; }
.we74b-hide-mobile { display:none; }
@media (min-width:769px){ .we74b-hide-mobile{display:block;} .we74b-hide-desktop{display:none;} }