/* ku9apk.homes - Core basefile stylesheet (prefix: pg21-) */
/* Mobile-first design for 320-430px viewports; centered on wider screens */

:root{
  --pg21-bg:#0b1020;
  --pg21-bg2:#11183a;
  --pg21-card:#161f4a;
  --pg21-card2:#1d2966;
  --pg21-primary:#ffb020;
  --pg21-primary2:#ff7a00;
  --pg21-accent:#27e3c8;
  --pg21-text:#f4f7ff;
  --pg21-muted:#a9b4d8;
  --pg21-border:#273266;
  --pg21-danger:#ff5c7a;
  --pg21-success:#3ddc97;
  --pg21-radius:14px;
  --pg21-shadow:0 10px 26px rgba(0,0,0,.35);
  --pg21-header-h:58px;
  --pg21-nav-h:68px;
  --pg21-maxw:480px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali","Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1a2466 0%,var(--pg21-bg) 60%);
  color:var(--pg21-text);
  font-size:15px;line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0 0 .35em;line-height:1.32;font-weight:800;}

/* Layout shell - keep mobile canvas on wider screens */
.pg21-shell{
  max-width:var(--pg21-maxw);
  margin:0 auto;
  background:linear-gradient(180deg,#0d1430 0%,var(--pg21-bg) 30%,var(--pg21-bg) 100%);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.5);
  padding-bottom:calc(var(--pg21-nav-h) + 24px);
}

/* ===== Header ===== */
.pg21-header{
  position:sticky;top:0;z-index:50;
  height:var(--pg21-header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;
  background:linear-gradient(90deg,#0a1330,#1a2358);
  border-bottom:1px solid var(--pg21-border);
}
.pg21-brand{display:flex;align-items:center;gap:8px;min-width:0;}
.pg21-brand img{
  width:36px;height:36px;border-radius:9px;
  object-fit:cover;border:1px solid var(--pg21-primary);
  box-shadow:0 0 0 2px rgba(255,176,32,.18);
}
.pg21-brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.pg21-brand-text b{font-size:15px;letter-spacing:.4px;color:#fff;}
.pg21-brand-text small{font-size:10px;color:var(--pg21-muted);letter-spacing:.6px;}
.pg21-header-actions{display:flex;gap:8px;align-items:center;}
.pg21-btn{
  font-family:inherit;cursor:pointer;border:none;border-radius:10px;
  padding:9px 14px;font-size:13px;font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pg21-btn:active{transform:scale(.96);}
.pg21-btn-ghost{
  background:rgba(255,255,255,.08);color:var(--pg21-text);
  border:1px solid var(--pg21-border);
}
.pg21-btn-primary{
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  color:#1a1100;font-weight:800;
  box-shadow:0 6px 16px rgba(255,122,0,.35);
}

/* ===== Hero / Carousel ===== */
.pg21-hero{
  margin:14px 12px 6px;
  border-radius:18px;
  padding:18px 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,176,32,.22), transparent 55%),
    linear-gradient(135deg,#1b2566,#101a46);
  border:1px solid var(--pg21-border);
  box-shadow:var(--pg21-shadow);
  position:relative;overflow:hidden;
}
.pg21-hero::before{
  content:"";position:absolute;inset:auto -40% -60% -20%;height:200px;
  background:radial-gradient(closest-side,rgba(39,227,200,.22),transparent);
  filter:blur(8px);
}
.pg21-hero .pg21-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:#1a1100;
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  padding:5px 10px;border-radius:999px;margin-bottom:10px;
}
.pg21-hero h1{font-size:22px;color:#fff;}
.pg21-hero h1 em{color:var(--pg21-primary);font-style:normal;}
.pg21-hero p{margin:6px 0 14px;color:var(--pg21-muted);font-size:13.5px;}
.pg21-hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.pg21-hero-actions .pg21-btn{padding:11px 18px;font-size:14px;}
.pg21-hero-stats{
  margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.pg21-hero-stats div{
  background:rgba(0,0,0,.22);border:1px solid var(--pg21-border);
  border-radius:12px;padding:8px;text-align:center;
}
.pg21-hero-stats b{display:block;font-size:16px;color:var(--pg21-primary);}
.pg21-hero-stats span{font-size:11px;color:var(--pg21-muted);}

/* Carousel strip */
.pg21-carousel{
  margin:8px 12px;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--pg21-border);
  position:relative;
}
.pg21-carousel-track{
  display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.pg21-carousel-slide{
  min-width:100%;padding:16px;position:relative;
  background:linear-gradient(135deg,#1a2358,#0e1640);
}
.pg21-carousel-slide h3{color:#fff;font-size:17px;}
.pg21-carousel-slide p{color:var(--pg21-muted);font-size:12.5px;margin:4px 0 10px;}
.pg21-carousel-dots{
  position:absolute;bottom:8px;left:0;right:0;
  display:flex;gap:6px;justify-content:center;
}
.pg21-carousel-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.35);transition:all .2s;
}
.pg21-carousel-dots span.pg21-active{
  background:var(--pg21-primary);width:18px;border-radius:5px;
}

/* ===== Section ===== */
.pg21-section{margin:18px 12px 6px;}
.pg21-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.pg21-section-head h2{font-size:17px;color:#fff;display:flex;align-items:center;gap:8px;}
.pg21-section-head h2 .pg21-bar{
  width:4px;height:18px;border-radius:3px;
  background:linear-gradient(var(--pg21-primary),var(--pg21-primary2));
}
.pg21-section-head a{font-size:12px;color:var(--pg21-accent);}

/* Category chips */
.pg21-chips{
  display:flex;gap:8px;overflow-x:auto;padding:4px 12px 10px;
  scrollbar-width:none;
}
.pg21-chips::-webkit-scrollbar{display:none;}
.pg21-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:var(--pg21-card);border:1px solid var(--pg21-border);
  color:var(--pg21-muted);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:all .2s;
}
.pg21-chip.pg21-active{
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  color:#1a1100;border-color:transparent;
}

/* Game grid */
.pg21-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media (min-width:360px){.pg21-grid{gap:10px;}}
@media (min-width:410px){.pg21-grid{grid-template-columns:repeat(5,1fr);}}
.pg21-card{
  background:var(--pg21-card);border:1px solid var(--pg21-border);
  border-radius:12px;overflow:hidden;cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative;
}
.pg21-card:active{transform:scale(.95);}
.pg21-card:hover{border-color:var(--pg21-primary);}
.pg21-card-img{
  aspect-ratio:1/1;width:100%;
  background:linear-gradient(135deg,#222e6e,#10184a);
  object-fit:cover;
}
.pg21-card-body{padding:5px 6px 7px;}
.pg21-card-body b{
  font-size:11px;color:#fff;font-weight:700;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pg21-card-tag{
  position:absolute;top:5px;left:5px;
  font-size:9px;font-weight:800;letter-spacing:.4px;
  padding:2px 6px;border-radius:6px;
  background:rgba(255,90,122,.92);color:#fff;
}
.pg21-card-tag.pg21-hot{background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));color:#1a1100;}
.pg21-card-tag.pg21-new{background:var(--pg21-accent);color:#06302a;}

/* Promo banner */
.pg21-promo{
  margin:18px 12px;
  border-radius:16px;padding:16px;
  background:
    linear-gradient(135deg,rgba(255,176,32,.18),rgba(39,227,200,.10)),
    linear-gradient(135deg,#1a2358,#0d1430);
  border:1px solid var(--pg21-border);
  display:flex;gap:12px;align-items:center;
}
.pg21-promo-icon{
  width:54px;height:54px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.pg21-promo-text{flex:1 1 auto;min-width:0;}
.pg21-promo-text h3{color:#fff;font-size:15px;}
.pg21-promo-text p{margin:2px 0 0;color:var(--pg21-muted);font-size:12px;}

/* Feature cards */
.pg21-features{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 12px;
}
.pg21-feature{
  background:var(--pg21-card);border:1px solid var(--pg21-border);
  border-radius:14px;padding:14px;
}
.pg21-feature-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(39,227,200,.15);color:var(--pg21-accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:8px;
}
.pg21-feature h4{color:#fff;font-size:14px;}
.pg21-feature p{margin:4px 0 0;font-size:12px;color:var(--pg21-muted);}

/* SEO article block */
.pg21-article{
  margin:18px 12px;padding:16px;
  background:var(--pg21-card);border:1px solid var(--pg21-border);
  border-radius:16px;
}
.pg21-article h2{color:#fff;font-size:18px;margin-bottom:8px;}
.pg21-article h3{color:var(--pg21-primary);font-size:14.5px;margin:14px 0 4px;}
.pg21-article p{color:var(--pg21-muted);font-size:13px;margin:0 0 10px;}
.pg21-article ul{margin:6px 0 12px;padding-left:18px;color:var(--pg21-muted);font-size:13px;}
.pg21-article li{margin-bottom:5px;}
.pg21-article a{color:var(--pg21-accent);}

/* FAQ */
.pg21-faq-item{
  border:1px solid var(--pg21-border);border-radius:12px;
  margin-bottom:8px;overflow:hidden;background:var(--pg21-card);
}
.pg21-faq-q{
  padding:12px 14px;font-weight:700;color:#fff;font-size:13.5px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.pg21-faq-q .pg21-ico{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:rgba(255,176,32,.18);color:var(--pg21-primary);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;
  transition:transform .2s;
}
.pg21-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.pg21-faq-a p{margin:0;padding:0 14px 12px;color:var(--pg21-muted);font-size:12.5px;}
.pg21-faq-item.pg21-open .pg21-ico{transform:rotate(45deg);}
.pg21-faq-item.pg21-open .pg21-faq-a{max-height:340px;}

/* Footer */
.pg21-footer{
  margin:18px 12px 0;padding:16px;
  background:var(--pg21-card);border:1px solid var(--pg21-border);
  border-radius:16px;
}
.pg21-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.pg21-footer h4{color:#fff;font-size:13px;margin-bottom:8px;}
.pg21-footer a{display:block;color:var(--pg21-muted);font-size:12px;padding:3px 0;}
.pg21-footer a:hover{color:var(--pg21-accent);}
.pg21-footer-bottom{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--pg21-border);
  text-align:center;color:var(--pg21-muted);font-size:11px;
}
.pg21-disclaimer{
  margin:12px 12px 0;padding:12px;border-radius:12px;
  background:rgba(255,90,122,.08);border:1px solid rgba(255,90,122,.25);
  color:var(--pg21-muted);font-size:11px;text-align:center;
}

/* Mobile menu drawer */
.pg21-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:80;
}
.pg21-menu-backdrop.pg21-open{opacity:1;pointer-events:auto;}
.pg21-menu{
  position:fixed;top:0;right:-280px;width:260px;max-width:80vw;height:100%;
  background:linear-gradient(180deg,#0e1640,#0a1028);
  border-left:1px solid var(--pg21-border);
  transition:right .28s cubic-bezier(.4,0,.2,1);z-index:90;
  padding:18px 16px;overflow-y:auto;
}
.pg21-menu.pg21-open{right:0;}
.pg21-menu h4{color:#fff;font-size:15px;margin:14px 0 8px;}
.pg21-menu a{
  display:block;padding:10px 12px;border-radius:10px;
  color:var(--pg21-muted);font-size:13.5px;font-weight:600;
}
.pg21-menu a:active,.pg21-menu a:hover{background:rgba(255,255,255,.06);color:#fff;}
.pg21-menu-close{
  float:right;font-size:22px;color:var(--pg21-muted);
  background:none;border:none;cursor:pointer;line-height:1;
}
.pg21-menu-cta{margin-top:16px;display:flex;flex-direction:column;gap:8px;}

/* Hamburger */
.pg21-burger{
  display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;
}
.pg21-burger span{width:20px;height:2px;background:#fff;border-radius:2px;}

/* ===== Bottom nav ===== */
.pg21-nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--pg21-maxw);
  height:var(--pg21-nav-h);
  background:linear-gradient(180deg,#0c1430,#070d22);
  border-top:1px solid var(--pg21-border);
  display:grid;grid-template-columns:repeat(5,1fr);
  z-index:60;
}
.pg21-nav-btn{
  background:none;border:none;cursor:pointer;color:var(--pg21-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 2px;font-family:inherit;font-size:10px;font-weight:600;
  position:relative;transition:color .2s;
}
.pg21-nav-btn svg{width:22px;height:22px;}
.pg21-nav-btn.pg21-active{color:var(--pg21-primary);}
.pg21-nav-btn.pg21-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(var(--pg21-primary),var(--pg21-primary2));
}
.pg21-nav-btn.pg21-center{
  position:relative;
}
.pg21-nav-btn.pg21-center svg{
  width:42px;height:42px;padding:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  color:#1a1100;margin-top:-18px;box-shadow:0 6px 16px rgba(255,122,0,.4);
}
.pg21-nav-btn.pg21-center{color:var(--pg21-primary);}

/* Floating CTA */
.pg21-float{
  position:fixed;right:12px;bottom:calc(var(--pg21-nav-h) + 12px);
  z-index:55;display:flex;flex-direction:column;gap:10px;
}
.pg21-float-btn{
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--pg21-primary),var(--pg21-primary2));
  color:#1a1100;font-size:22px;font-weight:800;
  box-shadow:0 8px 20px rgba(255,122,0,.45);
  display:flex;align-items:center;justify-content:center;
}

/* Utility */
.pg21-container{padding:0 12px;}
.pg21-hide{display:none !important;}
.pg21-text-primary{color:var(--pg21-primary);}
.pg21-text-accent{color:var(--pg21-accent);}
.pg21-mt-12{margin-top:12px;}

@media (min-width:560px){
  .pg21-grid{grid-template-columns:repeat(5,1fr);}
}