/* =========================================================
   tk3666.cfd - Mobile-first gaming site stylesheet
   Prefix: v474-  (all custom classes & variables)
   Palette: #FFAA00 (gold) | #1E1E1E (dark)
   Canvas: 320-430px (kept centered on wider screens)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --v474-gold:#FFAA00;
  --v474-gold-soft:#ffc23a;
  --v474-gold-deep:#c98100;
  --v474-dark:#1E1E1E;
  --v474-dark-2:#171717;
  --v474-dark-3:#262626;
  --v474-dark-4:#303030;
  --v474-ink:#0d0d0d;
  --v474-line:#3a3a3a;
  --v474-line-soft:#2c2c2c;
  --v474-text:#f4f4f4;
  --v474-text-dim:#b9b9b9;
  --v474-text-mute:#8a8a8a;
  --v474-white:#ffffff;
  --v474-red:#ff5d5d;
  --v474-green:#36c98a;
  --v474-shadow:0 8px 22px rgba(0,0,0,.45);
  --v474-r-sm:8px;
  --v474-r-md:12px;
  --v474-r-lg:18px;
  --v474-r-pill:999px;
  --v474-header-h:56px;
  --v474-bottom-h:64px;
  --v474-max:440px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--v474-dark);color:var(--v474-text)}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;
  word-break:break-word;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--v474-gold);text-decoration:none}
a:hover{color:var(--v474-gold-soft)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}

/* Mobile canvas frame: stays phone-sized on wide screens */
.v474-shell{
  width:100%;max-width:var(--v474-max);
  margin:0 auto;min-height:100vh;
  background:linear-gradient(180deg,#1b1b1b 0%,#161616 40%,#121212 100%);
  position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.5);
  padding-bottom:calc(var(--v474-bottom-h) + 12px);
}

/* ---------- Top header (label-style tab bar) ---------- */
.v474-header{
  position:sticky;top:0;z-index:1000;
  max-width:var(--v474-max);margin:0 auto;
  height:var(--v474-header-h);
  background:linear-gradient(90deg,#161616 0%,#1f1a09 60%,#161616 100%);
  border-bottom:1px solid var(--v474-line);
  display:flex;align-items:center;
  padding:0 12px;gap:8px;
}
.v474-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.v474-logo{
  width:34px;height:34px;border-radius:var(--v474-r-sm);
  object-fit:cover;border:1px solid var(--v474-gold);
  background:#000;flex-shrink:0;
}
.v474-brand-name{font-weight:800;font-size:18px;color:var(--v474-white);letter-spacing:.5px;line-height:1}
.v474-brand-name b{color:var(--v474-gold)}
.v474-brand-tag{font-size:10px;color:var(--v474-text-mute);line-height:1;margin-top:2px}

.v474-head-actions{display:flex;align-items:center;gap:6px}
.v474-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;border-radius:var(--v474-r-pill);
  font-weight:700;font-size:13px;min-width:64px;
  transition:transform .15s ease,filter .15s ease;
}
.v474-btn:active{transform:scale(.96)}
.v474-btn-register{
  background:linear-gradient(135deg,var(--v474-gold) 0%,var(--v474-gold-deep) 100%);
  color:#1a1206;box-shadow:0 3px 10px rgba(255,170,0,.35);
}
.v474-btn-login{
  background:transparent;color:var(--v474-text);
  border:1px solid var(--v474-gold);
}
.v474-menu-btn{
  width:34px;height:34px;border-radius:var(--v474-r-sm);
  border:1px solid var(--v474-line);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
  background:#222;
}
.v474-menu-btn span{width:16px;height:2px;background:var(--v474-gold);border-radius:2px}

/* ---------- Slide-down menu (section menu) ---------- */
.v474-menu{
  position:fixed;top:0;left:50%;transform:translate(-50%,-110%);
  width:100%;max-width:var(--v474-max);
  background:#161616;z-index:9999;
  transition:transform .28s ease;
  border-bottom:1px solid var(--v474-line);
  box-shadow:var(--v474-shadow);
  max-height:88vh;overflow-y:auto;
}
.v474-menu.v474-open{transform:translate(-50%,0);top:var(--v474-header-h)}
.v474-menu-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--v474-line-soft);
}
.v474-menu-head h3{font-size:14px;color:var(--v474-gold);font-weight:700;letter-spacing:.5px}
.v474-menu-close{font-size:20px;color:var(--v474-text-dim);width:32px;height:32px}
.v474-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--v474-line-soft)}
.v474-menu-item{
  background:#1a1a1a;padding:12px 14px;
  display:flex;flex-direction:column;gap:3px;
  border-radius:0;transition:background .15s;
}
.v474-menu-item:active,.v474-menu-item:hover{background:#242014}
.v474-menu-item .v474-mi-t{font-size:14px;color:var(--v474-text);font-weight:600}
.v474-menu-item .v474-mi-s{font-size:11px;color:var(--v474-text-mute)}
.v474-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:9998;opacity:0;pointer-events:none;transition:opacity .2s;
}
.v474-menu-backdrop.v474-open{opacity:1;pointer-events:auto}

