/* ============================================================
   jl36.homes - Core stylesheet (prefix: w2f25-)
   Mobile-first gaming site, English-PH
   Palette: #AFEEEE / #6F4E37 / #FFA500 / #FFEB3B / #333333 / #C0C0C0
   ============================================================ */

:root{
  --w2f25-primary:#FFA500;
  --w2f25-secondary:#FFEB3B;
  --w2f25-accent:#AFEEEE;
  --w2f25-brown:#6F4E37;
  --w2f25-bg:#333333;
  --w2f25-bg-2:#1f1f1f;
  --w2f25-silver:#C0C0C0;
  --w2f25-text:#FFFFFF;
  --w2f25-muted:#BDBDBD;
  --w2f25-radius:12px;
  --w2f25-shadow:0 4px 18px rgba(0,0,0,.45);
  --w2f25-header-h:56px;
  --w2f25-bottomnav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--w2f25-bg);
  color:var(--w2f25-text);
  line-height:1.5rem;
  font-size:1.4rem;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--w2f25-secondary);text-decoration:none;}
ul,ol{list-style:none;}

/* ---------- Container / Wrapper ---------- */
.w2f25-container{max-width:430px;margin:0 auto;padding:0 12px;}
.w2f25-wrapper{max-width:430px;margin:0 auto;background:var(--w2f25-bg-2);min-height:100vh;position:relative;}
.w2f25-section{padding:18px 12px;}
.w2f25-section h2{font-size:2rem;color:var(--w2f25-secondary);margin-bottom:10px;letter-spacing:.5px;}
.w2f25-section h3{font-size:1.7rem;color:var(--w2f25-accent);margin:10px 0 6px;}
.w2f25-section p{color:var(--w2f25-muted);margin-bottom:10px;font-size:1.4rem;}

