/* 55h.homes - Core layout stylesheet (prefix: w3f20-) */
/* Color palette: #0C0C0C | #AFEEEE | #2C3E50 | #87CEFA | #F0F0F0 | #E0FFFF */

:root{
  --w3f20-bg:#0C0C0C;
  --w3f20-bg-soft:#15191c;
  --w3f20-card:#1b232b;
  --w3f20-deep:#2C3E50;
  --w3f20-text:#F0F0F0;
  --w3f20-muted:#c7d4e0;
  --w3f20-accent:#AFEEEE;
  --w3f20-accent2:#87CEFA;
  --w3f20-pale:#E0FFFF;
  --w3f20-border:rgba(135,206,250,.18);
  --w3f20-radius:14px;
  --w3f20-shadow:0 6px 22px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:"Noto Sans Bengali","Hind Siliguri",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--w3f20-bg);
  color:var(--w3f20-text);
  line-height:1.5rem;
  font-size:1.5rem;
  overflow-x:hidden;
}
a{color:var(--w3f20-accent);text-decoration:none;}
img{max-width:100%;display:block;}

/* ========== Layout ========== */
.w3f20-wrapper{max-width:430px;margin:0 auto;position:relative;background:var(--w3f20-bg);}
.w3f20-container{padding:0 14px;width:100%;}

/* ========== Header ========== */
.w3f20-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg,#08111a 0%,#0C0C0C 100%);
  border-bottom:1px solid var(--w3f20-border);
  box-shadow:var(--w3f20-shadow);
}
.w3f20-header-inner{
  max-width:430px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;min-height:52px;
}
.w3f20-logo{display:flex;align-items:center;gap:8px;color:var(--w3f20-pale);font-weight:700;font-size:1.7rem;}
.w3f20-logo .w3f20-logo-mark{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#AFEEEE,#87CEFA);
  color:#0C0C0C;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;
}
.w3f20-head-actions{display:flex;align-items:center;gap:8px;}
.w3f20-icon-btn{
  background:transparent;border:none;color:var(--w3f20-text);font-size:2rem;cursor:pointer;
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}
.w3f20-icon-btn:hover{background:rgba(135,206,250,.12);color:var(--w3f20-accent);}
.w3f20-btn{
  border:none;cursor:pointer;border-radius:22px;font-weight:700;font-size:1.3rem;
  padding:9px 16px;transition:transform .15s ease,box-shadow .15s ease;line-height:1;
}
.w3f20-btn:active{transform:scale(.95);}
.w3f20-btn-login{
  background:transparent;border:1.5px solid var(--w3f20-accent);color:var(--w3f20-accent);
}
.w3f20-btn-register{
  background:linear-gradient(135deg,#AFEEEE,#87CEFA);color:#0C0C0C;
  box-shadow:0 4px 14px rgba(135,206,250,.35);
}

/* ========== Mobile dropdown menu ========== */
.w3f20-menu{
  position:fixed;top:0;left:0;right:0;max-width:430px;margin:0 auto;
  background:#0a0f14;z-index:9999;
  transform:translateY(-130%);transition:transform .28s ease;
  padding:60px 14px 24px;border-bottom:1px solid var(--w3f20-border);
  box-shadow:var(--w3f20-shadow);
}
.w3f20-menu.w3f20-open{transform:translateY(0);}
.w3f20-menu-close{
  position:absolute;top:12px;right:14px;background:none;border:none;color:var(--w3f20-text);
  font-size:2.2rem;cursor:pointer;
}
.w3f20-menu-title{color:var(--w3f20-pale);font-size:1.5rem;font-weight:700;margin-bottom:10px;letter-spacing:.5px;}
.w3f20-menu-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.w3f20-menu-list a{
  display:block;padding:11px 12px;background:var(--w3f20-card);border:1px solid var(--w3f20-border);
  border-radius:10px;color:var(--w3f20-text);font-size:1.35rem;text-align:center;
}
.w3f20-menu-list a:hover{background:var(--w3f20-deep);color:var(--w3f20-accent);}

/* ========== Hero / Carousel ========== */
.w3f20-main{padding-top:60px;padding-bottom:90px;}
.w3f20-hero{padding:8px 0 6px;}
.w3f20-carousel{
  position:relative;border-radius:var(--w3f20-radius);overflow:hidden;
  box-shadow:var(--w3f20-shadow);border:1px solid var(--w3f20-border);
}
.w3f20-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;}
.w3f20-slides::-webkit-scrollbar{display:none;}
.w3f20-slide{flex:0 0 100%;scroll-snap-align:center;position:relative;cursor:pointer;}
.w3f20-slide img{width:100%;height:180px;object-fit:cover;}
.w3f20-slide-cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  color:var(--w3f20-pale);font-size:1.4rem;font-weight:600;
}
.w3f20-dots{display:flex;justify-content:center;gap:6px;margin-top:8px;}
.w3f20-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:rgba(135,206,250,.35);cursor:pointer;padding:0;
}
.w3f20-dots .w3f20-active{background:var(--w3f20-accent);width:22px;border-radius:6px;}

