/* ============================================================
 * gcash-game.click - Shared base stylesheet (mobile first)
 * All custom class names use the w6fdf- prefix to keep site
 * styling isolated from third-party libraries.
 * Palette: #0F0F23 / #4B0082 / #F0E68C / #808080
 * ========================================================== */

:root {
  --w6fdf-bg: #0F0F23;
  --w6fdf-bg-soft: #161634;
  --w6fdf-bg-card: #1c1c44;
  --w6fdf-primary: #4B0082;
  --w6fdf-primary-soft: #6a10bd;
  --w6fdf-accent: #F0E68C;
  --w6fdf-accent-deep: #ffd84d;
  --w6fdf-muted: #808080;
  --w6fdf-text: #f5f5ff;
  --w6fdf-text-soft: #c9c9e8;
  --w6fdf-border: rgba(240, 230, 140, 0.18);
  --w6fdf-radius: 1.4rem;
  --w6fdf-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  --w6fdf-gradient: linear-gradient(135deg, #4B0082 0%, #161634 60%, #0F0F23 100%);
  --w6fdf-gold-gradient: linear-gradient(135deg, #ffd84d 0%, #F0E68C 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--w6fdf-bg);
  color: var(--w6fdf-text);
  font-family: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 62.5%; /* 1rem = 10px baseline */
  line-height: 1.5rem;
  overflow-x: hidden;
}

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

/* ---------- Layout containers ---------- */
.w6fdf-wrapper { width: 100%; max-width: 430px; margin: 0 auto; position: relative; }
.w6fdf-container { padding: 0 1.4rem; width: 100%; }
.w6fdf-main { padding-bottom: 9rem; padding-top: 6rem; }

/* ============================================================
 * Header / Top navigation
 * ========================================================== */
.w6fdf-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(15,15,35,0.98) 0%, rgba(15,15,35,0.92) 100%);
  border-bottom: 1px solid var(--w6fdf-border);
  backdrop-filter: blur(8px);
}
.w6fdf-header-inner {
  max-width: 430px;
  margin: 0 auto;
  padding: 0.8rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.w6fdf-brand { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.w6fdf-brand-logo {
  width: 3rem; height: 3rem; border-radius: 0.8rem;
  background: var(--w6fdf-gold-gradient);
  display: flex; align-items: center; justify-content: center;
  color: var(--w6fdf-bg); font-weight: 800; font-size: 1.6rem;
  flex-shrink: 0;
}
.w6fdf-brand-name {
  font-size: 1.6rem; font-weight: 800; color: var(--w6fdf-accent);
  letter-spacing: 0.02em; white-space: nowrap;
}
.w6fdf-brand-name span { color: var(--w6fdf-text); font-weight: 500; }

.w6fdf-header-actions { display: flex; align-items: center; gap: 0.6rem; }
.w6fdf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.7rem 1.2rem;
  font-size: 1.3rem; font-weight: 700;
  border-radius: 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-decoration: none;
  min-height: 3.4rem;
}
.w6fdf-btn:active { transform: scale(0.96); }
.w6fdf-btn-login {
  background: transparent;
  color: var(--w6fdf-text);
  border-color: var(--w6fdf-border);
}
.w6fdf-btn-register {
  background: var(--w6fdf-gold-gradient);
  color: var(--w6fdf-bg);
  border-color: var(--w6fdf-accent-deep);
  box-shadow: 0 4px 14px rgba(255, 216, 77, 0.32);
}
.w6fdf-menu-btn {
  background: transparent;
  color: var(--w6fdf-accent);
  border: 1px solid var(--w6fdf-border);
  width: 3.4rem; height: 3.4rem;
  border-radius: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ---------- Mobile menu drawer ---------- */
.w6fdf-mobile-menu {
  max-height: 0;
  overflow: hidden;
  background: var(--w6fdf-bg-soft);
  transition: max-height 0.32s ease;
  border-top: 1px solid var(--w6fdf-border);
}
.w6fdf-menu-open { max-height: 60rem; }
.w6fdf-mobile-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 1rem 1.4rem 1.4rem;
}
.w6fdf-mobile-menu-inner a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 0.8rem;
  background: rgba(75, 0, 130, 0.35);
  color: var(--w6fdf-text);
  font-size: 1.25rem; font-weight: 600;
  border: 1px solid var(--w6fdf-border);
}
.w6fdf-mobile-menu-inner a:active { background: rgba(240, 230, 140, 0.15); }

/* ============================================================
 * Hero / Carousel
 * ========================================================== */
