/* cwin333.homes - Core base stylesheet
   Prefix: vac7- | Mobile-first casino layout
   Palette: #2C2C2C bg / #008B8B teal / #008000 green / #8FBC8F light / #7CFC00 neon
   Comments in English per project rules. */

:root{
  --vac7-primary:#008B8B;
  --vac7-bg:#2C2C2C;
  --vac7-bg2:#1f1f1f;
  --vac7-teal:#008B8B;
  --vac7-green:#008000;
  --vac7-light:#8FBC8F;
  --vac7-neon:#7CFC00;
  --vac7-text:#e8f3e8;
  --vac7-muted:#9bb39b;
  --vac7-card:#262626;
  --vac7-border:#3a3a3a;
  --vac7-radius:14px;
  --vac7-header-h:60px;
  --vac7-nav-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--vac7-bg);
  color:var(--vac7-text);
  line-height:1.5;
  max-width:430px;
  margin:0 auto;
  position:relative;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--vac7-neon);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.25;font-weight:700}
h2{font-size:2rem;margin:1.8rem 0 1rem;color:var(--vac7-light)}
h3{font-size:1.6rem;color:var(--vac7-neon)}
p{font-size:1.4rem;line-height:1.6;color:var(--vac7-text)}

/* ===== Header ===== */
.vac7-header{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--vac7-header-h);
  background:linear-gradient(90deg,#1a1a1a,#008B8B 60%,#008000);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.2rem;z-index:1000;
  border-bottom:2px solid var(--vac7-neon);
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
.vac7-logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:1.8rem;font-weight:800}
.vac7-logo .vac7-logo-ic{width:30px;height:30px;border-radius:8px;background:var(--vac7-neon);display:flex;align-items:center;justify-content:center;color:#1a1a1a;font-size:1.6rem;font-weight:900}
.vac7-logo-img{width:30px;height:30px;border-radius:8px;object-fit:cover;background:var(--vac7-neon)}
.vac7-logo span{background:linear-gradient(90deg,#7CFC00,#8FBC8F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vac7-head-actions{display:flex;align-items:center;gap:.6rem}
.vac7-btn{
  border:none;cursor:pointer;border-radius:20px;
  font-size:1.3rem;font-weight:700;padding:.55rem 1.3rem;
  transition:transform .15s ease,opacity .15s ease;
  min-height:36px;display:inline-flex;align-items:center;gap:.4rem;
}
.vac7-btn:active{transform:scale(.94)}
.vac7-btn-login{background:transparent;color:#fff;border:1.5px solid var(--vac7-neon)}
.vac7-btn-reg{background:var(--vac7-neon);color:#15240a;box-shadow:0 2px 8px rgba(124,252,0,.4)}
.vac7-menu-btn{background:transparent;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:.2rem .5rem}

/* ===== Mobile menu ===== */
.vac7-menu{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:100vh;
  background:var(--vac7-bg2);z-index:9999;
  padding:5rem 1.6rem 2rem;overflow-y:auto;
  transform:translateX(-110%);transition:transform .28s ease;
}
.vac7-menu.vac7-open{transform:translateX(-50%)}
.vac7-menu-close{position:absolute;top:1rem;right:1.2rem;background:transparent;border:none;color:#fff;font-size:2.4rem;cursor:pointer}
.vac7-menu h3{color:var(--vac7-neon);margin:1.2rem 0 .6rem;font-size:1.5rem;border-bottom:1px solid var(--vac7-border);padding-bottom:.4rem}
.vac7-menu a{display:block;padding:.7rem .4rem;font-size:1.4rem;color:var(--vac7-light);border-bottom:1px dashed #333}
.vac7-menu a:hover,.vac7-menu a:active{color:var(--vac7-neon)}
.vac7-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s}
.vac7-menu-backdrop.vac7-show{opacity:1;visibility:visible}

/* ===== Main layout ===== */
.vac7-main{padding-top:calc(var(--vac7-header-h) + .8rem);padding-bottom:80px}
.vac7-section{padding:0 1.2rem}
.vac7-container{width:100%;max-width:430px;margin:0 auto;padding:0 1.2rem}
.vac7-wrapper{background:var(--vac7-card);border:1px solid var(--vac7-border);border-radius:var(--vac7-radius);padding:1.2rem}
.vac7-grid{display:grid;gap:1rem}
.vac7-card{background:var(--vac7-card);border:1px solid var(--vac7-border);border-radius:var(--vac7-radius);padding:1.2rem}
.vac7-nav{display:flex;align-items:center;gap:.8rem}

/* ===== Hero ===== */
.vac7-hero{
  background:radial-gradient(circle at 30% 20%,#006666,#2C2C2C 70%);
  border-radius:var(--vac7-radius);padding:1.6rem 1.2rem;text-align:center;
  border:1px solid var(--vac7-teal);margin-bottom:1.2rem;position:relative;overflow:hidden;
}
.vac7-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(124,252,0,.08) 50%,transparent 60%);animation:vac7Shine 4s infinite}
@keyframes vac7Shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.vac7-hero h1{font-size:2.4rem;color:#fff;margin-bottom:.5rem}
.vac7-hero h1 em{color:var(--vac7-neon);font-style:normal}
.vac7-hero p{color:var(--vac7-light);font-size:1.35rem;margin-bottom:1.1rem}
.vac7-hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.vac7-cta{background:var(--vac7-neon);color:#15240a;font-weight:800;padding:.85rem 2rem;border-radius:24px;font-size:1.5rem;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(124,252,0,.45)}
.vac7-cta-alt{background:transparent;color:var(--vac7-neon);border:2px solid var(--vac7-neon);padding:.8rem 1.8rem;border-radius:24px;font-size:1.5rem;cursor:pointer}

/* ===== Carousel ===== */
.vac7-carousel{margin:1rem 0 1.2rem;border-radius:var(--vac7-radius);overflow:hidden;border:1px solid var(--vac7-teal);background:#111}
.vac7-slide{min-height:150px;display:flex;align-items:center;gap:1rem;padding:1rem;background:linear-gradient(135deg,#202020,#005f5f)}
.vac7-slide img{width:45%;border-radius:12px;object-fit:cover;aspect-ratio:4/3}
.vac7-slide h2{font-size:1.7rem;margin:.2rem 0;color:var(--vac7-neon)}
.vac7-slide p{font-size:1.2rem;color:var(--vac7-light)}

/* ===== Promo banner ===== */
.vac7-promo{
  background:linear-gradient(90deg,#008000,#008B8B);
  border-radius:var(--vac7-radius);padding:1rem 1.2rem;margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.vac7-promo-txt{color:#fff;font-size:1.3rem;font-weight:600}
.vac7-promo-txt b{color:var(--vac7-neon);font-size:1.6rem;display:block}
.vac7-promo a{background:#15240a;color:var(--vac7-neon);padding:.6rem 1.2rem;border-radius:18px;font-weight:700;font-size:1.2rem;white-space:nowrap}

/* ===== Category tabs ===== */
.vac7-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0 1rem;scrollbar-width:none}
.vac7-tabs::-webkit-scrollbar{display:none}
.vac7-tab{
  flex:0 0 auto;padding:.5rem 1.2rem;border-radius:20px;
  background:var(--vac7-card);color:var(--vac7-light);
  font-size:1.25rem;font-weight:600;border:1px solid var(--vac7-border);cursor:pointer;
  transition:all .2s;
}
.vac7-tab.vac7-active{background:var(--vac7-neon);color:#15240a;border-color:var(--vac7-neon)}

/* ===== Game grid ===== */
.vac7-games{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.4rem}
.vac7-game{
  background:var(--vac7-card);border-radius:12px;overflow:hidden;
  border:1px solid var(--vac7-border);position:relative;cursor:pointer;
  transition:transform .18s,border-color .18s;
}
.vac7-game:active{transform:scale(.95);border-color:var(--vac7-neon)}
.vac7-game img{width:100%;aspect-ratio:1;object-fit:cover;background:#111}
.vac7-game-name{padding:.45rem .4rem;font-size:1.05rem;color:var(--vac7-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vac7-game-tag{position:absolute;top:.3rem;left:.3rem;background:rgba(0,128,0,.9);color:#fff;font-size:.9rem;padding:.1rem .4rem;border-radius:6px;font-weight:700}
.vac7-game-play{
  position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;color:var(--vac7-neon);font-size:1.1rem;font-weight:700;
}
.vac7-game:hover .vac7-game-play,.vac7-game:active .vac7-game-play{opacity:1}

/* ===== SEO content ===== */
.vac7-seo{background:var(--vac7-card);border-radius:var(--vac7-radius);padding:1.2rem;margin-bottom:1.4rem;border:1px solid var(--vac7-border)}
.vac7-seo h2{color:var(--vac7-light);margin-top:0}
.vac7-seo p{font-size:1.3rem;color:var(--vac7-muted);margin-bottom:.8rem}
.vac7-seo a{color:var(--vac7-neon);font-weight:600;border-bottom:1px dotted var(--vac7-neon)}
.vac7-seo ul{padding-left:1.4rem;margin-bottom:.8rem}
.vac7-seo li{font-size:1.3rem;color:var(--vac7-muted);margin-bottom:.4rem}

/* ===== Footer ===== */
.vac7-footer{background:var(--vac7-bg2);padding:1.6rem 1.2rem 2rem;border-top:2px solid var(--vac7-teal);margin-top:1rem}
.vac7-footer h3{color:var(--vac7-neon);font-size:1.4rem;margin-bottom:.6rem}
.vac7-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:1.2rem}
.vac7-footer a{display:block;font-size:1.2rem;color:var(--vac7-muted);padding:.3rem 0}
.vac7-footer a:hover{color:var(--vac7-neon)}
.vac7-footer-bottom{text-align:center;font-size:1.1rem;color:#666;padding-top:1rem;border-top:1px solid #333}

/* ===== Mobile bottom nav ===== */
.vac7-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;height:var(--vac7-nav-h);
  background:linear-gradient(180deg,#1a1a1a,#000);
  display:flex;justify-content:space-around;align-items:center;
  z-index:1000;border-top:2px solid var(--vac7-neon);
  box-shadow:0 -3px 14px rgba(0,0,0,.6);
}
.vac7-navbtn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;min-width:60px;min-height:60px;
  color:var(--vac7-muted);font-size:1rem;gap:.15rem;transition:color .2s,transform .15s;
  padding:.3rem;
}
.vac7-navbtn .vac7-nav-ic{font-size:22px;line-height:1}
.vac7-navbtn .vac7-nav-lb{font-size:1rem}
.vac7-navbtn.vac7-on{color:var(--vac7-neon)}
.vac7-navbtn:active{transform:scale(.9)}
.vac7-navbtn.vac7-promo-btn{color:var(--vac7-neon)}
.vac7-navbtn.vac7-promo-btn .vac7-nav-ic{filter:drop-shadow(0 0 4px rgba(124,252,0,.6))}

/* desktop: hide bottom nav, widen layout */
@media (min-width:769px){
  body{max-width:100%}
  .vac7-header,.vac7-menu,.vac7-bottomnav{max-width:100%;left:0;transform:none}
  .vac7-bottomnav{display:none}
  .vac7-main{padding-bottom:2rem;max-width:1200px;margin:0 auto}
  .vac7-games{grid-template-columns:repeat(6,1fr)}
  .vac7-footer-cols{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:768px){
  .vac7-main{padding-bottom:80px}
}