/* ===========================================================
   kb333.cyou - Base Stylesheet
   Prefix : uif4-
   Canvas : 320-430px mobile-first
   Palette: #333333 (deep) / #FF7F50 (coral accent)
   =========================================================== */

:root{
  --uif4-bg:#333333;
  --uif4-bg-2:#262626;
  --uif4-bg-3:#1c1c1c;
  --uif4-card:#3c3c3c;
  --uif4-card-2:#474747;
  --uif4-accent:#FF7F50;
  --uif4-accent-2:#ff9a6b;
  --uif4-accent-deep:#e0663b;
  --uif4-gold:#ffd29b;
  --uif4-text:#f6f3ee;
  --uif4-text-2:#cdc6bd;
  --uif4-text-3:#8d877f;
  --uif4-line:rgba(255,255,255,.08);
  --uif4-line-2:rgba(255,127,80,.32);
  --uif4-shadow:0 10px 26px rgba(0,0,0,.42);
  --uif4-radius:14px;
  --uif4-radius-sm:10px;
  --uif4-header-h:56px;
  --uif4-bottom-h:64px;
  --uif4-indicator:2px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:var(--uif4-bg);}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali","Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 50% -200px,#3d3d3d 0%,var(--uif4-bg) 60%);
  color:var(--uif4-text);
  font-size:15px;line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* App shell — keep mobile canvas centered on wider screens */
.uif4-shell{
  max-width:430px;
  margin:0 auto;
  background:var(--uif4-bg);
  position:relative;
  min-height:100vh;
  box-shadow:0 0 60px rgba(0,0,0,.4);
}

/* ===========================================================
   HEADER — flag-style top bar
   =========================================================== */
.uif4-header{
  position:sticky;top:0;z-index:60;
  height:var(--uif4-header-h);
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  background:linear-gradient(180deg,rgba(38,38,38,.96),rgba(51,51,51,.92));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--uif4-line);
}
.uif4-header::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--uif4-accent) 0%,var(--uif4-gold) 50%,var(--uif4-accent) 100%);
}
.uif4-logo-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.uif4-logo{
  width:38px;height:38px;border-radius:10px;
  object-fit:cover;
  border:1px solid var(--uif4-line-2);
  background:var(--uif4-bg-3);
  flex-shrink:0;
}
.uif4-brand{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.uif4-brand-name{
  font-size:18px;font-weight:800;letter-spacing:.4px;
  color:var(--uif4-text);
}
.uif4-brand-tag{
  font-size:10px;color:var(--uif4-accent-2);
  letter-spacing:.6px;text-transform:uppercase;
}
.uif4-header-actions{display:flex;align-items:center;gap:6px;}
.uif4-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 14px;border-radius:20px;
  font-size:13px;font-weight:700;letter-spacing:.3px;
  min-width:44px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.uif4-btn:active{transform:scale(.96);}
.uif4-btn-ghost{
  color:var(--uif4-text);
  border:1px solid var(--uif4-line-2);
  background:rgba(255,255,255,.04);
}
.uif4-btn-primary{
  background:linear-gradient(135deg,var(--uif4-accent) 0%,var(--uif4-accent-deep) 100%);
  color:#1c0e07;
  box-shadow:0 4px 14px rgba(255,127,80,.38);
}
.uif4-menu-btn{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--uif4-line);
}
.uif4-menu-btn span{
  display:block;width:18px;height:2px;background:var(--uif4-text);
  position:relative;border-radius:2px;
}
.uif4-menu-btn span::before,
.uif4-menu-btn span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--uif4-text);border-radius:2px;
}
.uif4-menu-btn span::before{top:-6px;}
.uif4-menu-btn span::after{top:6px;}

/* ===========================================================
   EXPANDABLE MENU — stacked overlay
   =========================================================== */
