/* widd.lol - design-1829.css
   Mobile-first casino homepage styles. Max width 430px.
   All custom classes use the w1829- prefix.
   Palette: #006400 | #00B8D4 | #0E1621 | #E9ECEF | #00E5FF | #40E0D0
   Root font 62.5% so 1rem = 10px. */

:root {
  --w1829-primary: #006400;
  --w1829-cyan: #00B8D4;
  --w1829-bg: #0E1621;
  --w1829-text: #E9ECEF;
  --w1829-accent: #00E5FF;
  --w1829-turquoise: #40E0D0;
  --w1829-dark: #081019;
  --w1829-card: #121d2c;
  --w1829-muted: #9fb3c8;
  --w1829-gold: #ffd24a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 62.5%; }

body {
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  background: var(--w1829-bg);
  color: var(--w1829-text);
  line-height: 1.5rem;
  font-size: 1.4rem;
  -webkit-font-smoothing: antialiased;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
}

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

.w1829-wrapper { width: 100%; overflow-x: hidden; }

/* Header */
.w1829-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: 430px;
  margin: 0 auto;
  height: 5.6rem;
  background: linear-gradient(90deg, var(--w1829-dark), var(--w1829-primary));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  z-index: 1000;
  border-bottom: 0.2rem solid var(--w1829-cyan);
  box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.45);
}

.w1829-brand { display: flex; align-items: center; gap: 0.8rem; }
.w1829-logo { width: 2.8rem; height: 2.8rem; border-radius: 0.6rem; }
.w1829-brand-name {
  font-size: 1.8rem; font-weight: 800; color: var(--w1829-accent);
  letter-spacing: 0.05rem;
}
.w1829-brand-name span { color: var(--w1829-turquoise); }

.w1829-header-actions { display: flex; align-items: center; gap: 0.6rem; }

.w1829-btn {
  border: none; border-radius: 0.8rem; padding: 0.7rem 1.2rem;
  font-size: 1.3rem; font-weight: 700; cursor: pointer;
  min-height: 4.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.w1829-btn:active { transform: scale(.96); }
.w1829-btn-register {
  background: linear-gradient(135deg, var(--w1829-accent), var(--w1829-cyan));
  color: var(--w1829-dark);
  box-shadow: 0 0.3rem 0.6rem rgba(0,229,255,.35);
}
.w1829-btn-login {
  background: transparent; color: var(--w1829-text);
  border: 0.15rem solid var(--w1829-turquoise);
}

.w1829-menu-btn {
  background: transparent; border: 0.15rem solid var(--w1829-cyan);
  border-radius: 0.6rem; width: 4rem; height: 4rem; color: var(--w1829-accent);
  font-size: 1.8rem; cursor: pointer;
}

.w1829-menu-btn-active { background: var(--w1829-cyan); color: var(--w1829-dark); }

/* Mobile menu */
.w1829-mobile-menu {
  position: fixed; top: 5.6rem; left: 0; right: 0;
  max-width: 430px; margin: 0 auto;
  background: var(--w1829-dark);
  border-bottom: 0.2rem solid var(--w1829-cyan);
  padding: 1rem 1.2rem;
  z-index: 9999;
  display: none;
  flex-direction: column; gap: 0.4rem;
  box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,.5);
}
.w1829-menu-open { display: flex; }
.w1829-mobile-menu a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 0.8rem; border-radius: 0.6rem;
  color: var(--w1829-text); font-weight: 600;
}
.w1829-mobile-menu a:hover, .w1829-mobile-menu a:focus {
  background: var(--w1829-card); color: var(--w1829-accent);
}
.w1829-mobile-menu a i { color: var(--w1829-turquoise); width: 2.2rem; text-align: center; }

/* Layout */
main { padding-top: 6.2rem; padding-bottom: 1rem; }
.w1829-container { padding: 0 1.2rem; }

/* Carousel */
.w1829-carousel {
  position: relative; margin: 1rem 0; border-radius: 1rem;
  overflow: hidden; box-shadow: 0 0.4rem 1rem rgba(0,0,0,.4);
}
.w1829-carousel-track { position: relative; height: 18rem; }
.w1829-carousel-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s ease; cursor: pointer;
}
.w1829-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.w1829-slide-active { opacity: 1; }
.w1829-carousel-cap {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  background: rgba(8,16,25,.6); padding: 0.6rem 0.9rem; border-radius: 0.6rem;
  font-size: 1.2rem; font-weight: 700; color: var(--w1829-accent);
}
.w1829-carousel-dots {
  position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem;
}
.w1829-carousel-dot {
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: rgba(233,236,239,.4); border: none; cursor: pointer;
}
.w1829-dot-active { background: var(--w1829-accent); }
.w1829-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(8,16,25,.55); color: var(--w1829-accent);
  border: none; width: 3rem; height: 3rem; border-radius: 50%;
  font-size: 1.6rem; cursor: pointer;
}
.w1829-carousel-nav.w1829-prev { left: 0.6rem; }
.w1829-carousel-nav.w1829-next { right: 0.6rem; }

