/* ============================================================
   plus777 vip - layout-7cea.css
   Prefix: w7cea-
   Palette: #A0522D | #DEB887 | #9932CC | #1A1A2E | #4B0082
   Mobile-first HTML5 casino layout
   ============================================================ */

:root{
  --w7cea-primary:#A0522D;
  --w7cea-gold:#DEB887;
  --w7cea-purple:#9932CC;
  --w7cea-deep:#1A1A2E;
  --w7cea-royal:#4B0082;
  --w7cea-bg:#15121f;
  --w7cea-bg-2:#1f1830;
  --w7cea-card:#241a36;
  --w7cea-text:#f5ead5;
  --w7cea-muted:#c9b9d8;
  --w7cea-line:rgba(222,184,135,.18);
  --w7cea-shadow:0 6px 22px rgba(0,0,0,.35);
  --w7cea-radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:radial-gradient(circle at top,#2a1f40 0,#15121f 55%);
  color:var(--w7cea-text);
  line-height:1.5rem;
  font-size:1.4rem;
  overflow-x:hidden;
}
a{color:var(--w7cea-gold);text-decoration:none;}
img{max-width:100%;display:block;}

.w7cea-container{width:100%;max-width:430px;margin:0 auto;padding:0 12px;}
.w7cea-wrapper{padding-bottom:80px;}

/* ---------- Header ---------- */
.w7cea-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(90deg,var(--w7cea-deep),var(--w7cea-royal));
  border-bottom:1px solid var(--w7cea-line);
}
.w7cea-header-inner{
  max-width:430px;margin:0 auto;padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.w7cea-logo{display:flex;align-items:center;gap:8px;}
.w7cea-logo img{width:30px;height:30px;border-radius:8px;}
.w7cea-logo strong{font-size:1.5rem;color:var(--w7cea-gold);letter-spacing:.3px;}
.w7cea-logo span{font-size:1rem;color:var(--w7cea-muted);}
.w7cea-head-actions{display:flex;align-items:center;gap:6px;}
.w7cea-btn{
  border:none;border-radius:30px;padding:8px 14px;font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:transform .15s ease,filter .15s ease;
  min-height:36px;display:inline-flex;align-items:center;gap:4px;
}
.w7cea-btn:active{transform:scale(.95);}
.w7cea-btn-register{background:linear-gradient(90deg,#f0c989,#A0522D);color:#1A1A2E;}
.w7cea-btn-login{background:transparent;color:var(--w7cea-gold);border:1px solid var(--w7cea-gold);}
.w7cea-menu-btn{
  background:transparent;border:none;color:var(--w7cea-gold);
  font-size:2rem;cursor:pointer;width:36px;height:36px;
}

/* ---------- Mobile Menu ---------- */
.w7cea-menu{
  position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;z-index:9999;
  background:linear-gradient(180deg,#1f1830,#15121f);padding:18px;
  transition:right .3s ease;overflow-y:auto;border-left:1px solid var(--w7cea-line);
}
.w7cea-menu.open{right:0;}
.w7cea-menu-close{
  background:transparent;border:none;color:var(--w7cea-gold);font-size:2.4rem;
  float:right;cursor:pointer;
}
.w7cea-menu h3{color:var(--w7cea-gold);margin:16px 0 8px;font-size:1.6rem;}
.w7cea-menu a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--w7cea-text);
  border-bottom:1px solid var(--w7cea-line);font-size:1.35rem;
}
.w7cea-menu a:hover{background:rgba(222,184,135,.08);}
.w7cea-menu .w7cea-menu-cta{
  background:linear-gradient(90deg,#f0c989,#A0522D);color:#1A1A2E;text-align:center;
  font-weight:700;margin-top:14px;border:none;
}

/* ---------- Hero / Carousel ---------- */
.w7cea-hero{padding-top:64px;}
.w7cea-carousel{position:relative;margin:12px 0;border-radius:14px;overflow:hidden;box-shadow:var(--w7cea-shadow);}
.w7cea-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.w7cea-slides::-webkit-scrollbar{display:none;}
.w7cea-slide{min-width:100%;scroll-snap-align:center;position:relative;}
.w7cea-slide img{width:100%;height:200px;object-fit:cover;}
.w7cea-slide-cap{
  position:absolute;left:12px;bottom:12px;right:12px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.w7cea-slide-cap h2{font-size:1.8rem;color:var(--w7cea-gold);}
.w7cea-slide-cap p{font-size:1.2rem;margin-top:4px;}
.w7cea-hero-cta{
  display:inline-block;margin-top:8px;padding:8px 16px;border-radius:30px;
  background:linear-gradient(90deg,#f0c989,#A0522D);color:#1A1A2E;font-weight:700;
}

/* ---------- Section ---------- */
.w7cea-section{margin:22px 0;}
.w7cea-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.w7cea-section-head h2{font-size:1.7rem;color:var(--w7cea-gold);}
.w7cea-section-head .w7cea-link{font-size:1.2rem;color:var(--w7cea-purple);}

/* ---------- Game Grid ---------- */
.w7cea-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.w7cea-card{
  background:var(--w7cea-card);border-radius:10px;overflow:hidden;
  border:1px solid var(--w7cea-line);cursor:pointer;transition:transform .15s;
}
.w7cea-card:active{transform:scale(.96);}
.w7cea-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#000;}
.w7cea-card-name{
  padding:6px 8px;font-size:1.15rem;text-align:center;color:var(--w7cea-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Info / Promo blocks ---------- */
.w7cea-box{
  background:var(--w7cea-card);border:1px solid var(--w7cea-line);
  border-radius:12px;padding:14px;margin-bottom:14px;
}
.w7cea-box h3{color:var(--w7cea-gold);font-size:1.6rem;margin-bottom:8px;}
.w7cea-box p{color:var(--w7cea-muted);font-size:1.3rem;margin-bottom:8px;}
.w7cea-pill{
  display:inline-block;padding:4px 10px;border-radius:20px;font-size:1.1rem;font-weight:700;
  background:rgba(153,50,204,.25);color:var(--w7cea-gold);margin:3px;
}
.w7cea-text-link{color:var(--w7cea-gold);font-weight:700;border-bottom:1px dashed var(--w7cea-gold);}
.w7cea-banner{
  display:flex;gap:10px;align-items:center;
  background:linear-gradient(90deg,#4B0082,#9932CC);border-radius:12px;
  padding:12px;margin:12px 0;color:#fff;
}
.w7cea-banner .w7cea-banner-icon{font-size:2.4rem;}
.w7cea-banner div h4{font-size:1.4rem;color:#fff;}
.w7cea-banner div p{font-size:1.15rem;color:rgba(255,255,255,.85);}

/* ---------- Footer ---------- */
.w7cea-footer{
  background:var(--w7cea-deep);border-top:1px solid var(--w7cea-line);
  padding:22px 12px 30px;margin-top:24px;
}
.w7cea-footer h4{color:var(--w7cea-gold);font-size:1.5rem;margin:12px 0 8px;}
.w7cea-footer p{color:var(--w7cea-muted);font-size:1.25rem;margin-bottom:8px;}
.w7cea-footer-links{display:flex;flex-wrap:wrap;gap:6px;}
.w7cea-footer-links a{
  flex:1 1 45%;background:var(--w7cea-card);text-align:center;
  padding:8px;border-radius:8px;color:var(--w7cea-text);font-size:1.2rem;
  border:1px solid var(--w7cea-line);
}
.w7cea-foot-btns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.w7cea-foot-btns button{
  flex:1 1 45%;border-radius:30px;padding:9px;font-size:1.25rem;font-weight:700;border:none;
  background:linear-gradient(90deg,#f0c989,#A0522D);color:#1A1A2E;cursor:pointer;
}
.w7cea-copy{text-align:center;color:var(--w7cea-muted);font-size:1.15rem;margin-top:14px;}

/* ---------- Bottom Nav ---------- */
.w7cea-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  height:60px;display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(90deg,var(--w7cea-deep),var(--w7cea-royal));
  border-top:1px solid var(--w7cea-line);
}
.w7cea-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--w7cea-muted);font-size:1rem;text-decoration:none;height:100%;
  transition:color .15s;
}
.w7cea-bottomnav a .w7cea-ico{font-size:2.2rem;line-height:1;}
.w7cea-bottomnav a.active{color:var(--w7cea-gold);}
.w7cea-bottomnav a.promo{color:var(--w7cea-gold);}

/* ---------- Desktop ---------- */
@media (min-width:769px){
  .w7cea-bottomnav{display:none;}
  .w7cea-container{max-width:960px;}
  .w7cea-grid{grid-template-columns:repeat(6,1fr);}
  .w7cea-slide img{height:340px;}
}

@media (max-width:768px){
  .w7cea-wrapper{padding-bottom:80px;}
}