.uif4-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.uif4-overlay.is-open{opacity:1;visibility:visible;}
.uif4-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(86%,360px);
  background:linear-gradient(180deg,var(--uif4-bg-2),var(--uif4-bg-3));
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;
  box-shadow:-12px 0 40px rgba(0,0,0,.5);
}
.uif4-drawer.is-open{transform:translateX(0);}
.uif4-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--uif4-line);
}
.uif4-drawer-title{font-size:15px;font-weight:700;color:var(--uif4-text);}
.uif4-close{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  color:var(--uif4-text);font-size:20px;line-height:1;
}
.uif4-drawer-nav{padding:10px 12px;overflow-y:auto;flex:1;}
.uif4-drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;margin-bottom:6px;
  border-radius:var(--uif4-radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid var(--uif4-line);
  color:var(--uif4-text);font-weight:600;font-size:14px;
  transition:background .15s, border-color .15s;
}
.uif4-drawer-link:active{background:rgba(255,127,80,.12);}
.uif4-drawer-link .uif4-dot{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--uif4-accent),var(--uif4-accent-deep));
  display:flex;align-items:center;justify-content:center;
  color:#1c0e07;font-weight:800;font-size:13px;flex-shrink:0;
}
.uif4-drawer-foot{
  padding:14px 16px;border-top:1px solid var(--uif4-line);
  display:flex;gap:10px;
}
.uif4-drawer-foot .uif4-btn{flex:1;height:42px;}

/* ===========================================================
   HERO / BANNER
   =========================================================== */
.uif4-hero{
  position:relative;
  margin:12px;
  border-radius:18px;
  overflow:hidden;
  background:var(--uif4-bg-3);
  box-shadow:var(--uif4-shadow);
}
.uif4-hero-track{
  display:flex;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.uif4-hero-slide{
  flex:0 0 100%;
  position:relative;
  cursor:pointer;
}
.uif4-hero-slide img{
  width:100%;height:200px;object-fit:cover;
}
.uif4-hero-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 16px 14px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 100%);
  color:var(--uif4-text);
}
.uif4-hero-title{
  font-size:18px;font-weight:800;margin:0 0 4px;
  color:var(--uif4-accent-2);
}
.uif4-hero-sub{font-size:12px;color:var(--uif4-text-2);margin:0;}
.uif4-hero-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:5;
}
.uif4-hero-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:all .25s ease;cursor:pointer;
}
.uif4-hero-dot.is-active{
  background:var(--uif4-accent);
  width:18px;border-radius:4px;
}

/* ===========================================================
   GENERIC SECTION
   =========================================================== */
.uif4-section{padding:18px 12px 6px;}
.uif4-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.uif4-section-title{
  font-size:17px;font-weight:800;color:var(--uif4-text);
  display:flex;align-items:center;gap:8px;
}
.uif4-section-title::before{
  content:"";width:4px;height:18px;border-radius:3px;
  background:linear-gradient(180deg,var(--uif4-accent),var(--uif4-accent-deep));
}
.uif4-section-more{
  font-size:12px;color:var(--uif4-accent-2);font-weight:600;
}

/* Category chips */
.uif4-chips{
  display:flex;gap:8px;overflow-x:auto;
  padding:4px 12px 12px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.uif4-chips::-webkit-scrollbar{display:none;}
.uif4-chip{
  flex-shrink:0;
  padding:8px 14px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--uif4-line);
  font-size:13px;font-weight:600;color:var(--uif4-text-2);
  white-space:nowrap;
  transition:all .18s ease;
}
.uif4-chip.is-active{
  background:linear-gradient(135deg,var(--uif4-accent),var(--uif4-accent-deep));
  color:#1c0e07;border-color:transparent;
}

/* ===========================================================
   GAME GRID — 4 columns compact
   =========================================================== */
