/* Casino Plus - design.css | prefix: uifd- | English-PH */
:root{
  --uifd-bg:#333333;
  --uifd-bg2:#262626;
  --uifd-bg3:#1c1c1c;
  --uifd-pink:#FFC0CB;
  --uifd-lilac:#FFB3FF;
  --uifd-salmon:#FF91A4;
  --uifd-mint:#00FF7F;
  --uifd-light:#F5F5F5;
  --uifd-grad:linear-gradient(135deg,#FF91A4 0%,#FFB3FF 50%,#00FF7F 100%);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:62.5%}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  background:var(--uifd-bg);
  color:var(--uifd-light);
  line-height:1.5rem;
  font-size:1.5rem;
  max-width:430px;
  margin:0 auto;
  overflow-x:hidden;
}
a{color:var(--uifd-pink);text-decoration:none}
img{max-width:100%;display:block}
.uifd-container{width:100%;padding:0 1.4rem}

/* ===== Header ===== */
.uifd-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(28,28,28,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,192,203,.18);
  max-width:430px;margin:0 auto;
}
.uifd-header-row{
  display:flex;align-items:center;justify-content:space-between;
  height:6rem;padding:0 1.2rem;
}
.uifd-logo{display:flex;align-items:center;gap:.8rem;color:var(--uifd-light);font-weight:800;font-size:1.9rem;letter-spacing:.3px}
.uifd-logo .uifd-logo-mark{
  width:3.4rem;height:3.4rem;border-radius:10px;background:var(--uifd-grad);
  display:flex;align-items:center;justify-content:center;color:#1c1c1c;font-size:1.8rem;
}
.uifd-logo span{color:var(--uifd-pink)}
.uifd-auth{display:flex;gap:.8rem;align-items:center}
.uifd-btn{
  border:0;cursor:pointer;border-radius:30px;font-weight:700;
  font-size:1.35rem;padding:.85rem 1.5rem;transition:transform .15s ease,box-shadow .15s ease;
  display:inline-flex;align-items:center;gap:.5rem;
}
.uifd-btn:active{transform:scale(.94)}
.uifd-btn-login{background:transparent;color:var(--uifd-light);border:1.5px solid var(--uifd-pink)}
.uifd-btn-register{background:var(--uifd-grad);color:#1c1c1c;box-shadow:0 4px 14px rgba(255,145,164,.4)}
.uifd-btn-hero{background:var(--uifd-grad);color:#1c1c1c;padding:1.3rem 2.4rem;font-size:1.6rem;width:100%;justify-content:center}
.uifd-link-text{font-weight:800;color:var(--uifd-mint);border-bottom:1.5px dashed var(--uifd-mint);padding-bottom:1px;cursor:pointer}

/* ===== Mobile menu ===== */
.uifd-menu-toggle{
  background:transparent;border:0;color:var(--uifd-light);font-size:2rem;cursor:pointer;
  width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;
}
.uifd-mobile-menu{
  position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;
  background:var(--uifd-bg3);z-index:9999;transition:right .28s ease;
  padding:2.4rem 1.8rem;overflow-y:auto;box-shadow:-6px 0 30px rgba(0,0,0,.5);
}
.uifd-mobile-menu.uifd-open{right:0}
.uifd-menu-close{background:transparent;border:0;color:var(--uifd-light);font-size:2.4rem;float:right;cursor:pointer}
.uifd-mobile-menu h3{color:var(--uifd-pink);margin:2rem 0 1rem;font-size:1.7rem}
.uifd-mobile-menu a{
  display:block;padding:1.1rem 1rem;border-radius:8px;color:var(--uifd-light);
  border-bottom:1px solid rgba(255,192,203,.08);font-weight:600;
}
.uifd-mobile-menu a:hover{background:rgba(255,145,164,.12);color:var(--uifd-pink)}
.uifd-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;visibility:hidden;transition:.25s;max-width:430px;margin:0 auto;
}
.uifd-overlay.uifd-open{opacity:1;visibility:visible}

/* ===== Layout ===== */
main{padding-top:6rem}
section{padding:2.6rem 0}
.uifd-sec-title{
  display:flex;align-items:center;gap:.9rem;font-size:2rem;font-weight:800;color:var(--uifd-light);
  margin-bottom:1.6rem;
}
.uifd-sec-title::before{content:"";width:6px;height:2.2rem;background:var(--uifd-grad);border-radius:4px}
.uifd-sec-title em{color:var(--uifd-pink);font-style:normal}

/* ===== Hero ===== */
.uifd-hero{
  background:radial-gradient(circle at 20% 10%,rgba(255,145,164,.25),transparent 60%),radial-gradient(circle at 80% 90%,rgba(0,255,127,.18),transparent 55%),var(--uifd-bg2);
  padding:3rem 1.4rem 2.4rem;border-radius:0 0 24px 24px;
  border-bottom:1px solid rgba(255,192,203,.18);
}
.uifd-hero h1{font-size:2.6rem;line-height:1.25;color:var(--uifd-light);margin-bottom:1rem;font-weight:900}
.uifd-hero h1 span{background:var(--uifd-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.uifd-hero p{color:#e9e9e9;margin-bottom:1.8rem;font-size:1.45rem}
.uifd-hero-cta{display:flex;flex-direction:column;gap:1rem}
.uifd-hero-stats{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.uifd-stat{flex:1;min-width:9rem;background:rgba(0,0,0,.32);border:1px solid rgba(255,192,203,.18);padding:1rem;border-radius:12px;text-align:center}
.uifd-stat b{display:block;color:var(--uifd-mint);font-size:1.8rem;font-weight:900}
.uifd-stat small{color:#dcdcdc;font-size:1.2rem}

/* ===== Marquee ===== */
.uifd-marquee{
  background:linear-gradient(90deg,#FF91A4,#FFB3FF);color:#1c1c1c;font-weight:700;
  padding:.8rem 0;overflow:hidden;white-space:nowrap;font-size:1.3rem;
}
.uifd-marquee span{display:inline-block;animation:uifdscroll 22s linear infinite;padding-left:100%}
@keyframes uifdscroll{to{transform:translateX(-100%)}}

/* ===== Category tabs ===== */
.uifd-tabs{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.6rem;margin-bottom:1.4rem;scrollbar-width:none}
.uifd-tabs::-webkit-scrollbar{display:none}
.uifd-tab{
  flex:0 0 auto;padding:.8rem 1.4rem;border-radius:30px;background:var(--uifd-bg2);
  color:var(--uifd-light);font-size:1.3rem;font-weight:700;border:1px solid rgba(255,192,203,.15);cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;
}
.uifd-tab.uifd-active{background:var(--uifd-grad);color:#1c1c1c;border-color:transparent}

/* ===== Game grid ===== */
.uifd-game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.uifd-game-card{
  background:var(--uifd-bg2);border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,192,203,.1);transition:transform .15s ease,box-shadow .15s ease;position:relative;
}
.uifd-game-card:active{transform:scale(.96)}
.uifd-game-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#000}
.uifd-game-card .uifd-game-name{
  padding:.6rem .5rem;font-size:1.1rem;color:var(--uifd-light);text-align:center;
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uifd-game-card .uifd-badge{
  position:absolute;top:.4rem;left:.4rem;background:var(--uifd-salmon);color:#1c1c1c;
  font-size:1rem;font-weight:800;padding:.1rem .5rem;border-radius:6px;
}
.uifd-game-card .uifd-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(28,28,28,.55);color:var(--uifd-mint);font-size:2.4rem;opacity:0;transition:.2s;
}
.uifd-game-card:hover .uifd-play{opacity:1}

/* ===== Promo / Feature ===== */
.uifd-feature{
  display:flex;gap:1.2rem;background:var(--uifd-bg2);border-radius:14px;padding:1.4rem;
  border:1px solid rgba(255,192,203,.12);margin-bottom:1.2rem;align-items:center;
}
.uifd-feature .uifd-ficon{
  width:5rem;height:5rem;border-radius:12px;background:rgba(255,145,164,.15);
  display:flex;align-items:center;justify-content:center;color:var(--uifd-pink);font-size:2.4rem;flex:0 0 auto;
}
.uifd-feature h3{font-size:1.5rem;color:var(--uifd-light);margin-bottom:.3rem}
.uifd-feature p{color:#dcdcdc;font-size:1.25rem}

/* ===== FAQ ===== */
.uifd-faq-item{background:var(--uifd-bg2);border-radius:10px;margin-bottom:.8rem;overflow:hidden;border:1px solid rgba(255,192,203,.1)}
.uifd-faq-q{padding:1.2rem 1.4rem;font-weight:700;color:var(--uifd-pink);display:flex;justify-content:space-between;cursor:pointer;font-size:1.4rem}
.uifd-faq-q .uifd-ico{transition:transform .2s}
.uifd-faq-item.uifd-open .uifd-ico{transform:rotate(45deg)}
.uifd-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 1.4rem;color:#dcdcdc;font-size:1.3rem}
.uifd-faq-item.uifd-open .uifd-faq-a{max-height:260px;padding:.2rem 1.4rem 1.2rem}

/* ===== SEO content ===== */
.uifd-seo{background:var(--uifd-bg2);border-radius:14px;padding:1.8rem;border:1px solid rgba(255,192,203,.1);font-size:1.35rem;color:#e3e3e3}
.uifd-seo h2{color:var(--uifd-light);margin:1.4rem 0 .6rem;font-size:1.8rem}
.uifd-seo h2:first-child{margin-top:0}
.uifd-seo h3{color:var(--uifd-pink);margin:1.2rem 0 .4rem;font-size:1.55rem}
.uifd-seo p{margin-bottom:.8rem}
.uifd-seo a{color:var(--uifd-mint);font-weight:700;border-bottom:1px dashed var(--uifd-mint)}

/* ===== CTA strip ===== */
.uifd-cta{background:var(--uifd-grad);border-radius:14px;padding:2rem 1.6rem;text-align:center;margin:1.6rem 0}
.uifd-cta h3{color:#1c1c1c;font-size:1.9rem;margin-bottom:.4rem}
.uifd-cta p{color:#262626;margin-bottom:1.2rem;font-weight:600}

/* ===== Footer ===== */
.uifd-footer{background:var(--uifd-bg3);padding:2.4rem 1.4rem 9rem;border-top:1px solid rgba(255,192,203,.15)}
.uifd-footer h4{color:var(--uifd-pink);margin-bottom:.8rem;font-size:1.5rem}
.uifd-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.6rem}
.uifd-footer-links a{color:#dcdcdc;font-size:1.25rem;font-weight:600}
.uifd-footer-links a:hover{color:var(--uifd-mint)}
.uifd-footer-bottom{border-top:1px solid rgba(255,192,203,.1);padding-top:1.2rem;color:#bdbdbd;font-size:1.15rem;text-align:center}
.uifd-18plus{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--uifd-pink);border-radius:6px;padding:.2rem .6rem;color:var(--uifd-pink);font-weight:700;font-size:1.1rem;margin-bottom:.6rem}

/* ===== Bottom nav ===== */
.uifd-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;max-width:430px;margin:0 auto;
  height:6.4rem;background:rgba(28,28,28,.98);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,192,203,.22);
  display:flex;justify-content:space-around;align-items:center;
  border-radius:18px 18px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.4);
}
.uifd-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#bdbdbd;font-size:1.05rem;font-weight:700;gap:.25rem;height:100%;cursor:pointer;
  position:relative;transition:color .2s;text-decoration:none;
}
.uifd-bottomnav a .uifd-ic{font-size:2.2rem;transition:transform .2s}
.uifd-bottomnav a.uifd-active{color:var(--uifd-pink)}
.uifd-bottomnav a.uifd-active .uifd-ic{transform:translateY(-2px) scale(1.1)}
.uifd-bottomnav a.uifd-center{
  flex:1.2;background:var(--uifd-grad);color:#1c1c1c;border-radius:50%;width:5rem;height:5rem;
  margin-top:-2.4rem;box-shadow:0 4px 14px rgba(255,145,164,.5);border:3px solid var(--uifd-bg3);
}
.uifd-bottomnav a.uifd-center .uifd-ic{font-size:2.6rem}

/* ===== Carousel ===== */
.uifd-carousel{position:relative;overflow:hidden;border-radius:0 0 16px 16px}
.uifd-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.uifd-carousel-track::-webkit-scrollbar{display:none}
.uifd-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;cursor:pointer}
.uifd-slide img{width:100%;height:18rem;object-fit:cover}
.uifd-slide-cap{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.4rem;background:linear-gradient(transparent,rgba(0,0,0,.75));color:var(--uifd-light);font-weight:700;font-size:1.4rem}

/* ===== Cards / promo blocks ===== */
.uifd-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.uifd-mini-card{background:var(--uifd-bg2);border-radius:12px;padding:1.2rem;border:1px solid rgba(255,192,203,.12);text-align:center}
.uifd-mini-card .uifd-ic{font-size:2.4rem;color:var(--uifd-mint);margin-bottom:.4rem}
.uifd-mini-card h3{font-size:1.35rem;color:var(--uifd-pink);margin-bottom:.3rem}
.uifd-mini-card p{font-size:1.2rem;color:#dcdcdc}
.uifd-rtp-row{display:flex;justify-content:space-between;align-items:center;background:var(--uifd-bg2);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.7rem;border:1px solid rgba(255,192,203,.1)}
.uifd-rtp-row b{color:var(--uifd-mint)}
.uifd-winner{display:flex;gap:1rem;align-items:center;background:var(--uifd-bg2);border-radius:10px;padding:1rem;margin-bottom:.7rem;border:1px solid rgba(255,192,203,.1)}
.uifd-winner .uifd-av{width:4rem;height:4rem;border-radius:50%;background:var(--uifd-grad);display:flex;align-items:center;justify-content:center;color:#1c1c1c;font-weight:900;flex:0 0 auto}
.uifd-pay-row{display:flex;flex-wrap:wrap;gap:.7rem}
.uifd-pay-chip{background:var(--uifd-bg2);border:1px solid rgba(255,192,203,.15);border-radius:20px;padding:.6rem 1.2rem;font-size:1.25rem;font-weight:700;color:var(--uifd-light)}
.uifd-review{background:var(--uifd-bg2);border-radius:12px;padding:1.4rem;margin-bottom:1rem;border-left:4px solid var(--uifd-salmon)}
.uifd-review .uifd-stars{color:#FFD700;margin-bottom:.4rem;font-size:1.3rem}
.uifd-review p{color:#e3e3e3;font-size:1.3rem;margin-bottom:.5rem}
.uifd-review small{color:#bdbdbd}
.uifd-promo-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0}
.uifd-promo-btns .uifd-btn{font-size:1.25rem;padding:.75rem 1.3rem}

@media (min-width:769px){
  .uifd-bottomnav{display:none}
  .uifd-menu-toggle{display:none}
}
@media (max-width:768px){
  main{padding-bottom:8rem}
}