/* ========== Sections ========== */
.w3f20-section{padding:14px 0;}
.w3f20-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.w3f20-h1{font-size:2.1rem;color:var(--w3f20-pale);font-weight:800;line-height:1.3;}
.w3f20-h2{
  font-size:1.7rem;color:var(--w3f20-accent);font-weight:700;
  border-left:4px solid var(--w3f20-accent2);padding-left:8px;margin-bottom:10px;
}
.w3f20-h3{font-size:1.45rem;color:var(--w3f20-pale);font-weight:700;margin-bottom:6px;}
.w3f20-lead{color:var(--w3f20-muted);font-size:1.35rem;}
.w3f20-link-more{color:var(--w3f20-accent2);font-size:1.25rem;font-weight:600;}

/* ========== Category label ========== */
.w3f20-cat-label{
  display:inline-flex;align-items:center;gap:6px;font-size:1.4rem;font-weight:700;
  color:#0C0C0C;background:linear-gradient(135deg,#AFEEEE,#87CEFA);
  padding:5px 12px;border-radius:14px;margin:14px 0 8px;
}

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

/* ========== Info / promo modules ========== */
.w3f20-card{
  background:var(--w3f20-card);border:1px solid var(--w3f20-border);border-radius:var(--w3f20-radius);
  padding:14px;box-shadow:var(--w3f20-shadow);margin-bottom:12px;
}
.w3f20-card p{color:var(--w3f20-muted);font-size:1.3rem;margin-bottom:8px;}
.w3f20-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.w3f20-feature{
  background:var(--w3f20-bg-soft);border:1px solid var(--w3f20-border);border-radius:12px;padding:12px;
  text-align:center;
}
.w3f20-feature .w3f20-feature-ico{font-size:2.4rem;color:var(--w3f20-accent);margin-bottom:6px;}
.w3f20-feature h3{font-size:1.3rem;color:var(--w3f20-pale);margin-bottom:4px;}
.w3f20-feature p{font-size:1.15rem;color:var(--w3f20-muted);line-height:1.35;}

.w3f20-cta{
  display:block;text-align:center;background:linear-gradient(135deg,#AFEEEE,#87CEFA);
  color:#0C0C0C;font-weight:800;font-size:1.5rem;padding:13px;border-radius:24px;
  margin:14px 0;box-shadow:0 6px 18px rgba(135,206,250,.35);cursor:pointer;border:none;width:100%;
}
.w3f20-cta:active{transform:scale(.97);}
.w3f20-cta-alt{
  display:inline-block;color:var(--w3f20-accent);font-weight:700;font-size:1.3rem;
  border-bottom:1.5px dashed var(--w3f20-accent2);padding-bottom:1px;
}

/* Testimonials */
.w3f20-quote{
  background:var(--w3f20-bg-soft);border-left:3px solid var(--w3f20-accent2);
  border-radius:10px;padding:10px 12px;margin-bottom:8px;
}
.w3f20-quote p{font-size:1.25rem;color:var(--w3f20-text);font-style:italic;}
.w3f20-quote .w3f20-author{display:block;margin-top:4px;color:var(--w3f20-accent);font-size:1.15rem;font-weight:700;}

/* Winners */
.w3f20-winner-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;background:var(--w3f20-bg-soft);border-radius:8px;margin-bottom:6px;font-size:1.2rem;
}
.w3f20-winner-row strong{color:var(--w3f20-accent);}