/* ---------- Hero / Carousel ---------- */
.v474-main{padding:12px}
.v474-hero{
  position:relative;border-radius:var(--v474-r-lg);
  overflow:hidden;background:#000;
  border:1px solid var(--v474-line);
  box-shadow:var(--v474-shadow);
}
.v474-slides{position:relative;height:180px}
.v474-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
}
.v474-slide.v474-active{opacity:1}
.v474-slide img{width:100%;height:180px;object-fit:cover}
.v474-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.85) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;
}
.v474-slide-title{font-size:18px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:4px}
.v474-slide-sub{font-size:12px;color:#f0d59b;margin-bottom:8px}
.v474-slide-cta{
  align-self:flex-start;background:var(--v474-gold);color:#1a1206;
  font-size:12px;font-weight:800;padding:6px 14px;border-radius:var(--v474-r-pill);
}
.v474-dots{display:flex;gap:5px;justify-content:center;padding:6px 0 2px}
.v474-dot{width:7px;height:7px;border-radius:50%;background:#444;transition:all .2s}
.v474-dot.v474-active{background:var(--v474-gold);width:18px;border-radius:4px}

/* ---------- Quick promo strip ---------- */
.v474-quick{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;
}
.v474-quick a{
  background:linear-gradient(135deg,#241d09,#1a1a1a);
  border:1px solid var(--v474-line);
  border-radius:var(--v474-r-md);padding:10px 6px;
  text-align:center;color:var(--v474-text);font-size:11.5px;font-weight:600;
}
.v474-quick a .v474-qi{display:block;font-size:18px;color:var(--v474-gold);margin-bottom:3px}

/* ---------- Section heads ---------- */
.v474-sec{margin-top:18px}
.v474-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;padding:0 2px;
}
.v474-sec-title{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:800;color:#fff;
}
.v474-sec-title .v474-bar{width:4px;height:18px;border-radius:2px;background:var(--v474-gold)}
.v474-sec-more{font-size:12px;color:var(--v474-gold)}

/* ---------- Game grid ---------- */
.v474-games{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
@media(min-width:360px){.v474-games{gap:9px}}
@media(min-width:400px){.v474-games{grid-template-columns:repeat(5,1fr);gap:10px}}
.v474-game{
  background:#232323;border:1px solid var(--v474-line-soft);
  border-radius:var(--v474-r-md);padding:5px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  overflow:hidden;transition:transform .15s,border-color .15s;
}
.v474-game:active{transform:scale(.96);border-color:var(--v474-gold)}
.v474-game img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--v474-r-sm);background:#000;
}
.v474-game-name{
  font-size:10.5px;color:var(--v474-text-dim);font-weight:600;
  line-height:1.2;height:26px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

/* ---------- Info / FAQ / CTA cards ---------- */
.v474-card{
  background:#202020;border:1px solid var(--v474-line-soft);
  border-radius:var(--v474-r-md);padding:14px;margin-top:10px;
}
.v474-card h2{font-size:16px;color:#fff;margin-bottom:8px;font-weight:800}
.v474-card h3{font-size:14px;color:var(--v474-gold);margin:10px 0 5px;font-weight:700}
.v474-card p{font-size:13px;color:var(--v474-text-dim);margin-bottom:8px}
.v474-card ul{margin:6px 0 10px;padding-left:6px}
.v474-card ul li{
  font-size:12.5px;color:var(--v474-text-dim);
  padding:4px 0 4px 16px;position:relative;
}
.v474-card ul li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--v474-gold);
}

/* CTA block */
.v474-cta{
  margin-top:14px;border-radius:var(--v474-r-lg);
  background:linear-gradient(135deg,#2a2106 0%,#1a1a1a 100%);
  border:1px solid var(--v474-gold);
  padding:16px;text-align:center;
}
.v474-cta h2{color:#fff;font-size:17px;margin-bottom:5px}
.v474-cta p{color:var(--v474-text-dim);font-size:12.5px;margin-bottom:10px}
.v474-cta .v474-btn{display:inline-flex;padding:0 26px;height:38px;font-size:14px}

/* FAQ */
.v474-faq{margin-top:10px}
.v474-faq-item{
  background:#202020;border:1px solid var(--v474-line-soft);
  border-radius:var(--v474-r-md);margin-bottom:8px;overflow:hidden;
}
.v474-faq-q{
  width:100%;text-align:left;padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:#fff;
}
.v474-faq-q .v474-ico{color:var(--v474-gold);font-size:18px;transition:transform .2s}
.v474-faq-item.v474-open .ico{transform:rotate(45deg)}
.v474-faq-a{
  max-height:0;overflow:hidden;transition:max-height .25s ease;
  padding:0 14px;color:var(--v474-text-dim);font-size:12.5px;
}
.v474-faq-item.v474-open .v474-faq-a{max-height:240px;padding:0 14px 12px}

/* Steps */
.v474-steps{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.v474-step{
  display:flex;gap:10px;align-items:flex-start;
  background:#1d1d1d;border:1px solid var(--v474-line-soft);
  border-radius:var(--v474-r-md);padding:10px 12px;
}
.v474-step .v474-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--v474-gold);color:#1a1206;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}
.v474-step .v474-step-title{font-size:13px;color:var(--v474-text);font-weight:600}
.v474-step .v474-step-detail{font-size:11.5px;color:var(--v474-text-mute);margin-top:2px}

/* Promo tiles */
.v474-promo-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;
}
.v474-promo-tile{
  background:linear-gradient(135deg,#241d09,#1a1a1a);
  border:1px solid var(--v474-line);
  border-radius:var(--v474-r-md);padding:10px;
  text-align:left;color:var(--v474-text);
}
.v474-promo-tile .v474-pt-title{font-size:13px;font-weight:800;color:var(--v474-gold)}
.v474-promo-tile .v474-pt-detail{font-size:11.5px;color:var(--v474-text-dim);margin-top:3px;line-height:1.4}

/* ---------- Extended footer ---------- */
.v474-ext{
  margin-top:18px;border-top:1px solid var(--v474-line);
  padding:16px 12px;background:#161616;
}
.v474-ext-brand{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.v474-ext-brand img{width:40px;height:40px;border-radius:var(--v474-r-sm);border:1px solid var(--v474-gold)}
.v474-ext-brand p{font-size:12px;color:var(--v474-text-dim);line-height:1.5}
.v474-ext h4{
  font-size:13px;color:var(--v474-gold);font-weight:800;
  margin:12px 0 6px;letter-spacing:.5px;
}
.v474-ext-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v474-ext-cols a{
  font-size:12px;color:var(--v474-text-dim);
  padding:4px 0;display:block;
}
.v474-ext-cols a:hover{color:var(--v474-gold)}
.v474-ext-promos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.v474-ext-promos button{
  font-size:11px;color:#1a1206;background:var(--v474-gold);
  border-radius:var(--v474-r-sm);padding:8px 4px;font-weight:700;text-align:center;
}
.v474-ext-promos button:active{filter:brightness(.9)}
.v474-disclaimer{
  margin-top:14px;padding:10px;border:1px dashed var(--v474-line);
  border-radius:var(--v474-r-sm);font-size:11px;color:var(--v474-text-mute);line-height:1.5;
}

/* ---------- Copyright footer ---------- */
.v474-foot{
  padding:14px 12px;text-align:center;
  border-top:1px solid var(--v474-line);
  font-size:11px;color:var(--v474-text-mute);
}
.v474-foot a{color:var(--v474-text-mute);margin:0 4px}

/* ---------- Bottom navigation (outlined function bar) ---------- */
.v474-bottom{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:var(--v474-max);
  height:var(--v474-bottom-h);
  background:linear-gradient(180deg,#1c1c1c 0%,#0f0f0f 100%);
  border-top:1px solid var(--v474-line);
  display:grid;grid-template-columns:repeat(5,1fr);
  z-index:1000;
}
.v474-bottom a,.v474-bottom button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--v474-text-mute);font-size:10px;font-weight:600;
  position:relative;height:100%;background:transparent;
}
.v474-bottom .ico{font-size:19px;line-height:1;color:var(--v474-text-mute)}
.v474-bottom a.v474-active{color:var(--v474-gold)}
.v474-bottom a.v474-active .ico{color:var(--v474-gold)}
.v474-bottom a.v474-active::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--v474-gold);
}
.v474-bottom .v474-bn-promo{color:var(--v474-gold)}
.v474-bottom .v474-bn-promo .ico{color:var(--v474-gold)}

/* ---------- Utility ---------- */
.v474-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.v474-clearfix::after{content:"";display:table;clear:both}

/* Active state for current page in menu */
.v474-menu-item.v474-current{background:#242014;border-left:3px solid var(--v474-gold)}

@media(max-width:768px){main{padding-bottom:80px}}
@media(min-width:769px){.v474-bottom{display:none}}