/* ============================================================
   phpopular.cyou - layout.css
   Prefix: wcfe3-  |  Variables: --wcfe3-*
   Palette: #D2B48C | #CD853F | #CED4DA | #0E1621 | #BC8F8F
   Mobile-first (max 430px), root font 62.5%, rem units.
   ============================================================ */

:root{
  --wcfe3-primary:#CD853F;
  --wcfe3-secondary:#D2B48C;
  --wcfe3-soft:#BC8F8F;
  --wcfe3-muted:#CED4DA;
  --wcfe3-bg:#0E1621;
  --wcfe3-bg-2:#13202E;
  --wcfe3-bg-3:#1B2C3D;
  --wcfe3-text:#F2E9DC;
  --wcfe3-text-dim:#C9B79A;
  --wcfe3-gold:#E8C384;
  --wcfe3-danger:#E45A4A;
  --wcfe3-success:#4FB477;
  --wcfe3-radius:1.2rem;
  --wcfe3-radius-sm:.8rem;
  --wcfe3-shadow:0 .6rem 1.8rem rgba(0,0,0,.35);
  --wcfe3-header-h:6rem;
  --wcfe3-nav-h:6.4rem;
  --wcfe3-max:430px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:var(--wcfe3-bg);
  color:var(--wcfe3-text);
  line-height:1.5;
  font-size:1.5rem;
  max-width:var(--wcfe3-max);
  margin:0 auto;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--wcfe3-gold);text-decoration:none;}
.wcfe3-container{width:100%;max-width:var(--wcfe3-max);margin:0 auto;padding:0 1.2rem;}
.wcfe3-wrapper{padding:1.6rem 1.2rem;}

/* ===== Header ===== */
.wcfe3-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--wcfe3-max);
  background:linear-gradient(180deg,#0B131C 0%,#0E1621 100%);
  border-bottom:.1rem solid rgba(205,133,63,.35);
  z-index:1000;
  box-shadow:0 .3rem 1rem rgba(0,0,0,.4);
}
.wcfe3-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--wcfe3-header-h);padding:0 1rem;
}
.wcfe3-logo{display:flex;align-items:center;gap:.6rem;}
.wcfe3-logo img{width:3rem;height:3rem;border-radius:.6rem;}
.wcfe3-logo span{
  font-size:1.7rem;font-weight:800;letter-spacing:.05rem;
  background:linear-gradient(90deg,#E8C384,#CD853F);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wcfe3-header-actions{display:flex;align-items:center;gap:.6rem;}
.wcfe3-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:1.3rem;font-weight:700;padding:.7rem 1.4rem;border-radius:2rem;
  border:.1rem solid transparent;cursor:pointer;transition:transform .15s ease,filter .2s ease;
  min-height:3.4rem;line-height:1;
}
.wcfe3-btn:active{transform:scale(.94);}
.wcfe3-btn-login{
  background:transparent;color:var(--wcfe3-gold);
  border-color:var(--wcfe3-primary);
}
.wcfe3-btn-register{
  background:linear-gradient(90deg,#CD853F,#D2B48C);
  color:#0E1621;box-shadow:0 .3rem .8rem rgba(205,133,63,.4);
}
.wcfe3-menu-toggle{
  background:transparent;border:0;color:var(--wcfe3-text);
  font-size:2rem;cursor:pointer;padding:.4rem;display:flex;align-items:center;
}

/* ===== Desktop nav (hidden on mobile) ===== */
.wcfe3-desktop-nav{display:none;}

/* ===== Mobile dropdown menu ===== */
.wcfe3-mobile-menu{
  position:fixed;top:var(--wcfe3-header-h);left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--wcfe3-max);
  background:#0B131C;border-bottom:.1rem solid rgba(205,133,63,.35);
  max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:9999;
}
.wcfe3-mobile-menu.open{max-height:60rem;}
.wcfe3-mobile-menu ul{list-style:none;padding:.6rem 0;}
.wcfe3-mobile-menu li{
  border-bottom:.1rem solid rgba(206,212,218,.08);
}
.wcfe3-mobile-menu a,.wcfe3-mobile-menu .wcfe3-menu-link{
  display:flex;align-items:center;gap:.8rem;padding:1.2rem 1.4rem;
  color:var(--wcfe3-text);font-size:1.4rem;font-weight:600;
}
.wcfe3-mobile-menu a:active,.wcfe3-mobile-menu .wcfe3-menu-link:active{
  background:rgba(205,133,63,.12);color:var(--wcfe3-gold);
}
.wcfe3-mobile-menu i{width:2rem;color:var(--wcfe3-primary);font-size:1.7rem;}

/* ===== Main ===== */
.wcfe3-main{
  margin-top:var(--wcfe3-header-h);padding-bottom:var(--wcfe3-nav-h);
}

/* ===== Hero / Carousel ===== */
.wcfe3-hero{padding:1rem 0 0;}
.wcfe3-carousel{position:relative;border-radius:var(--wcfe3-radius);overflow:hidden;}
.wcfe3-carousel-track{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;}
.wcfe3-carousel-track::-webkit-scrollbar{display:none;}
.wcfe3-carousel-slide{
  flex:0 0 100%;scroll-snap-align:center;position:relative;cursor:pointer;
}
.wcfe3-carousel-slide img{width:100%;height:18rem;object-fit:cover;border-radius:var(--wcfe3-radius);}
.wcfe3-carousel-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;
  background:linear-gradient(0deg,rgba(14,22,33,.92),rgba(14,22,33,0));
}
.wcfe3-carousel-overlay h2{font-size:1.5rem;color:var(--wcfe3-gold);margin-bottom:.3rem;}
.wcfe3-carousel-overlay p{font-size:1.2rem;color:var(--wcfe3-text-dim);}
.wcfe3-carousel-dots{
  display:flex;justify-content:center;gap:.5rem;margin-top:.6rem;
}
.wcfe3-carousel-dots span{
  width:.7rem;height:.7rem;border-radius:50%;background:rgba(206,212,218,.35);transition:all .25s;
}
.wcfe3-carousel-dots span.active{background:var(--wcfe3-primary);width:1.6rem;border-radius:.4rem;}