.w6fdf-hero { margin: 1rem 0 0.6rem; }
.w6fdf-carousel {
  position: relative;
  border-radius: var(--w6fdf-radius);
  overflow: hidden;
  box-shadow: var(--w6fdf-shadow);
  background: var(--w6fdf-bg-soft);
}
.w6fdf-slide {
  display: none;
  position: relative;
  cursor: pointer;
}
.w6fdf-slide-active { display: block; }
.w6fdf-slide img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
}
.w6fdf-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,35,0.05) 0%, rgba(15,15,35,0.78) 100%);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.w6fdf-slide-title {
  font-size: 1.8rem; font-weight: 800; color: var(--w6fdf-accent);
  margin: 0 0 0.4rem;
}
.w6fdf-slide-sub {
  font-size: 1.2rem; color: var(--w6fdf-text-soft); margin: 0;
}
.w6fdf-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: rgba(15, 15, 35, 0.7);
  color: var(--w6fdf-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid var(--w6fdf-border);
  z-index: 2;
}
.w6fdf-carousel-arrow.w6fdf-prev { left: 0.6rem; }
.w6fdf-carousel-arrow.w6fdf-next { right: 0.6rem; }
.w6fdf-dots {
  position: absolute; bottom: 0.6rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: 0.4rem;
  z-index: 2;
}
.w6fdf-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: rgba(240, 230, 140, 0.4);
  cursor: pointer;
}
.w6fdf-dot-active { background: var(--w6fdf-accent-deep); width: 1.4rem; border-radius: 0.4rem; }

/* ============================================================
 * Section blocks
 * ========================================================== */
.w6fdf-section { margin: 2rem 0; }
.w6fdf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem;
}
.w6fdf-section-title {
  font-size: 1.7rem; font-weight: 800; color: var(--w6fdf-accent);
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0;
}
.w6fdf-section-title i { color: var(--w6fdf-accent-deep); }
.w6fdf-section-link {
  font-size: 1.15rem; color: var(--w6fdf-text-soft);
  font-weight: 600;
}
.w6fdf-h1 {
  font-size: 2rem; font-weight: 800; color: var(--w6fdf-accent);
  line-height: 2.6rem; margin: 1.2rem 0 0.6rem;
}
.w6fdf-lead {
  font-size: 1.3rem; color: var(--w6fdf-text-soft);
  line-height: 2rem; margin: 0 0 1rem;
}
.w6fdf-text p {
  font-size: 1.3rem; color: var(--w6fdf-text-soft); line-height: 2rem;
  margin: 0 0 1rem;
}
.w6fdf-text strong { color: var(--w6fdf-accent); font-weight: 700; }
.w6fdf-text a { color: var(--w6fdf-accent-deep); font-weight: 700; }
.w6fdf-text h2 {
  font-size: 1.55rem; color: var(--w6fdf-accent);
  margin: 1.6rem 0 0.6rem; font-weight: 800;
}
.w6fdf-text h3 {
  font-size: 1.35rem; color: var(--w6fdf-text);
  margin: 1.2rem 0 0.4rem; font-weight: 700;
}
.w6fdf-text ul, .w6fdf-text ol { padding-left: 1.6rem; color: var(--w6fdf-text-soft); font-size: 1.3rem; line-height: 2rem; }
.w6fdf-text li { margin-bottom: 0.4rem; }

/* ============================================================
 * Game grid + cards
 * ========================================================== */