/* Payment chips */
.w3f20-chips{display:flex;flex-wrap:wrap;gap:8px;}
.w3f20-chip{
  background:var(--w3f20-bg-soft);border:1px solid var(--w3f20-border);border-radius:20px;
  padding:7px 12px;font-size:1.2rem;color:var(--w3f20-text);display:inline-flex;align-items:center;gap:6px;
}

/* App download banner */
.w3f20-app-banner{
  display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#2C3E50,#15191c);
  border:1px solid var(--w3f20-border);border-radius:var(--w3f20-radius);padding:14px;
}
.w3f20-app-banner .w3f20-app-ico{font-size:3rem;color:var(--w3f20-accent);}
.w3f20-app-banner h3{color:var(--w3f20-pale);font-size:1.4rem;margin-bottom:3px;}
.w3f20-app-banner p{font-size:1.2rem;color:var(--w3f20-muted);margin-bottom:8px;}

/* FAQ */
.w3f20-faq-item{border-bottom:1px solid var(--w3f20-border);padding:10px 0;}
.w3f20-faq-q{font-weight:700;color:var(--w3f20-pale);font-size:1.3rem;margin-bottom:4px;}
.w3f20-faq-a{color:var(--w3f20-muted);font-size:1.25rem;}

/* SEO text */
.w3f20-seo-text{font-size:1.3rem;color:var(--w3f20-muted);line-height:1.7;}
.w3f20-seo-text strong{color:var(--w3f20-accent);}
.w3f20-seo-text a{color:var(--w3f20-accent2);border-bottom:1px dotted var(--w3f20-accent2);}

/* ========== Footer ========== */
.w3f20-footer{
  background:#070b0f;border-top:1px solid var(--w3f20-border);padding:18px 14px 24px;margin-top:10px;
}
.w3f20-footer-brand{color:var(--w3f20-pale);font-size:1.4rem;font-weight:700;margin-bottom:6px;}
.w3f20-footer-desc{color:var(--w3f20-muted);font-size:1.2rem;line-height:1.5;margin-bottom:12px;}
.w3f20-footer-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.w3f20-footer-links a{
  background:var(--w3f20-card);border:1px solid var(--w3f20-border);border-radius:8px;
  padding:8px 10px;color:var(--w3f20-text);font-size:1.2rem;text-align:center;
}
.w3f20-footer-promos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.w3f20-footer-promos button{
  flex:1 1 30%;background:linear-gradient(135deg,#AFEEEE,#87CEFA);color:#0C0C0C;border:none;border-radius:18px;
  padding:8px;font-weight:700;font-size:1.15rem;cursor:pointer;
}
.w3f20-copy{text-align:center;color:var(--w3f20-muted);font-size:1.1rem;border-top:1px solid var(--w3f20-border);padding-top:10px;}

/* ========== Mobile bottom nav ========== */
.w3f20-bottomnav{
  position:fixed;bottom:0;left:0;right:0;max-width:430px;margin:0 auto;z-index:1000;
  height:60px;background:linear-gradient(180deg,#0a0f14,#0C0C0C);
  border-top:1px solid var(--w3f20-border);display:flex;justify-content:space-around;align-items:center;
  box-shadow:0 -4px 18px rgba(0,0,0,.55);
}
.w3f20-bottomnav button{
  flex:1;background:transparent;border:none;color:var(--w3f20-muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:60px;min-height:58px;font-size:1.05rem;font-weight:600;transition:color .15s ease,transform .15s ease;
}
.w3f20-bottomnav button .w3f20-bn-ico{font-size:2.2rem;line-height:1;}
.w3f20-bottomnav button:active{transform:scale(.9);}
.w3f20-bottomnav .w3f20-active{color:var(--w3f20-accent);}
.w3f20-bottomnav .w3f20-promo-btn{color:var(--w3f20-accent);}
.w3f20-bottomnav .w3f20-promo-btn .w3f20-bn-ico{
  background:linear-gradient(135deg,#AFEEEE,#87CEFA);color:#0C0C0C;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;
  margin-top:-22px;box-shadow:0 4px 14px rgba(135,206,250,.5);border:3px solid #0C0C0C;
}

/* desktop */
@media (min-width:769px){
  .w3f20-bottomnav{display:none;}
  .w3f20-wrapper{box-shadow:0 0 40px rgba(0,0,0,.4);}
}
@media (max-width:768px){
  .w3f20-main{padding-bottom:80px;}
}