/* ===== Section ===== */
.wcfe3-section{padding:1.8rem 1.2rem;}
.wcfe3-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;
}
.wcfe3-section-title{
  font-size:1.7rem;font-weight:800;color:var(--wcfe3-gold);
  display:flex;align-items:center;gap:.6rem;
}
.wcfe3-section-title i{color:var(--wcfe3-primary);}
.wcfe3-section-link{font-size:1.2rem;color:var(--wcfe3-secondary);}

/* ===== H1 / Hero text ===== */
.wcfe3-hero-title{
  font-size:2rem;font-weight:900;line-height:1.25;
  color:var(--wcfe3-gold);padding:1rem 1.2rem .4rem;
}
.wcfe3-hero-sub{padding:0 1.2rem 1rem;color:var(--wcfe3-text-dim);font-size:1.3rem;}

/* ===== Game grid ===== */
.wcfe3-game-cat{margin-bottom:1.6rem;}
.wcfe3-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
}
.wcfe3-card{
  background:var(--wcfe3-bg-2);border-radius:var(--wcfe3-radius-sm);
  overflow:hidden;cursor:pointer;border:.1rem solid rgba(205,133,63,.18);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  position:relative;
}
.wcfe3-card:active{transform:scale(.95);border-color:var(--wcfe3-primary);}
.wcfe3-card:hover{box-shadow:var(--wcfe3-shadow);border-color:var(--wcfe3-primary);}
.wcfe3-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0B131C;}
.wcfe3-card-name{
  font-size:1.15rem;font-weight:600;color:var(--wcfe3-text);
  padding:.5rem .6rem .7rem;text-align:center;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.wcfe3-card-tag{
  position:absolute;top:.4rem;left:.4rem;background:rgba(205,133,63,.92);
  color:#0E1621;font-size:1rem;font-weight:700;padding:.15rem .5rem;border-radius:.4rem;
}

/* ===== Content blocks ===== */
.wcfe3-block{
  background:var(--wcfe3-bg-2);border-radius:var(--wcfe3-radius);
  padding:1.4rem;margin-bottom:1.2rem;border:.1rem solid rgba(205,133,63,.12);
}
.wcfe3-block h2{
  font-size:1.7rem;color:var(--wcfe3-gold);margin-bottom:.7rem;font-weight:800;
}
.wcfe3-block h3{font-size:1.45rem;color:var(--wcfe3-secondary);margin:.9rem 0 .5rem;font-weight:700;}
.wcfe3-block p{font-size:1.35rem;color:var(--wcfe3-text);margin-bottom:.7rem;line-height:1.55;}
.wcfe3-block ul{list-style:none;padding-left:0;margin:.5rem 0;}
.wcfe3-block ul li{
  position:relative;padding:.4rem 0 .4rem 1.6rem;font-size:1.32rem;color:var(--wcfe3-text);
}
.wcfe3-block ul li::before{
  content:"\f005";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;color:var(--wcfe3-primary);font-size:1.1rem;
}

/* ===== CTA button ===== */
.wcfe3-cta{
  display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.6rem;text-align:center;
  background:linear-gradient(135deg,#1B2C3D,#13202E);
  border-radius:var(--wcfe3-radius);margin:1.2rem 0;border:.1rem solid rgba(205,133,63,.3);
}
.wcfe3-cta h3{font-size:1.6rem;color:var(--wcfe3-gold);}
.wcfe3-cta p{font-size:1.3rem;color:var(--wcfe3-text-dim);}
.wcfe3-cta .wcfe3-btn{font-size:1.4rem;padding:1rem 2.2rem;}

/* ===== Inline promo link (text) ===== */
.wcfe3-link{
  color:var(--wcfe3-gold);font-weight:700;cursor:pointer;border-bottom:.1rem dashed var(--wcfe3-primary);
}
.wcfe3-link:active{color:var(--wcfe3-primary);}

/* ===== Highlights cards ===== */
.wcfe3-features{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;}
.wcfe3-feature{
  background:var(--wcfe3-bg-3);border-radius:var(--wcfe3-radius-sm);
  padding:1.1rem;text-align:center;border:.1rem solid rgba(205,133,63,.15);
}
.wcfe3-feature i{font-size:2.4rem;color:var(--wcfe3-primary);margin-bottom:.4rem;}
.wcfe3-feature h4{font-size:1.3rem;color:var(--wcfe3-gold);margin-bottom:.3rem;}
.wcfe3-feature p{font-size:1.15rem;color:var(--wcfe3-text-dim);line-height:1.35;}

/* ===== Testimonials ===== */
.wcfe3-testi{display:flex;flex-direction:column;gap:.8rem;}
.wcfe3-testi-item{
  background:var(--wcfe3-bg-3);border-left:.3rem solid var(--wcfe3-primary);
  padding:1rem 1.2rem;border-radius:.6rem;
}
.wcfe3-testi-item p{font-size:1.3rem;color:var(--wcfe3-text);font-style:italic;}
.wcfe3-testi-item .wcfe3-author{font-size:1.15rem;color:var(--wcfe3-gold);margin-top:.4rem;font-weight:700;}

/* ===== Payment chips ===== */
.wcfe3-chips{display:flex;flex-wrap:wrap;gap:.6rem;}
.wcfe3-chip{
  background:var(--wcfe3-bg-3);border:.1rem solid rgba(205,133,63,.25);
  border-radius:2rem;padding:.5rem 1rem;font-size:1.15rem;color:var(--wcfe3-text);
  display:inline-flex;align-items:center;gap:.4rem;
}

/* ===== Winners ticker ===== */
.wcfe3-winners{
  background:#13202E;border-radius:var(--wcfe3-radius-sm);
  padding:.8rem 1rem;display:flex;align-items:center;gap:.6rem;
  border:.1rem solid rgba(205,133,63,.2);overflow:hidden;
}
.wcfe3-winners i{color:var(--wcfe3-gold);font-size:1.5rem;flex-shrink:0;}
.wcfe3-winners-track{display:flex;gap:1.4rem;animation:wcfe3scroll 18s linear infinite;white-space:nowrap;}
.wcfe3-winners-track span{font-size:1.18rem;color:var(--wcfe3-text-dim);}
.wcfe3-winners-track b{color:var(--wcfe3-gold);}
@keyframes wcfe3scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== Footer ===== */
.wcfe3-footer{
  background:#0B131C;border-top:.1rem solid rgba(205,133,63,.3);
  padding:1.8rem 1.2rem 2rem;
}
.wcfe3-footer-brand{font-size:1.3rem;color:var(--wcfe3-text-dim);margin-bottom:1rem;line-height:1.55;}
.wcfe3-footer-promos{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.2rem;
}
.wcfe3-footer-promos .wcfe3-btn{font-size:1.2rem;padding:.7rem .5rem;width:100%;}
.wcfe3-partners{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0 0 1.2rem;}
.wcfe3-partners span{background:var(--wcfe3-bg-2);border:.1rem solid rgba(205,133,63,.22);border-radius:.8rem;padding:.7rem;font-size:1.15rem;color:var(--wcfe3-text-dim);display:flex;align-items:center;gap:.5rem;}
.wcfe3-partners i{color:var(--wcfe3-gold);font-size:1.4rem;}
.wcfe3-footer-links{
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:.1rem solid rgba(206,212,218,.1);
}
.wcfe3-footer-links a{font-size:1.18rem;color:var(--wcfe3-text-dim);}
.wcfe3-footer-links a:active{color:var(--wcfe3-gold);}
.wcfe3-footer-copy{font-size:1.15rem;color:var(--wcfe3-text-dim);text-align:center;}

/* ===== Mobile bottom nav ===== */
.wcfe3-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--wcfe3-max);height:var(--wcfe3-nav-h);
  background:linear-gradient(180deg,#13202E,#0B131C);
  border-top:.1rem solid rgba(205,133,63,.4);
  display:flex;justify-content:space-around;align-items:center;
  z-index:1000;box-shadow:0 -.3rem 1rem rgba(0,0,0,.5);
}
.wcfe3-bottomnav-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:6rem;min-height:5.6rem;background:transparent;border:0;
  color:var(--wcfe3-text-dim);cursor:pointer;padding:.3rem;transition:color .2s,transform .15s;
}
.wcfe3-bottomnav-btn:active{transform:scale(.9);color:var(--wcfe3-gold);}
.wcfe3-bottomnav-btn i{font-size:2.2rem;margin-bottom:.2rem;}
.wcfe3-bottomnav-btn .material-icons,.wcfe3-bottomnav-btn ion-icon{font-size:2.2rem;}
.wcfe3-bottomnav-btn span{font-size:1.05rem;font-weight:600;}
.wcfe3-bottomnav-btn.active{color:var(--wcfe3-primary);}
.wcfe3-bottomnav-btn.active i{color:var(--wcfe3-gold);}

/* ===== Desktop: hide bottom nav, show desktop nav ===== */
@media(min-width:769px){
  .wcfe3-bottomnav{display:none;}
  .wcfe3-menu-toggle{display:none;}
  .wcfe3-desktop-nav{display:flex;align-items:center;gap:1.4rem;}
  .wcfe3-desktop-nav a{font-size:1.35rem;color:var(--wcfe3-text-dim);font-weight:600;}
  .wcfe3-desktop-nav a:hover{color:var(--wcfe3-gold);}
  .wcfe3-main{padding-bottom:2rem;}
}

/* ===== Utility ===== */
.wcfe3-text-center{text-align:center;}
.wcfe3-mt-1{margin-top:1rem;}
.wcfe3-hidden{display:none;}