/* ===== crickex.cfd theme stylesheet (prefix: ui33-) ===== */
/* Root units: 62.5% base font for rem sizing */
:root{
  --ui33-bg:#141414;
  --ui33-bg-2:#1c1c1c;
  --ui33-bg-3:#232323;
  --ui33-text:#DEE2E6;
  --ui33-muted:#9aa0a6;
  --ui33-accent:#FA8072;
  --ui33-accent-2:#ff624d;
  --ui33-gold:#f5c46b;
  --ui33-border:rgba(255,255,255,.08);
  --ui33-shadow:0 6px 24px rgba(0,0,0,.45);
  --ui33-radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:'Segoe UI','Noto Sans Bengali',Roboto,Arial,sans-serif;
  background:var(--ui33-bg);
  color:var(--ui33-text);
  line-height:1.5;
  font-size:1.6rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--ui33-accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--ui33-gold)}
img{max-width:100%;display:block}

/* ===== Page wrap — mobile first with hard max-width: 430px ===== */
.ui33-wrap{
  width:100%;
  max-width: 430px;
  margin:0 auto;
  background:linear-gradient(180deg,#171717 0%,#141414 60%,#0f0f0f 100%);
  min-height:100vh;
  position:relative;
  box-shadow:var(--ui33-shadow);
}

/* ===== Header ===== */
.ui33-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(90deg,#1a1a1a,#232323);
  border-bottom:1px solid var(--ui33-border);
}
.ui33-logo{display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;font-size:2rem;letter-spacing:.5px}
.ui33-logo .ui33-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--ui33-accent),var(--ui33-accent-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;
}
.ui33-logo .ui33-tld{color:var(--ui33-accent)}
.ui33-head-btns{display:flex;align-items:center;gap:8px}
.ui33-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:1.35rem;font-weight:700;
  padding:8px 14px;border-radius:30px;border:none;cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s;
  font-family:inherit;
}
.ui33-btn:hover{transform:translateY(-1px)}
.ui33-btn-primary{background:linear-gradient(135deg,var(--ui33-accent),var(--ui33-accent-2));color:#fff;box-shadow:0 4px 14px rgba(250,128,114,.35)}
.ui33-btn-ghost{background:transparent;color:var(--ui33-text);border:1px solid var(--ui33-border)}
.ui33-menu-btn{
  background:transparent;border:none;color:var(--ui33-text);font-size:2.2rem;cursor:pointer;padding:4px 6px;
}

/* ===== Slide mobile menu ===== */
.ui33-menu{
  position:fixed;top:0;right:-86%;width:86%;max-width:360px;height:100%;z-index:9999;
  background:#161616;border-left:1px solid var(--ui33-border);
  padding:18px 16px;overflow-y:auto;transition:right .28s ease;
  box-shadow:-8px 0 30px rgba(0,0,0,.5);
}
.ui33-menu.open{right:0}
.ui33-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;visibility:hidden;transition:opacity .25s}
.ui33-menu-backdrop.open{opacity:1;visibility:visible}
.ui33-menu-title{font-size:1.7rem;font-weight:800;color:#fff;margin:14px 0 8px;border-bottom:1px solid var(--ui33-border);padding-bottom:6px}
.ui33-menu a{
  display:block;color:var(--ui33-text);padding:10px 8px;font-size:1.45rem;border-radius:8px;
}
.ui33-menu a:hover{background:var(--ui33-bg-3);color:var(--ui33-accent)}
.ui33-menu-close{position:absolute;top:12px;right:14px;background:transparent;border:none;color:#fff;font-size:2.4rem;cursor:pointer}

/* ===== Hero ===== */
.ui33-hero{
  position:relative;padding:22px 16px 26px;overflow:hidden;
  background:radial-gradient(circle at 20% 20%,rgba(250,128,114,.18),transparent 60%),linear-gradient(135deg,#2a1410,#141414);
  border-bottom:1px solid var(--ui33-border);
}
.ui33-hero h1{font-size:2.6rem;line-height:1.2;color:#fff;margin-bottom:8px;font-weight:900}
.ui33-hero h1 span{color:var(--ui33-accent)}
.ui33-hero p{color:var(--ui33-muted);font-size:1.45rem;margin-bottom:16px}
.ui33-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.ui33-hero-stats{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.ui33-stat{
  background:rgba(255,255,255,.05);border:1px solid var(--ui33-border);
  padding:8px 12px;border-radius:10px;min-width:96px;
}
.ui33-stat b{display:block;color:var(--ui33-gold);font-size:1.7rem;font-weight:800}
.ui33-stat small{color:var(--ui33-muted);font-size:1.15rem}

/* ===== Marquee ===== */
.ui33-marquee{
  background:linear-gradient(90deg,var(--ui33-accent),var(--ui33-accent-2));
  color:#fff;padding:7px 0;overflow:hidden;white-space:nowrap;font-size:1.3rem;font-weight:600;
}
.ui33-marquee span{display:inline-block;padding-left:100%;animation:ui33scroll 22s linear infinite}
@keyframes ui33scroll{to{transform:translateX(-100%)}}

/* ===== Section ===== */
.ui33-section{padding:22px 14px}
.ui33-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ui33-section-head h2{font-size:1.9rem;color:#fff;font-weight:800;display:flex;align-items:center;gap:8px}
.ui33-section-head h2 i{color:var(--ui33-accent)}
.ui33-section-head a{font-size:1.25rem}

/* ===== Category chips ===== */
.ui33-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}
.ui33-chips::-webkit-scrollbar{display:none}
.ui33-chip{
  flex:0 0 auto;padding:7px 14px;border-radius:20px;background:var(--ui33-bg-2);
  color:var(--ui33-text);font-size:1.3rem;border:1px solid var(--ui33-border);cursor:pointer;
  transition:background .2s,color .2s;
}
.ui33-chip.active,.ui33-chip:hover{background:linear-gradient(135deg,var(--ui33-accent),var(--ui33-accent-2));color:#fff;border-color:transparent}

/* ===== Game grid ===== */
.ui33-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ui33-card{
  background:var(--ui33-bg-2);border:1px solid var(--ui33-border);border-radius:var(--ui33-radius);
  overflow:hidden;cursor:pointer;position:relative;transition:transform .18s, box-shadow .2s;
}
.ui33-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5);border-color:var(--ui33-accent)}
.ui33-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#222}
.ui33-card-body{padding:8px 8px 10px}
.ui33-card-body h3{font-size:1.25rem;color:#fff;font-weight:600;line-height:1.25;height:3.1em;overflow:hidden}
.ui33-card-tag{
  position:absolute;top:6px;left:6px;background:rgba(0,0,0,.65);color:var(--ui33-gold);
  padding:2px 7px;border-radius:6px;font-size:1.05rem;font-weight:700;
}
.ui33-card-play{
  position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.ui33-card:hover .ui33-card-play{opacity:1}
.ui33-card-play i{font-size:3rem;color:var(--ui33-accent)}

/* ===== Promo banners ===== */
.ui33-promo{display:grid;grid-template-columns:1fr;gap:12px}
.ui33-promo-card{
  border-radius:var(--ui33-radius);padding:16px;color:#fff;border:1px solid var(--ui33-border);
  background:linear-gradient(135deg,#3a1d18,#1f1414);position:relative;overflow:hidden;
}
.ui33-promo-card h3{font-size:1.7rem;margin-bottom:6px;color:var(--ui33-gold)}
.ui33-promo-card p{font-size:1.3rem;color:var(--ui33-muted);margin-bottom:12px}
.ui33-promo-card .ui33-btn{margin-top:4px}

/* ===== SEO content ===== */
.ui33-content{padding:22px 14px;font-size:1.45rem;color:var(--ui33-text)}
.ui33-content h2{font-size:2rem;color:#fff;margin:18px 0 10px;font-weight:800}
.ui33-content h3{font-size:1.7rem;color:var(--ui33-accent);margin:14px 0 8px}
.ui33-content p{margin-bottom:12px;line-height:1.7;color:var(--ui33-muted)}
.ui33-content p a{color:var(--ui33-accent);font-weight:600;text-decoration:underline}
.ui33-content ul{margin:0 0 14px 1.5em;color:var(--ui33-muted)}
.ui33-content li{margin-bottom:6px;line-height:1.6}
.ui33-faq-item{background:var(--ui33-bg-2);border:1px solid var(--ui33-border);border-radius:10px;margin-bottom:10px;padding:12px 14px}
.ui33-faq-item h3{margin:0 0 6px;font-size:1.5rem;color:#fff}
.ui33-faq-item p{margin:0;color:var(--ui33-muted);font-size:1.35rem;line-height:1.6}

/* ===== Footer ===== */
.ui33-footer{
  background:#0f0f0f;border-top:1px solid var(--ui33-border);padding:24px 14px 30px;color:var(--ui33-muted);
}
.ui33-footer h4{color:#fff;font-size:1.5rem;margin-bottom:10px}
.ui33-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.ui33-footer a{display:block;color:var(--ui33-muted);padding:5px 0;font-size:1.3rem}
.ui33-footer a:hover{color:var(--ui33-accent)}
.ui33-foot-bottom{border-top:1px solid var(--ui33-border);padding-top:14px;font-size:1.2rem;text-align:center;line-height:1.6}
.ui33-18{display:inline-block;border:1px solid var(--ui33-accent);color:var(--ui33-accent);border-radius:6px;padding:2px 6px;font-weight:700;margin-top:8px}

/* ===== Mobile bottom navigation ===== */
.ui33-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width: 430px;height:62px;z-index:1000;
  display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,#1f1f1f,#141414);
  border-top:1px solid var(--ui33-border);
  box-shadow:0 -4px 18px rgba(0,0,0,.5);
}
.ui33-bottomnav button,.ui33-bottomnav a.ui33-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--ui33-muted);
  font-size:1.1rem;font-family:inherit;cursor:pointer;min-width:60px;min-height:60px;
  gap:2px;transition:color .2s,transform .2s;text-decoration:none;
}
.ui33-nav-item i,.ui33-bottomnav button i{font-size:2.2rem}
.ui33-nav-item.active{color:var(--ui33-accent)}
.ui33-nav-item:active{transform:scale(.92)}
.ui33-nav-item span{font-size:1.05rem}
.ui33-nav-item.promo{color:var(--ui33-gold)}
.ui33-nav-fab{
  width:48px;height:48px;border-radius:50%;margin-top:-26px;
  background:linear-gradient(135deg,var(--ui33-accent),var(--ui33-accent-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.6rem;
  box-shadow:0 6px 16px rgba(250,128,114,.5);border:3px solid #141414;
}

/* ===== Desktop ===== */
@media (min-width: 769px){
  .ui33-bottomnav{display:none}
  main.ui33-main{padding-bottom:30px !important}
}
@media (max-width: 768px){
  main.ui33-main{padding-bottom:84px}
}
.ui33-ico-lib{display:none}