/* ---------- Header ---------- */
.w2f25-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--w2f25-header-h);
  background:linear-gradient(90deg,#222 0%,#333 60%,#6F4E37 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;z-index:1000;box-shadow:var(--w2f25-shadow);
}
.w2f25-logo{display:flex;align-items:center;gap:8px;color:var(--w2f25-secondary);font-weight:800;font-size:1.7rem;}
.w2f25-logo .w2f25-logo-ico{width:26px;height:26px;border-radius:6px;object-fit:cover;}
.w2f25-logo .dot{color:var(--w2f25-primary);}
.w2f25-header-actions{display:flex;align-items:center;gap:8px;}
.w2f25-btn{
  border:none;border-radius:20px;padding:8px 16px;font-size:1.3rem;
  font-weight:700;cursor:pointer;min-height:36px;display:inline-flex;
  align-items:center;gap:6px;transition:transform .15s,box-shadow .15s;
}
.w2f25-btn:hover{transform:translateY(-1px);}
.w2f25-btn-register{background:linear-gradient(90deg,#FFA500,#FFEB3B);color:#333;}
.w2f25-btn-login{background:transparent;color:var(--w2f25-accent);border:1.5px solid var(--w2f25-accent);}
.w2f25-menu-btn{
  background:transparent;border:none;color:var(--w2f25-accent);
  font-size:2.2rem;cursor:pointer;display:flex;align-items:center;
  min-width:44px;min-height:44px;justify-content:center;
}

/* ---------- Mobile slide-down menu ---------- */
.w2f25-mobile-menu{
  position:fixed;top:var(--w2f25-header-h);left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;background:#1c1c1c;border-top:2px solid var(--w2f25-primary);
  z-index:9999;max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.w2f25-mobile-menu.open{max-height:520px;}
.w2f25-mobile-menu ul{padding:8px 12px;}
.w2f25-mobile-menu li{border-bottom:1px solid #2a2a2a;}
.w2f25-mobile-menu a{
  display:flex;align-items:center;gap:10px;padding:12px 6px;
  color:var(--w2f25-text);font-size:1.4rem;font-weight:600;
}
.w2f25-mobile-menu a:hover{color:var(--w2f25-primary);}
.w2f25-mobile-menu .ico{color:var(--w2f25-secondary);font-size:1.8rem;}

/* ---------- Hero / Carousel ---------- */
.w2f25-hero{margin-top:var(--w2f25-header-h);position:relative;}
.w2f25-carousel{position:relative;overflow:hidden;border-radius:0 0 14px 14px;}
.w2f25-slides{display:flex;transition:transform .4s ease;}
.w2f25-slide{min-width:100%;position:relative;}
.w2f25-slide img{width:100%;height:200px;object-fit:cover;}
.w2f25-slide .w2f25-slide-cap{
  position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);
  padding:6px 10px;border-radius:8px;font-size:1.3rem;color:var(--w2f25-secondary);
}
.w2f25-carousel-dots{display:flex;justify-content:center;gap:6px;padding:8px 0;background:#1a1a1a;}
.w2f25-carousel-dots span{
  width:8px;height:8px;border-radius:50%;background:#555;cursor:pointer;
}
.w2f25-carousel-dots span.active{background:var(--w2f25-primary);}

/* ---------- CTA buttons ---------- */
.w2f25-cta{
  display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#FFA500,#FFEB3B);
  color:#222;font-weight:800;padding:10px 20px;border-radius:24px;min-height:44px;
  border:none;cursor:pointer;font-size:1.4rem;box-shadow:0 4px 14px rgba(255,165,0,.35);
  transition:transform .15s;
}
.w2f25-cta:hover{transform:scale(1.03);}
.w2f25-cta.outline{background:transparent;color:var(--w2f25-accent);border:2px solid var(--w2f25-accent);}
.w2f25-cta-block{display:flex;justify-content:center;padding:14px 0;}

/* ---------- Game grid ---------- */
.w2f25-game-block{padding:14px 12px;}
.w2f25-game-block h2{
  display:flex;align-items:center;gap:8px;font-size:1.9rem;color:var(--w2f25-secondary);
  border-left:5px solid var(--w2f25-primary);padding-left:8px;margin-bottom:12px;
}
.w2f25-game-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.w2f25-game-card{
  background:#262626;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid #333;transition:transform .15s,border-color .15s;
}
.w2f25-game-card:hover{transform:translateY(-3px);border-color:var(--w2f25-primary);}
.w2f25-game-card img{width:100%;height:88px;object-fit:cover;}
.w2f25-game-card .w2f25-game-name{
  padding:6px;text-align:center;font-size:1.15rem;color:var(--w2f25-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;
}

/* ---------- Info / generic cards ---------- */
.w2f25-card{
  background:#262626;border-radius:var(--w2f25-radius);padding:14px;margin-bottom:12px;
  border:1px solid #333;box-shadow:var(--w2f25-shadow);
}
.w2f25-card h3{color:var(--w2f25-accent);}
.w2f25-list{margin:8px 0;}
.w2f25-list li{padding:6px 0 6px 22px;position:relative;color:var(--w2f25-muted);font-size:1.35rem;}
.w2f25-list li:before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--w2f25-primary);position:absolute;left:0;}

/* ---------- RTP table ---------- */
.w2f25-rtp-table{width:100%;border-collapse:collapse;font-size:1.3rem;margin:8px 0;}
.w2f25-rtp-table th,.w2f25-rtp-table td{padding:8px;border-bottom:1px solid #333;text-align:center;}
.w2f25-rtp-table th{background:#6F4E37;color:#fff;font-weight:700;}
.w2f25-rtp-table tr:hover td{background:#2a2a2a;}

/* ---------- Features grid ---------- */
.w2f25-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.w2f25-feature{background:#262626;border-radius:10px;padding:12px;text-align:center;border:1px solid #333;}
.w2f25-feature .ico{font-size:2.4rem;color:var(--w2f25-primary);margin-bottom:6px;}
.w2f25-feature h4{font-size:1.4rem;color:var(--w2f25-secondary);margin-bottom:4px;}
.w2f25-feature p{font-size:1.2rem;color:var(--w2f25-muted);margin:0;}

/* ---------- Testimonials ---------- */
.w2f25-testi{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x mandatory;}
.w2f25-testi-card{min-width:78%;background:#262626;border-radius:10px;padding:12px;border:1px solid #333;scroll-snap-align:start;}
.w2f25-testi-card .who{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.w2f25-testi-card .avatar{width:34px;height:34px;border-radius:50%;background:var(--w2f25-brown);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;}
.w2f25-testi-card .stars{color:var(--w2f25-secondary);}

/* ---------- Winners ---------- */
.w2f25-winners{display:flex;flex-direction:column;gap:8px;}
.w2f25-winner{display:flex;align-items:center;justify-content:space-between;background:#262626;padding:10px 12px;border-radius:8px;border:1px solid #333;}
.w2f25-winner .name{font-size:1.3rem;color:var(--w2f25-accent);font-weight:700;}
.w2f25-winner .amt{font-size:1.4rem;color:var(--w2f25-primary);font-weight:800;}

/* ---------- Payment ---------- */
.w2f25-pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.w2f25-pay{background:#2a2a2a;border-radius:8px;padding:10px 4px;text-align:center;border:1px solid #444;font-size:1.1rem;color:var(--w2f25-muted);}
.w2f25-pay .ico{font-size:2rem;color:var(--w2f25-secondary);}

/* ---------- App CTA ---------- */
.w2f25-app-cta{background:linear-gradient(90deg,#6F4E37,#333);border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;border:1px solid var(--w2f25-primary);}
.w2f25-app-cta .ico{font-size:3rem;color:var(--w2f25-secondary);}
.w2f25-app-cta h3{color:var(--w2f25-secondary);margin-bottom:4px;}
.w2f25-app-cta p{margin:0;font-size:1.25rem;}

/* ---------- FAQ ---------- */
.w2f25-faq{background:#262626;border-radius:10px;margin-bottom:8px;border:1px solid #333;overflow:hidden;}
.w2f25-faq summary{padding:12px;cursor:pointer;font-weight:700;color:var(--w2f25-accent);font-size:1.35rem;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.w2f25-faq summary::-webkit-details-marker{display:none;}
.w2f25-faq summary .q-ico{color:var(--w2f25-primary);}
.w2f25-faq p{padding:0 12px 12px;color:var(--w2f25-muted);font-size:1.3rem;}

/* ---------- Footer ---------- */
.w2f25-footer{background:#1a1a1a;padding:18px 12px calc(var(--w2f25-bottomnav-h) + 18px);}
.w2f25-footer p.intro{color:var(--w2f25-muted);font-size:1.25rem;margin-bottom:10px;}
.w2f25-footer-links{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.w2f25-footer-links a{background:#2a2a2a;padding:6px 12px;border-radius:16px;font-size:1.15rem;color:var(--w2f25-accent);border:1px solid #444;}
.w2f25-footer-promo{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.w2f25-footer-promo button{background:linear-gradient(90deg,#FFA500,#FFEB3B);color:#222;border:none;border-radius:18px;padding:6px 14px;font-size:1.2rem;font-weight:700;cursor:pointer;min-height:36px;}
.w2f25-footer-copy{text-align:center;color:#666;font-size:1.15rem;border-top:1px solid #2a2a2a;padding-top:10px;}
.w2f25-footer-stats{margin-top:8px;text-align:center;}

/* ---------- Mobile bottom nav ---------- */
.w2f25-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--w2f25-bottomnav-h);background:#1c1c1c;
  border-top:2px solid var(--w2f25-primary);display:flex;justify-content:space-around;
  align-items:center;z-index:1000;
}
.w2f25-bottomnav button{
  background:transparent;border:none;color:var(--w2f25-muted);display:flex;
  flex-direction:column;align-items:center;justify-content:center;min-width:60px;
  min-height:60px;cursor:pointer;flex:1;transition:color .15s,transform .15s;
}
.w2f25-bottomnav button .ico-ic{font-size:2rem;}
.w2f25-bottomnav button .lbl{font-size:1.05rem;margin-top:2px;}
.w2f25-bottomnav button:hover{color:var(--w2f25-primary);transform:translateY(-2px);}
.w2f25-bottomnav button.active{color:var(--w2f25-secondary);}
.w2f25-bottomnav .badge{position:absolute;top:6px;right:18px;background:var(--w2f25-primary);color:#222;font-size:.9rem;font-weight:800;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}

/* ---------- Utility ---------- */
.w2f25-hidden{display:none !important;}
.w2f25-center{text-align:center;}
.w2f25-mt10{margin-top:10px;}
.w2f25-head-line{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--w2f25-primary);font-size:2rem;font-weight:800;}

/* ---------- Desktop ---------- */
@media(min-width:769px){
  .w2f25-bottomnav{display:none;}
  .w2f25-footer{padding-bottom:18px;}
  .w2f25-menu-btn{display:none;}
  body{background:#222;}
}
@media(max-width:768px){
  main{padding-bottom:80px;}
}