.uif4-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
@media (min-width:375px){
  .uif4-grid{grid-template-columns:repeat(4,1fr);gap:10px;}
}
.uif4-game{
  display:flex;flex-direction:column;
  background:var(--uif4-card);
  border-radius:var(--uif4-radius-sm);
  overflow:hidden;
  border:1px solid var(--uif4-line);
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.uif4-game:active{transform:scale(.96);}
.uif4-game:hover{border-color:var(--uif4-line-2);}
.uif4-game-img{
  position:relative;
  aspect-ratio:1/1;
  background:var(--uif4-bg-3);
  overflow:hidden;
}
.uif4-game-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.uif4-game:hover .uif4-game-img img{transform:scale(1.06);}
.uif4-game-tag{
  position:absolute;top:4px;left:4px;
  font-size:9px;font-weight:700;
  padding:2px 6px;border-radius:4px;
  background:rgba(255,127,80,.92);color:#1c0e07;
  letter-spacing:.3px;
}
.uif4-game-name{
  font-size:11px;font-weight:600;
  color:var(--uif4-text-2);
  padding:5px 6px 6px;
  text-align:center;
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ===========================================================
   INFO / CONTENT BLOCKS
   =========================================================== */
.uif4-card{
  background:var(--uif4-card);
  border:1px solid var(--uif4-line);
  border-radius:var(--uif4-radius);
  padding:16px;
  margin-bottom:14px;
}
.uif4-card h2{
  font-size:17px;font-weight:800;margin:0 0 10px;color:var(--uif4-text);
}
.uif4-card h3{
  font-size:15px;font-weight:700;margin:14px 0 6px;color:var(--uif4-accent-2);
}
.uif4-card p{
  margin:0 0 10px;color:var(--uif4-text-2);font-size:14px;
}
.uif4-card a{
  color:var(--uif4-accent-2);
  border-bottom:1px dashed rgba(255,127,80,.45);
  padding-bottom:1px;
}

/* Feature strip */
.uif4-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:12px 0 4px;
}
.uif4-feature{
  background:var(--uif4-card);
  border:1px solid var(--uif4-line);
  border-radius:var(--uif4-radius-sm);
  padding:12px 8px;text-align:center;
}
.uif4-feature-ico{
  width:34px;height:34px;border-radius:50%;
  margin:0 auto 6px;
  background:linear-gradient(135deg,var(--uif4-accent),var(--uif4-accent-deep));
  display:flex;align-items:center;justify-content:center;
  color:#1c0e07;font-weight:800;font-size:15px;
}
.uif4-feature-text{
  font-size:11px;font-weight:600;color:var(--uif4-text-2);line-height:1.3;
}

/* Winners strip */
.uif4-winners{
  display:flex;gap:10px;overflow-x:auto;
  padding:4px 2px 8px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.uif4-winners::-webkit-scrollbar{display:none;}
.uif4-winner{
  flex-shrink:0;width:160px;
  background:var(--uif4-card);
  border:1px solid var(--uif4-line);
  border-left:3px solid var(--uif4-accent);
  border-radius:var(--uif4-radius-sm);
  padding:10px 12px;
}
.uif4-winner-name{font-size:12px;font-weight:700;color:var(--uif4-text);}
.uif4-winner-game{font-size:11px;color:var(--uif4-text-3);margin:2px 0 4px;}
.uif4-winner-amount{font-size:15px;font-weight:800;color:var(--uif4-gold);}

/* Promo shortcut row (homepage extended foot) */
.uif4-promo-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin:10px 0;
}
.uif4-promo-card{
  background:linear-gradient(135deg,rgba(255,127,80,.16),rgba(255,127,80,.04));
  border:1px solid var(--uif4-line-2);
  border-radius:var(--uif4-radius);
  padding:14px;
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;
  transition:transform .15s ease;
}
.uif4-promo-card:active{transform:scale(.97);}
.uif4-promo-card .uif4-promo-t{
  font-size:14px;font-weight:800;color:var(--uif4-text);
}
.uif4-promo-card .uif4-promo-d{
  font-size:11px;color:var(--uif4-text-2);line-height:1.4;
}
.uif4-promo-card .uif4-promo-c{
  margin-top:4px;font-size:11px;font-weight:700;
  color:var(--uif4-accent-2);letter-spacing:.4px;
}

/* Quick links directory */
.uif4-directory{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.uif4-directory a{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--uif4-line);
  border-radius:var(--uif4-radius-sm);
  padding:11px 12px;
  font-size:13px;font-weight:600;color:var(--uif4-text);
  transition:background .15s, border-color .15s;
}
.uif4-directory a:active{background:rgba(255,127,80,.12);}
.uif4-directory a::before{
  content:">";
  color:var(--uif4-accent);font-weight:800;
}

/* FAQ mini */
.uif4-faq-item{
  border-bottom:1px solid var(--uif4-line);
  padding:12px 0;
}
.uif4-faq-item:last-child{border-bottom:none;}
.uif4-faq-q{
  font-size:14px;font-weight:700;color:var(--uif4-text);
  margin-bottom:6px;display:flex;gap:8px;
}
.uif4-faq-q::before{
  content:"Q";flex-shrink:0;
  width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--uif4-accent),var(--uif4-accent-deep));
  color:#1c0e07;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.uif4-faq-a{font-size:13px;color:var(--uif4-text-2);padding-left:30px;}

