/* ============================================================
   phplay88.homes - Core Stylesheet
   Mobile-first HTML5 casino gaming website (PH market)
   Prefix: w4975- | Palette: #2E4057 | #9400D3
   ============================================================ */

:root{
  --w4975-bg:#2E4057;          /* deep slate background */
  --w4975-bg-soft:#1f2d3d;     /* darker shade */
  --w4975-bg-card:#34495f;     /* card surface */
  --w4975-primary:#9400D3;     /* purple accent */
  --w4975-primary-2:#b54cff;   /* lighter purple */
  --w4975-gold:#FFC93C;        /* highlight gold */
  --w4975-text:#FFFFFF;
  --w4975-text-soft:#cdd6e0;
  --w4975-text-muted:#8c9bb0;
  --w4975-success:#22c55e;
  --w4975-danger:#ef4444;
  --w4975-radius:1.2rem;
  --w4975-radius-sm:0.8rem;
  --w4975-shadow:0 0.4rem 1.6rem rgba(0,0,0,0.35);
  --w4975-gradient:linear-gradient(135deg,#9400D3 0%,#b54cff 60%,#FFC93C 140%);
  --w4975-header-h:5.6rem;
  --w4975-bottom-h:6.2rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
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(--w4975-bg);
  color:var(--w4975-text);
  line-height:1.5rem;
  font-size:1.4rem;
  max-width:430px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  background-image:radial-gradient(circle at 15% 8%,rgba(148,0,211,0.18),transparent 40%),radial-gradient(circle at 90% 80%,rgba(255,201,60,0.10),transparent 35%);
}
a{color:var(--w4975-gold);text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ============ Layout ============ */
.w4975-wrapper{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem}
.w4975-container{padding:1.5rem 1.2rem}
.w4975-section{margin:2rem 0;padding:1.6rem 1.2rem;background:var(--w4975-bg-soft);border-radius:var(--w4975-radius);box-shadow:var(--w4975-shadow)}
.w4975-section-title{font-size:1.9rem;font-weight:800;color:var(--w4975-text);margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem}
.w4975-section-title i{color:var(--w4975-primary-2)}
.w4975-eyebrow{font-size:1.15rem;color:var(--w4975-primary-2);font-weight:700;text-transform:uppercase;letter-spacing:0.08rem}
.w4975-text-soft{color:var(--w4975-text-soft)}
.w4975-text-muted{color:var(--w4975-text-muted)}
.w4975-text p{margin-bottom:0.8rem;color:var(--w4975-text-soft)}
.w4975-hidden{display:none !important}

/* ============ Header ============ */
.w4975-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--w4975-header-h);
  background:linear-gradient(90deg,var(--w4975-bg-soft) 0%,#3a2347 100%);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;z-index:1000;box-shadow:0 0.2rem 1rem rgba(0,0,0,0.45);
  border-bottom:0.2rem solid var(--w4975-primary);
}
.w4975-brand{display:flex;align-items:center;gap:0.6rem;cursor:pointer}
.w4975-brand-logo{width:3rem;height:3rem;border-radius:0.6rem;object-fit:cover;border:0.15rem solid var(--w4975-primary-2)}
.w4975-brand-name{font-size:1.7rem;font-weight:900;color:var(--w4975-text);letter-spacing:-0.02rem}
.w4975-brand-name span{color:var(--w4975-primary-2)}
.w4975-header-actions{display:flex;align-items:center;gap:0.5rem}
.w4975-menu-btn{background:transparent;color:var(--w4975-text);border:none;font-size:2.2rem;cursor:pointer;padding:0.4rem 0.6rem;border-radius:0.6rem}
.w4975-menu-btn:active{background:rgba(148,0,211,0.25)}

/* ============ Buttons ============ */
.w4975-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  font-family:inherit;font-weight:700;font-size:1.25rem;border:none;cursor:pointer;
  padding:0.8rem 1.2rem;border-radius:2rem;text-decoration:none;
  min-height:4rem;min-width:4rem;line-height:1;transition:transform .15s ease,box-shadow .2s ease;
}
.w4975-btn:active{transform:scale(0.95)}
.w4975-btn-primary{background:var(--w4975-gradient);color:#fff;box-shadow:0 0.3rem 0.8rem rgba(148,0,211,0.5)}
.w4975-btn-gold{background:linear-gradient(135deg,#FFC93C,#ff9c2a);color:#3a1d00}
.w4975-btn-ghost{background:transparent;color:var(--w4975-text);border:0.15rem solid var(--w4975-primary-2)}
.w4975-btn-sm{padding:0.55rem 1rem;font-size:1.1rem;min-height:3.2rem;border-radius:1.6rem}
.w4975-btn-block{display:flex;width:100%}
.w4975-link-text{color:var(--w4975-gold);font-weight:700;text-decoration:underline}

/* ============ Mobile Menu Drawer ============ */
.w4975-drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s}
.w4975-drawer-mask.w4975-open{opacity:1;visibility:visible}
.w4975-drawer{
  position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
  background:var(--w4975-bg-soft);z-index:9999;transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);padding:2rem 1.6rem;overflow-y:auto;
  border-left:0.2rem solid var(--w4975-primary);
}
.w4975-drawer.w4975-open{transform:translateX(0)}
.w4975-drawer-title{font-size:1.5rem;font-weight:800;color:var(--w4975-primary-2);margin-bottom:1.2rem;text-transform:uppercase}
.w4975-drawer-menu li{margin-bottom:0.4rem}
.w4975-drawer-menu a,.w4975-drawer-menu button{
  display:flex;align-items:center;gap:0.8rem;width:100%;
  padding:1.1rem 1rem;background:var(--w4975-bg-card);border-radius:1rem;
  color:var(--w4975-text);font-size:1.3rem;font-weight:600;cursor:pointer;
  border:none;font-family:inherit;text-align:left;
}
.w4975-drawer-menu a:active,.w4975-drawer-menu button:active{background:var(--w4975-primary)}
.w4975-drawer-menu i{color:var(--w4975-gold);width:2rem;text-align:center;font-size:1.5rem}
.w4975-drawer-cta{margin-top:1.2rem;display:flex;flex-direction:column;gap:0.8rem}

/* ============ Hero / Carousel ============ */
.w4975-hero{margin-top:var(--w4975-header-h);position:relative}
.w4975-carousel{position:relative;overflow:hidden;border-radius:0 0 1.6rem 1.6rem;box-shadow:var(--w4975-shadow)}
.w4975-carousel-track{display:flex;transition:transform .45s ease}
.w4975-carousel-slide{flex:0 0 100%;position:relative;cursor:pointer}
.w4975-carousel-slide img{width:100%;height:18rem;object-fit:cover;border-radius:0 0 1.6rem 1.6rem}
.w4975-carousel-caption{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(46,64,87,0.85);padding:0.6rem 1rem;border-radius:1rem;border-left:0.25rem solid var(--w4975-primary-2)}
.w4975-carousel-caption strong{display:block;font-size:1.35rem;color:var(--w4975-gold)}
.w4975-carousel-caption span{font-size:1.05rem;color:var(--w4975-text-soft)}
.w4975-carousel-dots{position:absolute;bottom:0.8rem;right:1.2rem;display:flex;gap:0.4rem}
.w4975-carousel-dots button{width:0.7rem;height:0.7rem;border-radius:50%;border:none;background:rgba(255,255,255,0.4);cursor:pointer;padding:0}
.w4975-carousel-dots button.w4975-active{background:var(--w4975-primary-2);width:1.6rem;border-radius:0.5rem}
.w4975-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(148,0,211,0.7);color:#fff;border:none;width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;z-index:2}
.w4975-carousel-arrow.w4975-prev{left:0.6rem}
.w4975-carousel-arrow.w4975-next{right:0.6rem}

/* ============ Trust badges strip ============ */
.w4975-trust{display:flex;justify-content:space-around;gap:0.5rem;padding:1rem;background:var(--w4975-bg-soft);border-radius:1rem;margin-top:1.2rem}
.w4975-trust-item{flex:1;text-align:center}
.w4975-trust-item i{font-size:1.8rem;color:var(--w4975-gold)}
.w4975-trust-item strong{display:block;font-size:1.2rem;color:var(--w4975-text);margin-top:0.2rem}
.w4975-trust-item span{font-size:1rem;color:var(--w4975-text-muted)}

/* ============ Game grid (compact) ============ */
.w4975-cat-head{display:flex;align-items:center;justify-content:space-between;margin:2rem 0 1rem;padding:0 0.4rem}
.w4975-cat-head h2{font-size:1.55rem;font-weight:800;color:var(--w4975-text);display:flex;align-items:center;gap:0.5rem}
.w4975-cat-head h2 i{color:var(--w4975-primary-2)}
.w4975-cat-tag{background:var(--w4975-primary);color:#fff;font-size:1rem;font-weight:700;padding:0.3rem 0.8rem;border-radius:1rem}
.w4975-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;margin-bottom:1rem}
.w4975-game-card{background:var(--w4975-bg-card);border-radius:1rem;padding:0.6rem;text-align:center;cursor:pointer;border:0.1rem solid transparent;transition:border-color .2s,transform .15s;position:relative;overflow:hidden}
.w4975-game-card:active{transform:scale(0.96);border-color:var(--w4975-primary-2)}
.w4975-game-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0.7rem;margin-bottom:0.4rem}
.w4975-game-card .w4975-game-name{font-size:1.05rem;color:var(--w4975-text);font-weight:600;line-height:1.2rem;height:2.4rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.w4975-game-card .w4975-hot-badge{position:absolute;top:0.3rem;right:0.3rem;background:var(--w4975-danger);color:#fff;font-size:0.85rem;font-weight:700;padding:0.1rem 0.4rem;border-radius:0.5rem}

/* ============ Info cards ============ */
.w4975-card{background:var(--w4975-bg-card);border-radius:var(--w4975-radius-sm);padding:1.2rem;margin-bottom:1rem;border-left:0.25rem solid var(--w4975-primary)}
.w4975-card h3{font-size:1.4rem;color:var(--w4975-text);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem}
.w4975-card h3 i{color:var(--w4975-gold)}
.w4975-card p,.w4975-card li{color:var(--w4975-text-soft);font-size:1.2rem;line-height:1.6rem}
.w4975-card ul{padding-left:1.4rem}
.w4975-card ul li{margin-bottom:0.3rem;list-style:disc}
.w4975-step-list li{display:flex;gap:0.8rem;margin-bottom:0.9rem;align-items:flex-start}
.w4975-step-num{flex-shrink:0;width:2.2rem;height:2.2rem;background:var(--w4975-gradient);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem}
.w4975-faq-item{background:var(--w4975-bg-card);border-radius:0.8rem;margin-bottom:0.8rem;overflow:hidden}
.w4975-faq-q{padding:1rem 1.2rem;font-weight:700;color:var(--w4975-text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:0.6rem;font-size:1.25rem}
.w4975-faq-q i{color:var(--w4975-primary-2);transition:transform .2s}
.w4975-faq-q.w4975-open i{transform:rotate(180deg)}
.w4975-faq-a{padding:0 1.2rem 1.1rem;color:var(--w4975-text-soft);font-size:1.15rem;line-height:1.6rem}

/* ============ RTP table ============ */
.w4975-rtp-table{width:100%;border-collapse:collapse;font-size:1.1rem;background:var(--w4975-bg-card);border-radius:0.8rem;overflow:hidden}
.w4975-rtp-table th,.w4975-rtp-table td{padding:0.7rem 0.8rem;text-align:left;border-bottom:0.1rem solid rgba(255,255,255,0.06)}
.w4975-rtp-table th{background:var(--w4975-primary);color:#fff;font-size:1.05rem}
.w4975-rtp-table td.w4975-rtp-high{color:var(--w4975-success);font-weight:700}
.w4975-rtp-table tr:last-child td{border-bottom:none}

/* ============ Winners / Testimonials ============ */
.w4975-winners{display:flex;gap:0.6rem;overflow-x:auto;padding-bottom:0.5rem;scrollbar-width:thin}
.w4975-winner{flex:0 0 auto;background:var(--w4975-bg-card);border-radius:0.8rem;padding:0.8rem 1rem;border-left:0.2rem solid var(--w4975-gold);min-width:14rem}
.w4975-winner strong{display:block;color:var(--w4975-gold);font-size:1.2rem}
.w4975-winner span{font-size:1.05rem;color:var(--w4975-text-soft)}
.w4975-testi{background:var(--w4975-bg-card);border-radius:0.8rem;padding:1rem;margin-bottom:0.8rem;border-top:0.2rem solid var(--w4975-primary-2)}
.w4975-testi-head{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem}
.w4975-testi-avatar{width:3rem;height:3rem;border-radius:50%;background:var(--w4975-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.2rem}
.w4975-testi-name{font-weight:700;color:var(--w4975-text);font-size:1.2rem}
.w4975-testi-stars{color:var(--w4975-gold);font-size:1rem}
.w4975-testi p{color:var(--w4975-text-soft);font-size:1.15rem;line-height:1.5rem}

/* ============ Payments / App CTA ============ */
.w4975-pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.6rem}
.w4975-pay-item{background:var(--w4975-bg-card);border-radius:0.7rem;padding:0.7rem;text-align:center;font-size:0.95rem;color:var(--w4975-text-soft)}
.w4975-pay-item i{font-size:1.8rem;color:var(--w4975-gold);display:block;margin-bottom:0.3rem}
.w4975-app-cta{background:linear-gradient(135deg,rgba(148,0,211,0.25),rgba(255,201,60,0.12));border-radius:var(--w4975-radius);padding:1.4rem;display:flex;gap:1rem;align-items:center;border:0.15rem solid var(--w4975-primary)}
.w4975-app-cta-text{flex:1}
.w4975-app-cta-text h3{font-size:1.4rem;color:var(--w4975-text);margin-bottom:0.3rem}
.w4975-app-cta-text p{font-size:1.1rem;color:var(--w4975-text-soft);margin-bottom:0.6rem}
.w4975-app-cta-icon{font-size:3.4rem;color:var(--w4975-gold)}

/* ============ CTA banner ============ */
.w4975-cta-banner{background:var(--w4975-gradient);border-radius:var(--w4975-radius);padding:1.8rem 1.4rem;text-align:center;margin:2rem 0}
.w4975-cta-banner h3{font-size:1.8rem;color:#fff;margin-bottom:0.5rem}
.w4975-cta-banner p{color:rgba(255,255,255,0.9);font-size:1.2rem;margin-bottom:1.2rem}

/* ============ Footer ============ */
.w4975-footer{background:var(--w4975-bg-soft);padding:2rem 1.2rem calc(var(--w4975-bottom-h) + 2rem);margin-top:2rem;border-top:0.25rem solid var(--w4975-primary)}
.w4975-footer-brand{font-size:1.7rem;font-weight:900;color:var(--w4975-text);margin-bottom:0.5rem}
.w4975-footer-brand span{color:var(--w4975-primary-2)}
.w4975-footer-desc{color:var(--w4975-text-muted);font-size:1.1rem;line-height:1.5rem;margin-bottom:1.2rem}
.w4975-footer-links{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.2rem}
.w4975-footer-links a{flex:1 1 45%;background:var(--w4975-bg-card);padding:0.7rem 0.9rem;border-radius:0.7rem;font-size:1.1rem;color:var(--w4975-text-soft);text-align:center}
.w4975-footer-promos{display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem;margin:1rem 0}
.w4975-footer-promos .w4975-btn{font-size:1.15rem}
.w4975-footer-copy{text-align:center;color:var(--w4975-text-muted);font-size:1rem;border-top:0.1rem solid rgba(255,255,255,0.08);padding-top:1rem}

/* ============ Mobile bottom nav ============ */
.w4975-bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--w4975-bottom-h);
  background:linear-gradient(180deg,#3a2347 0%,var(--w4975-bg-soft) 100%);
  display:flex;justify-content:space-around;align-items:center;
  z-index:1000;box-shadow:0 -0.2rem 1rem rgba(0,0,0,0.5);
  border-top:0.2rem solid var(--w4975-primary);padding:0.3rem 0.2rem;
}
.w4975-bottom-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;color:var(--w4975-text-muted);
  font-family:inherit;font-size:1rem;font-weight:600;gap:0.2rem;
  padding:0.4rem 0.2rem;border-radius:0.6rem;transition:color .2s,transform .15s;min-height:5rem;min-width:5rem;position:relative;
}
.w4975-bottom-btn:active{transform:scale(0.92)}
.w4975-bottom-btn i{font-size:2.2rem}
.w4975-bottom-btn .w4975-material{font-size:2.3rem}
.w4975-bottom-btn.w4975-active{color:var(--w4975-primary-2)}
.w4975-bottom-btn.w4975-active::before{content:'';position:absolute;top:0;width:2.4rem;height:0.25rem;background:var(--w4975-gold);border-radius:0 0 0.3rem 0.3rem}
.w4975-bottom-btn.w4975-promo i{color:var(--w4975-gold)}
.w4975-bottom-badge{position:absolute;top:0.4rem;right:1rem;background:var(--w4975-danger);color:#fff;font-size:0.85rem;font-weight:700;min-width:1.5rem;height:1.5rem;padding:0 0.3rem;border-radius:1rem;display:flex;align-items:center;justify-content:center}

/* ============ Desktop & Responsive ============ */
@media(min-width:769px){
  .w4975-bottom-nav{display:none}
  .w4975-footer{padding-bottom:2rem}
}
@media(max-width:768px){
  body{padding-bottom:calc(var(--w4975-bottom-h) + 1rem)}
}
@media(max-width:380px){
  .w4975-game-grid{grid-template-columns:repeat(2,1fr)}
  .w4975-pay-grid{grid-template-columns:repeat(3,1fr)}
  .w4975-brand-name{font-size:1.5rem}
}