/* ============================================================
   ceo game (ceo-game.click) - theme-0684.css
   Prefix: s068-
   Palette: #FFB74D | #FFBF00 | #1A1A2E | #FFB347
   Mobile-first HTML5 casino homepage
   ============================================================ */

:root{
  --s068-bg:#1A1A2E;
  --s068-bg-2:#21234a;
  --s068-card:#23254f;
  --s068-gold:#FFB74D;
  --s068-gold-2:#FFBF00;
  --s068-amber:#FFB347;
  --s068-text:#fff7e6;
  --s068-muted:#b8b3d6;
  --s068-border:rgba(255,183,77,.22);
  --s068-grad:linear-gradient(135deg,#FFB74D 0%,#FFBF00 60%,#FFB347 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:'Noto Sans Bengali','Hind Siliguri',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#2a2c5e 0%,#1A1A2E 60%);
  color:var(--s068-text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--s068-gold);text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* Layout shell — mobile cap with literal 430px */
.s068-shell{width:100%;max-width:430px;margin:0 auto;min-height:100vh;position:relative;background:linear-gradient(180deg,#1A1A2E 0%,#181a36 100%);box-shadow:0 0 40px rgba(0,0,0,.4)}

/* ===== Header ===== */
.s068-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:rgba(20,20,42,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--s068-border);
}
.s068-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.7rem;color:var(--s068-gold)}
.s068-logo .s068-logo-mark{width:30px;height:30px;border-radius:8px;background:var(--s068-grad);display:flex;align-items:center;justify-content:center;color:#1A1A2E;font-size:1.4rem;font-weight:900}
.s068-logo small{display:block;font-size:1rem;color:var(--s068-muted);font-weight:500}
.s068-head-actions{display:flex;align-items:center;gap:8px}
.s068-btn{
  border:none;cursor:pointer;font-weight:700;border-radius:999px;
  padding:8px 16px;font-size:1.25rem;transition:transform .15s, box-shadow .15s;
}
.s068-btn:active{transform:scale(.96)}
.s068-btn-login{background:transparent;color:var(--s068-gold);border:1.5px solid var(--s068-gold)}
.s068-btn-reg{background:var(--s068-grad);color:#1A1A2E;box-shadow:0 4px 14px rgba(255,191,0,.35)}
.s068-icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--s068-border);
  background:transparent;color:var(--s068-gold);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.7rem;
}

/* ===== Hamburger / Mobile menu ===== */
.s068-menu-toggle{display:inline-flex}
.s068-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.s068-menu-backdrop.s068-open{opacity:1;pointer-events:auto}
.s068-side-menu{
  position:fixed;top:0;right:-86%;width:78%;max-width:340px;height:100vh;z-index:9999;
  background:linear-gradient(180deg,#21234a,#1A1A2E);
  padding:18px 16px;overflow-y:auto;transition:right .28s ease;
  border-left:1px solid var(--s068-border);
}
.s068-side-menu.s068-open{right:0}
.s068-side-menu h3{color:var(--s068-gold);font-size:1.5rem;margin:14px 0 8px;border-bottom:1px solid var(--s068-border);padding-bottom:6px}
.s068-side-menu a{
  display:block;padding:10px 8px;color:var(--s068-text);font-size:1.3rem;border-radius:8px;
}
.s068-side-menu a:hover{background:rgba(255,183,77,.08);color:var(--s068-gold)}
.s068-side-menu .s068-close{position:absolute;top:10px;right:14px;font-size:2rem;color:var(--s068-muted);background:none;border:none;cursor:pointer}

/* ===== Hero ===== */
.s068-hero{position:relative;padding:18px 14px 10px}
.s068-hero-banner{
  border-radius:18px;overflow:hidden;position:relative;border:1px solid var(--s068-border);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.s068-hero-banner img{width:100%;height:170px;object-fit:cover}
.s068-hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;background:linear-gradient(180deg,rgba(26,26,46,.05) 30%,rgba(26,26,46,.88) 100%);
}
.s068-hero-overlay h1{font-size:2rem;color:#fff;line-height:1.25;font-weight:800}
.s068-hero-overlay h1 span{color:var(--s068-gold)}
.s068-hero-overlay p{color:#f3eddc;font-size:1.15rem;margin-top:4px}
.s068-hero-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  background:var(--s068-grad);color:#1A1A2E;font-weight:800;
  padding:8px 16px;border-radius:999px;font-size:1.2rem;width:max-content;
}

/* Marquee */
.s068-marquee{
  margin:10px 14px;background:rgba(255,183,77,.08);border:1px dashed var(--s068-border);
  border-radius:10px;padding:6px 10px;display:flex;align-items:center;gap:8px;overflow:hidden;
}
.s068-marquee i{color:var(--s068-gold)}
.s068-marquee span{font-size:1.15rem;color:var(--s068-text);white-space:nowrap}

/* Quick category chips */
.s068-cats{display:flex;gap:8px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}
.s068-cats::-webkit-scrollbar{display:none}
.s068-cat{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--s068-card);border:1px solid var(--s068-border);border-radius:12px;
  padding:8px 12px;min-width:64px;color:var(--s068-text);font-size:1.1rem;
}
.s068-cat i{font-size:2rem;color:var(--s068-gold)}
.s068-cat.active{background:var(--s068-grad);color:#1A1A2E;border-color:transparent}
.s068-cat.active i{color:#1A1A2E}

/* ===== Sections ===== */
.s068-section{padding:6px 14px 14px}
.s068-section-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
.s068-section-head h2{font-size:1.55rem;color:var(--s068-gold);font-weight:800;display:flex;align-items:center;gap:6px}
.s068-section-head a{font-size:1.1rem;color:var(--s068-amber)}

/* Game grid */
.s068-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s068-card{
  background:var(--s068-card);border:1px solid var(--s068-border);border-radius:12px;overflow:hidden;
  position:relative;transition:transform .15s;
}
.s068-card:active{transform:scale(.97)}
.s068-card img{width:100%;height:88px;object-fit:cover;background:#0e0f24}
.s068-card .s068-card-name{
  padding:5px 6px;font-size:1.02rem;color:var(--s068-text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s068-card .s068-play{
  position:absolute;inset:0;background:rgba(26,26,46,.55);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.s068-card:hover .s068-play{opacity:1}
.s068-card .s068-play span{
  background:var(--s068-grad);color:#1A1A2E;font-weight:800;padding:5px 12px;border-radius:999px;font-size:1.05rem;
}
.s068-tag{
  position:absolute;top:5px;left:5px;background:var(--s068-grad);color:#1A1A2E;
  font-size:.95rem;font-weight:800;padding:2px 7px;border-radius:6px;
}

/* Promo banners */
.s068-promos{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 14px}
.s068-promo{
  border-radius:14px;overflow:hidden;border:1px solid var(--s068-border);position:relative;
}
.s068-promo img{width:100%;height:90px;object-fit:cover}
.s068-promo .s068-promo-txt{padding:8px;background:var(--s068-card)}
.s068-promo .s068-promo-txt b{color:var(--s068-gold);font-size:1.15rem;display:block}
.s068-promo .s068-promo-txt small{color:var(--s068-muted);font-size:1rem}

/* Promo CTA strip */
.s068-cta{
  margin:10px 14px;padding:14px;border-radius:14px;
  background:linear-gradient(135deg,#2a2c5e,#1A1A2E);border:1px solid var(--s068-border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.s068-cta div b{color:var(--s068-gold);font-size:1.4rem}
.s068-cta div p{color:var(--s068-muted);font-size:1.05rem}
.s068-cta .s068-btn-reg{padding:10px 18px;font-size:1.3rem}

/* SEO content block */
.s068-seo{padding:8px 14px;color:var(--s068-muted);font-size:1.2rem}
.s068-seo h2{color:var(--s068-gold);font-size:1.5rem;margin:12px 0 6px}
.s068-seo h3{color:var(--s068-amber);font-size:1.25rem;margin:10px 0 4px}
.s068-seo p{margin-bottom:8px}
.s068-seo a{color:var(--s068-gold);text-decoration:underline}

/* FAQ */
.s068-faq{padding:6px 14px 16px}
.s068-faq details{
  background:var(--s068-card);border:1px solid var(--s068-border);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;
}
.s068-faq summary{cursor:pointer;font-weight:700;color:var(--s068-gold);font-size:1.2rem;list-style:none}
.s068-faq summary::-webkit-details-marker{display:none}
.s068-faq details[open] summary{margin-bottom:6px}
.s068-faq p{color:var(--s068-muted);font-size:1.1rem}

/* Footer */
.s068-footer{
  background:#14152e;border-top:1px solid var(--s068-border);padding:18px 14px 90px;
}
.s068-footer h4{color:var(--s068-gold);font-size:1.25rem;margin:10px 0 6px}
.s068-footer a{display:block;color:var(--s068-muted);font-size:1.1rem;padding:3px 0}
.s068-footer a:hover{color:var(--s068-gold)}
.s068-footer .s068-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s068-foot-bottom{text-align:center;color:var(--s068-muted);font-size:1rem;margin-top:14px;border-top:1px solid var(--s068-border);padding-top:10px}

/* ===== Mobile bottom nav ===== */
.s068-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  background:rgba(20,20,42,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--s068-border);z-index:1000;
  display:flex;justify-content:space-around;align-items:stretch;height:62px;
}
.s068-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--s068-muted);font-size:1rem;gap:2px;min-width:60px;min-height:60px;
  transition:color .2s, transform .15s;position:relative;
}
.s068-bottomnav a i{font-size:2.2rem}
.s068-bottomnav a.s068-nav-cta{
  color:#1A1A2E;background:var(--s068-grad);border-radius:14px 14px 0 0;
  margin:0 6px;height:62px;
}
.s068-bottomnav a.s068-nav-cta i{font-size:2.4rem;color:#1A1A2E}
.s068-bottomnav a.s068-active{color:var(--s068-gold)}
.s068-bottomnav a.s068-active::before{
  content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 6px 6px;background:var(--s068-gold);
}

/* Desktop */
@media (min-width:769px){
  .s068-bottomnav{display:none}
  .s068-shell{box-shadow:0 0 60px rgba(0,0,0,.5)}
}
@media (max-width:768px){
  main{padding-bottom:80px}
}