/* Section titles */
.w1829-section { margin: 1.6rem 0; }
.w1829-section-title {
  font-size: 1.8rem; font-weight: 800; color: var(--w1829-accent);
  margin-bottom: 0.8rem; padding-left: 0.8rem;
  border-left: 0.4rem solid var(--w1829-turquoise);
}
.w1829-section-title small { color: var(--w1829-muted); font-size: 1.2rem; font-weight: 500; }

.w1829-h1 {
  font-size: 2.2rem; font-weight: 900; line-height: 2.6rem;
  color: var(--w1829-text); margin: 1rem 0;
}
.w1829-h1 span { color: var(--w1829-accent); }

.w1829-lead { color: var(--w1829-muted); font-size: 1.35rem; margin-bottom: 1rem; }

/* Filter chips */
.w1829-filter-bar {
  display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.4rem 0 0.8rem;
  -webkit-overflow-scrolling: touch;
}
.w1829-filter-chip {
  white-space: nowrap; padding: 0.5rem 1rem; border-radius: 2rem;
  background: var(--w1829-card); color: var(--w1829-text);
  border: 0.15rem solid transparent; font-size: 1.2rem; font-weight: 600;
  cursor: pointer;
}
.w1829-chip-active {
  background: linear-gradient(135deg, var(--w1829-cyan), var(--w1829-primary));
  color: #fff; border-color: var(--w1829-accent);
}