/* Disclaimer */
.uif4-disclaimer{
  background:rgba(255,255,255,.03);
  border:1px solid var(--uif4-line);
  border-left:3px solid var(--uif4-accent);
  border-radius:var(--uif4-radius-sm);
  padding:12px 14px;
  font-size:12px;color:var(--uif4-text-3);
  line-height:1.6;
}

/* ===========================================================
   EXTENDED FOOT (homepage only)
   =========================================================== */
.uif4-extended{
  padding:18px 12px 8px;
  border-top:1px solid var(--uif4-line);
  margin-top:14px;
}
.uif4-extended-title{
  font-size:15px;font-weight:800;color:var(--uif4-accent-2);
  margin-bottom:10px;letter-spacing:.4px;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.uif4-footer{
  background:var(--uif4-bg-3);
  padding:20px 14px calc(var(--uif4-bottom-h) + 22px);
  border-top:1px solid var(--uif4-line);
}
.uif4-footer-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.uif4-footer-brand img{width:34px;height:34px;border-radius:8px;}
.uif4-footer-brand .uif4-brand-name{font-size:16px;}
.uif4-footer-copy{
  font-size:11px;color:var(--uif4-text-3);line-height:1.7;
}
.uif4-footer-links{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.uif4-footer-links a{
  font-size:12px;color:var(--uif4-text-2);
  padding:4px 10px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--uif4-line);
}

/* ===========================================================
   BOTTOM NAV — center floating elevated, indicator slides
   =========================================================== */
.uif4-bottom-spacer{height:calc(var(--uif4-bottom-h) + 16px);}
.uif4-bottom{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:10px;z-index:70;
  width:calc(100% - 24px);max-width:406px;
  height:var(--uif4-bottom-h);
  display:flex;align-items:stretch;justify-content:space-between;
  background:linear-gradient(180deg,rgba(60,60,60,.98),rgba(38,38,38,.98));
  border:1px solid var(--uif4-line-2);
  border-radius:20px;
  box-shadow:0 14px 30px rgba(0,0,0,.55), 0 2px 0 rgba(255,127,80,.12) inset;
  padding:6px;
  overflow:hidden;
}
.uif4-bottom-indicator{
  position:absolute;top:0;
  height:var(--uif4-indicator);
  background:linear-gradient(90deg,var(--uif4-accent),var(--uif4-gold));
  border-radius:0 0 4px 4px;
  transition:left .32s cubic-bezier(.22,.61,.36,1), width .32s cubic-bezier(.22,.61,.36,1);
}
.uif4-bottom-btn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  color:var(--uif4-text-3);
  font-size:10px;font-weight:600;
  border-radius:14px;
  position:relative;
  transition:color .2s ease, transform .18s ease;
}
.uif4-bottom-btn.is-active{color:var(--uif4-accent-2);}
.uif4-bottom-btn:active{transform:translateY(-1px);}
.uif4-bottom-btn svg{width:22px;height:22px;display:block;}
.uif4-bottom-btn-label{font-size:10px;letter-spacing:.2px;}
.uif4-bottom-btn.is-elevated{
  background:linear-gradient(135deg,var(--uif4-accent),var(--uif4-accent-deep));
  color:#1c0e07;
  border-radius:50%;
  width:48px;height:48px;
  margin-top:-22px;
  flex:0 0 48px;
  box-shadow:0 6px 16px rgba(255,127,80,.5);
  align-self:flex-start;
  border:3px solid var(--uif4-bg-2);
}
.uif4-bottom-btn.is-elevated svg{width:24px;height:24px;}
.uif4-bottom-btn.is-elevated .uif4-bottom-btn-label{display:none;}

/* Visually hidden helper */
.uif4-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Small helper for promo banner images used inline */
.uif4-inline-banner{
  display:block;width:100%;
  border-radius:var(--uif4-radius);
  margin:8px 0 14px;
  cursor:pointer;
  border:1px solid var(--uif4-line);
}