.w6fdf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.w6fdf-card {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex; flex-direction: column;
}
.w6fdf-card:active { transform: scale(0.97); }
.w6fdf-card-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: linear-gradient(135deg, #2a2a55, #161634);
}
.w6fdf-card-name {
  font-size: 1.1rem;
  color: var(--w6fdf-text);
  padding: 0.5rem 0.4rem;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
.w6fdf-card-tile {
  position: relative;
}
.w6fdf-card-tile .w6fdf-badge {
  position: absolute; top: 0.4rem; left: 0.4rem;
  background: var(--w6fdf-gold-gradient); color: var(--w6fdf-bg);
  font-size: 0.95rem; font-weight: 800;
  padding: 0.15rem 0.5rem; border-radius: 0.6rem;
}
.w6fdf-card-tile .w6fdf-hot-flag {
  position: absolute; top: 0.4rem; right: 0.4rem;
  background: linear-gradient(135deg, #ff4d4d, #b8002e);
  color: #fff; font-size: 0.9rem; font-weight: 800;
  padding: 0.15rem 0.5rem; border-radius: 0.6rem;
}

/* ============================================================
 * Filter chips + feature / promo cards
 * ========================================================== */
.w6fdf-filter-row {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.w6fdf-filter-btn {
  padding: 0.5rem 1rem; border-radius: 2rem;
  font-size: 1.15rem; font-weight: 700;
  background: var(--w6fdf-bg-card);
  color: var(--w6fdf-text-soft);
  border: 1px solid var(--w6fdf-border);
  cursor: pointer;
}
.w6fdf-filter-active {
  background: var(--w6fdf-gold-gradient);
  color: var(--w6fdf-bg);
}

.w6fdf-tiles {
  display: grid; grid-template-columns: 1fr; gap: 0.8rem;
}
.w6fdf-tile {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1.2rem;
  padding: 1.1rem 1.2rem;
  display: flex; align-items: flex-start; gap: 0.9rem;
}
.w6fdf-tile-icon {
  width: 3.6rem; height: 3.6rem; border-radius: 1rem;
  background: rgba(75, 0, 130, 0.45);
  color: var(--w6fdf-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; flex-shrink: 0;
}
.w6fdf-tile-body h3 {
  margin: 0 0 0.3rem; font-size: 1.35rem; color: var(--w6fdf-accent); font-weight: 700;
}
.w6fdf-tile-body p { margin: 0; font-size: 1.2rem; color: var(--w6fdf-text-soft); line-height: 1.8rem; }

.w6fdf-promo-card {
  background: var(--w6fdf-gradient);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1.4rem;
  padding: 1.2rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  box-shadow: var(--w6fdf-shadow);
}
.w6fdf-promo-card h3 { margin: 0; color: var(--w6fdf-accent); font-size: 1.5rem; }
.w6fdf-promo-card p { margin: 0; color: var(--w6fdf-text-soft); font-size: 1.2rem; line-height: 1.8rem; }

/* ============================================================
 * CTA + buttons + stats + winners
 * ========================================================== */
.w6fdf-cta {
  background: var(--w6fdf-gradient);
  border-radius: 1.6rem;
  padding: 1.6rem 1.4rem;
  text-align: center;
  margin: 1.6rem 0;
  border: 1px solid var(--w6fdf-border);
  box-shadow: var(--w6fdf-shadow);
}
.w6fdf-cta h3 { margin: 0 0 0.4rem; color: var(--w6fdf-accent); font-size: 1.7rem; }
.w6fdf-cta p { margin: 0 0 1rem; color: var(--w6fdf-text-soft); font-size: 1.2rem; }
.w6fdf-cta .w6fdf-btn { margin: 0 auto; padding: 1rem 2rem; font-size: 1.35rem; }

.w6fdf-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem; margin: 1rem 0;
}
.w6fdf-stat {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1rem;
  padding: 0.9rem 0.6rem;
  text-align: center;
}
.w6fdf-stat-num { font-size: 1.7rem; font-weight: 800; color: var(--w6fdf-accent-deep); display: block; }
.w6fdf-stat-label { font-size: 1.05rem; color: var(--w6fdf-text-soft); }

.w6fdf-winners {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem;
}
.w6fdf-winner {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 0.8rem; padding: 0.6rem 0.8rem;
  font-size: 1.15rem;
}
.w6fdf-winner b { color: var(--w6fdf-accent-deep); }
.w6fdf-winner small { color: var(--w6fdf-text-soft); display: block; font-size: 1rem; }

/* ============================================================
 * Testimonials
 * ========================================================== */
.w6fdf-reviews { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
.w6fdf-review {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1.2rem; padding: 1rem 1.1rem;
}
.w6fdf-review-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.w6fdf-review-avatar {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--w6fdf-gold-gradient); color: var(--w6fdf-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem;
}
.w6fdf-review-name { font-weight: 700; color: var(--w6fdf-accent); font-size: 1.25rem; }
.w6fdf-stars { color: var(--w6fdf-accent-deep); font-size: 1.1rem; }
.w6fdf-review p { margin: 0; color: var(--w6fdf-text-soft); font-size: 1.2rem; line-height: 1.8rem; }

/* ============================================================
 * Payment methods + app download
 * ========================================================== */
.w6fdf-pay-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
}
.w6fdf-pay {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 0.8rem; padding: 0.7rem 0.4rem;
  text-align: center; font-size: 1rem; color: var(--w6fdf-text-soft); font-weight: 600;
}
.w6fdf-pay i { display: block; color: var(--w6fdf-accent); margin-bottom: 0.2rem; font-size: 1.6rem; }

.w6fdf-app-card {
  background: var(--w6fdf-gradient);
  border-radius: 1.4rem; padding: 1.2rem;
  border: 1px solid var(--w6fdf-border);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.w6fdf-app-card h3 { color: var(--w6fdf-accent); font-size: 1.5rem; margin: 0; }
.w6fdf-app-card p { color: var(--w6fdf-text-soft); font-size: 1.2rem; line-height: 1.8rem; margin: 0; }
.w6fdf-app-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.w6fdf-app-buttons .w6fdf-btn { flex: 1; }

/* ============================================================
 * FAQ accordion
 * ========================================================== */
.w6fdf-faq { display: flex; flex-direction: column; gap: 0.6rem; }
.w6fdf-faq-item {
  background: var(--w6fdf-bg-card);
  border: 1px solid var(--w6fdf-border);
  border-radius: 1rem;
  overflow: hidden;
}
.w6fdf-faq-q {
  padding: 1rem 1.2rem;
  font-size: 1.25rem; font-weight: 700; color: var(--w6fdf-accent);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.w6fdf-faq-q i { color: var(--w6fdf-accent-deep); transition: transform 0.2s ease; }
.w6fdf-faq-open .w6fdf-faq-q i { transform: rotate(45deg); }
.w6fdf-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s ease;
  padding: 0 1.2rem;
  color: var(--w6fdf-text-soft); font-size: 1.2rem; line-height: 1.8rem;
}
.w6fdf-faq-open .w6fdf-faq-a { max-height: 30rem; padding: 0 1.2rem 1rem; }

/* ============================================================
 * Footer
 * ========================================================== */
.w6fdf-footer {
  background: var(--w6fdf-bg-soft);
  border-top: 1px solid var(--w6fdf-border);
  padding: 2rem 1.4rem 8rem;
  margin-top: 2rem;
}
.w6fdf-footer-brand {
  font-size: 1.6rem; font-weight: 800; color: var(--w6fdf-accent); margin-bottom: 0.4rem;
}
.w6fdf-footer-desc { font-size: 1.15rem; color: var(--w6fdf-text-soft); line-height: 1.8rem; margin-bottom: 1rem; }
.w6fdf-footer-promos {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0;
}
.w6fdf-footer-promos .w6fdf-btn {
  padding: 0.5rem 0.9rem; font-size: 1.1rem; min-height: 0;
  border-radius: 1.6rem;
}
.w6fdf-footer-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  margin: 0.8rem 0;
}
.w6fdf-footer-links a {
  font-size: 1.15rem; color: var(--w6fdf-text-soft);
  padding: 0.4rem 0; border-bottom: 1px dashed var(--w6fdf-border);
}
.w6fdf-footer-copy {
  font-size: 1.05rem; color: var(--w6fdf-muted);
  margin-top: 1rem; text-align: center;
}

/* ============================================================
 * Mobile bottom navigation (5 buttons, fixed)
 * ========================================================== */
.w6fdf-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 6rem;
  background: linear-gradient(180deg, rgba(22,22,52,0.98) 0%, rgba(15,15,35,1) 100%);
  border-top: 1px solid var(--w6fdf-border);
  display: flex; justify-content: space-around; align-items: center;
  z-index: 1000;
  padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom));
}
.w6fdf-bottom-nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  background: transparent; border: 0;
  color: var(--w6fdf-text-soft);
  font-size: 1rem; font-weight: 600;
  min-width: 6rem; min-height: 5.2rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.18s ease, transform 0.18s ease;
}
.w6fdf-bottom-nav-btn i,
.w6fdf-bottom-nav-btn span.material-symbols-outlined {
  font-size: 2.2rem;
}
.w6fdf-bottom-nav-btn:active { transform: scale(0.92); }
.w6fdf-bottom-nav-btn .w6fdf-nav-icon-gold { color: var(--w6fdf-accent-deep); }
.w6fdf-nav-active { color: var(--w6fdf-accent); }
.w6fdf-nav-active::after {
  content: ""; position: absolute; top: 0;
  width: 2.4rem; height: 0.25rem; border-radius: 0.2rem;
  background: var(--w6fdf-gold-gradient);
}

/* ---------- Floating back-to-top ---------- */
.w6fdf-back-top {
  position: fixed; right: 1.2rem; bottom: 7.2rem;
  width: 3.8rem; height: 3.8rem; border-radius: 50%;
  background: var(--w6fdf-gold-gradient);
  color: var(--w6fdf-bg);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 999;
}
.w6fdf-back-top-show { opacity: 1; pointer-events: auto; }

/* ============================================================
 * Desktop / wider screens
 * ========================================================== */
@media (min-width: 769px) {
  .w6fdf-bottom-nav { display: none; }
  .w6fdf-header-inner { max-width: 960px; }
  .w6fdf-wrapper { max-width: 960px; }
  .w6fdf-main { padding-bottom: 3rem; }
  .w6fdf-grid { grid-template-columns: repeat(6, 1fr); }
  .w6fdf-tiles { grid-template-columns: repeat(2, 1fr); }
  .w6fdf-reviews { grid-template-columns: repeat(2, 1fr); }
  .w6fdf-winners { grid-template-columns: repeat(4, 1fr); }
  .w6fdf-footer { padding-bottom: 3rem; }
}