/* Game grid */
.w1829-game-section { margin: 1.4rem 0; }
.w1829-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
}
.w1829-game-card {
  background: var(--w1829-card); border-radius: 0.8rem; overflow: hidden;
  border: 0.1rem solid rgba(0,184,212,.18); cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.w1829-game-card:active { transform: scale(.95); border-color: var(--w1829-accent); }
.w1829-game-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.w1829-game-name {
  font-size: 1.05rem; font-weight: 600; color: var(--w1829-text);
  padding: 0.4rem 0.3rem; text-align: center; line-height: 1.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w1829-game-tag {
  display: inline-block; font-size: 0.9rem; color: var(--w1829-turquoise);
  background: rgba(64,224,208,.12); padding: 0.1rem 0.5rem; border-radius: 0.4rem;
  margin: 0 0 0.4rem 0.3rem;
}

/* Generic cards / modules */
.w1829-card {
  background: var(--w1829-card); border-radius: 1rem; padding: 1.2rem;
  margin: 0.8rem 0; border: 0.1rem solid rgba(0,184,212,.15);
}
.w1829-card h2 { color: var(--w1829-accent); font-size: 1.6rem; margin-bottom: 0.6rem; }
.w1829-card h3 { color: var(--w1829-turquoise); font-size: 1.35rem; margin: 0.8rem 0 0.4rem; }
.w1829-card p { color: var(--w1829-text); margin-bottom: 0.6rem; }
.w1829-card ul { padding-left: 1.4rem; color: var(--w1829-text); }
.w1829-card li { margin-bottom: 0.4rem; }

.w1829-link-text {
  color: var(--w1829-accent); font-weight: 700; cursor: pointer;
  border-bottom: 0.1rem dashed var(--w1829-turquoise);
}

/* Promo CTA */
.w1829-cta {
  background: linear-gradient(135deg, var(--w1829-primary), var(--w1829-cyan));
  border-radius: 1rem; padding: 1.4rem; text-align: center; margin: 1rem 0;
  border: 0.15rem solid var(--w1829-accent);
}
.w1829-cta h3 { color: #fff; font-size: 1.7rem; margin-bottom: 0.4rem; }
.w1829-cta p { color: rgba(255,255,255,.9); margin-bottom: 0.8rem; }
.w1829-cta .w1829-btn { background: #fff; color: var(--w1829-primary); }

/* RTP table */
.w1829-rtp-table { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.w1829-rtp-table th, .w1829-rtp-table td {
  border: 0.1rem solid rgba(0,184,212,.2); padding: 0.5rem 0.6rem; text-align: left;
}
.w1829-rtp-table th { background: var(--w1829-dark); color: var(--w1829-accent); }
.w1829-rtp-table td:first-child { color: var(--w1829-text); }
.w1829-rtp-bar {
  height: 0.6rem; background: var(--w1829-dark); border-radius: 0.4rem; overflow: hidden;
}
.w1829-rtp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--w1829-turquoise), var(--w1829-accent)); }

/* Testimonials */
.w1829-testi {
  background: var(--w1829-card); border-radius: 0.8rem; padding: 1rem;
  margin: 0.6rem 0; border-left: 0.3rem solid var(--w1829-turquoise);
}
.w1829-testi p { color: var(--w1829-text); font-style: italic; }
.w1829-testi .w1829-testi-author { color: var(--w1829-accent); font-size: 1.1rem; margin-top: 0.4rem; font-weight: 700; }

/* Winners */
.w1829-winner-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.4rem; border-bottom: 0.1rem solid rgba(0,184,212,.12);
  font-size: 1.2rem;
}
.w1829-winner-row span:first-child { color: var(--w1829-text); }
.w1829-winner-row span:last-child { color: var(--w1829-gold); font-weight: 800; }

/* Payment / partner icons */
.w1829-pay-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.w1829-pay-row img { width: 4.8rem; height: 4.8rem; object-fit: contain; border-radius: 0.6rem; background: #fff; padding: 0.3rem; }

/* FAQ */
.w1829-faq-item {
  background: var(--w1829-card); border-radius: 0.6rem; margin: 0.5rem 0;
  border: 0.1rem solid rgba(0,184,212,.15); overflow: hidden;
}
.w1829-faq-q {
  width: 100%; text-align: left; background: transparent; border: none;
  color: var(--w1829-text); font-weight: 700; font-size: 1.25rem;
  padding: 0.9rem 1rem; cursor: pointer; display: flex; justify-content: space-between;
}
.w1829-faq-q .w1829-faq-icon { color: var(--w1829-accent); }
.w1829-faq-a { padding: 0 1rem 1rem; color: var(--w1829-muted); display: none; }
.w1829-faq-open .w1829-faq-a { display: block; }

/* Footer */
.w1829-footer {
  background: var(--w1829-dark); padding: 1.6rem 1.2rem 2rem;
  margin-top: 1.6rem; border-top: 0.2rem solid var(--w1829-cyan);
}
.w1829-footer-brand { color: var(--w1829-muted); font-size: 1.2rem; margin-bottom: 1rem; }
.w1829-footer-brand strong { color: var(--w1829-accent); }
.w1829-footer-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }
.w1829-footer-btns .w1829-btn { padding: 0.6rem 1rem; min-height: 4rem; font-size: 1.2rem; }
.w1829-footer-links {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0;
  font-size: 1.15rem;
}
.w1829-footer-links a { color: var(--w1829-muted); }
.w1829-footer-links a:hover { color: var(--w1829-accent); }
.w1829-copy { color: var(--w1829-muted); font-size: 1.1rem; margin-top: 0.8rem; }

/* Mobile bottom nav */
.w1829-bnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 430px; margin: 0 auto;
  height: 6rem; background: var(--w1829-dark);
  display: flex; justify-content: space-around; align-items: center;
  border-top: 0.15rem solid var(--w1829-cyan);
  z-index: 1000;
  box-shadow: 0 -0.3rem 0.8rem rgba(0,0,0,.45);
}
.w1829-bnav-btn {
  background: transparent; border: none; color: var(--w1829-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 6rem; min-height: 6rem; gap: 0.2rem; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; flex: 1;
  transition: color .15s ease, transform .15s ease;
}
.w1829-bnav-btn i, .w1829-bnav-btn .material-icons-outlined,
.w1829-bnav-btn ion-icon { font-size: 2.2rem; }
.w1829-bnav-btn:active { transform: scale(.92); }
.w1829-bnav-active { color: var(--w1829-accent); }
.w1829-bnav-active ion-icon { color: var(--w1829-accent); }
.w1829-bnav-badge {
  position: relative;
}
.w1829-bnav-badge::after {
  content: "1"; position: absolute; top: 0.2rem; right: 1.2rem;
  background: #ff3b5c; color: #fff; font-size: 0.9rem; font-weight: 700;
  min-width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 0.2rem;
}

/* Desktop: hide bottom nav, add desktop nav spacing */
@media (min-width: 769px) {
  .w1829-bnav { display: none; }
  main { padding-bottom: 2rem; }
}

/* Mobile: pad main so bottom nav never covers content */
@media (max-width: 768px) {
  main { padding-bottom: 7.2rem; }
}

/* Back to top */
.w1829-totop {
  position: fixed; right: 1.2rem; bottom: 7rem; width: 4rem; height: 4rem;
  border-radius: 50%; background: var(--w1829-cyan); color: var(--w1829-dark);
  border: none; font-size: 1.8rem; cursor: pointer; z-index: 999;
  box-shadow: 0 0.3rem 0.8rem rgba(0,0,0,.4);
}