/* =========================================================
 * tk-555.click layout stylesheet
 * All custom classes use the v626- prefix.
 * Mobile-first: max-width 430px container, scales up on desktop.
 * Palette: #4DB6AC | #B2DFDB | #3A3A3A | #FFD700 | #BBBBBB
 * ========================================================= */

:root {
  --v626-primary: #4DB6AC;
  --v626-primary-dark: #2f8f87;
  --v626-accent: #FFD700;
  --v626-bg: #3A3A3A;
  --v626-bg-deep: #252626;
  --v626-surface: #4a4a4a;
  --v626-text: #ffffff;
  --v626-text-soft: #BBBBBB;
  --v626-mint: #B2DFDB;
  --v626-radius: 10px;
  --v626-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --v626-header-h: 56px;
  --v626-bottomnav-h: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 62.5%; }
body {
  margin: 0;
  padding: 0;
  font-family: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--v626-bg-deep);
  color: var(--v626-text);
  line-height: 1.6;
  font-size: 1.5rem;
}

img { max-width: 100%; display: block; }
a { color: var(--v626-mint); text-decoration: none; }
a:hover { color: var(--v626-accent); }

/* ---- Layout shell, capped at 430px on phones ---- */
.v626-wrapper {
  max-width: 430px;
  margin: 0 auto;
  background: var(--v626-bg);
  min-height: 100vh;
  position: relative;
  box-shadow: var(--v626-shadow);
}
@media (min-width: 768px) {
  .v626-wrapper { max-width: 720px; }
  body { font-size: 1.55rem; }
}

/* ---- Header ---- */
.v626-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: 430px;
  margin: 0 auto;
  height: var(--v626-header-h);
  background: linear-gradient(90deg, var(--v626-primary-dark), var(--v626-primary));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
@media (min-width: 768px) {
  .v626-header { max-width: 720px; }
}
.v626-brand {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 1.7rem;
}
.v626-brand img { width: 30px; height: 30px; border-radius: 6px; }
.v626-brand span { color: var(--v626-accent); }
.v626-header-actions { display: flex; align-items: center; gap: 6px; }
.v626-btn {
  border: none;
  cursor: pointer;
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 1.3rem;
  font-family: inherit;
  transition: transform .15s ease, opacity .15s ease;
  min-height: 36px;
}
.v626-btn:active { transform: scale(0.94); }
.v626-btn-register { background: var(--v626-accent); color: #3A3A3A; }
.v626-btn-login { background: #fff; color: var(--v626-primary-dark); }
.v626-btn-ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  padding: 6px 10px; font-size: 1.6rem; border-radius: 8px;
}

/* ---- Mobile expandable menu ---- */
.v626-menu-btn { background: rgba(255,255,255,.15); color:#fff; border:none; border-radius:8px; padding:6px 9px; font-size:1.7rem; cursor:pointer; }
#v626-mobile-menu {
  position: fixed;
  top: var(--v626-header-h); left: 0; right: 0;
  max-width: 430px; margin: 0 auto;
  background: var(--v626-bg-deep);
  border-top: 2px solid var(--v626-primary);
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  z-index: 9999;
}
#v626-mobile-menu.v626-menu-open { max-height: 480px; }
.v626-menu-list { list-style: none; margin: 0; padding: 6px 0; }
.v626-menu-list li a {
  display: block; padding: 12px 18px;
  color: var(--v626-text); border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 1.45rem;
}
.v626-menu-list li a:hover { background: rgba(77,182,172,.18); color: var(--v626-accent); }

/* ---- Main content with bottom padding for fixed nav ---- */
.v626-main { padding-top: calc(var(--v626-header-h) + 8px); }
@media (max-width: 768px) {
  .v626-main { padding-bottom: calc(var(--v626-bottomnav-h) + 16px); }
}

.v626-container { padding: 14px; }
.v626-section { margin: 22px 0; }
.v626-section-head {
  display:flex; align-items:center; gap:8px;
  margin: 0 0 12px;
}
.v626-section-head h2 {
  margin: 0; font-size: 1.75rem; color: var(--v626-accent);
  border-left: 4px solid var(--v626-primary); padding-left: 8px;
}
.v626-section-head .material-icons { color: var(--v626-primary); font-size: 22px; }
.v626-lead { color: var(--v626-text-soft); font-size: 1.4rem; margin: 0 0 8px; }

/* ---- Carousel ---- */
.v626-carousel {
  position: relative; border-radius: var(--v626-radius); overflow: hidden;
  box-shadow: var(--v626-shadow); margin-bottom: 6px;
}
.v626-slide {
  display: none; position: relative; cursor: pointer;
}
.v626-slide.v626-slide-active { display: block; }
.v626-slide img { width: 100%; height: 180px; object-fit: cover; }
.v626-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  padding: 24px 14px 12px; color: #fff;
}
.v626-slide-cap strong { color: var(--v626-accent); display:block; font-size:1.5rem; }
.v626-slide-cap span { font-size: 1.25rem; color: var(--v626-mint); }
.v626-dots {
  position: absolute; bottom: 8px; right: 12px; display:flex; gap:6px;
}
.v626-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; border: none;
}
.v626-dot.v626-dot-active { background: var(--v626-accent); }

/* ---- Hero / promo strip ---- */
.v626-hero-cta {
  background: linear-gradient(120deg, var(--v626-primary), var(--v626-mint));
  border-radius: var(--v626-radius); padding: 14px; color: #1f2a28;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin: 14px 0;
}
.v626-hero-cta h2 { margin:0; font-size:1.7rem; color:#234; }
.v626-hero-cta p { margin:4px 0 0; font-size:1.3rem; }
.v626-cta-pill {
  background: var(--v626-accent); color:#3A3A3A; font-weight:800;
  padding: 10px 18px; border-radius: 24px; border:none; cursor:pointer; font-size:1.35rem;
  white-space: nowrap;
}

/* ---- Game grid ---- */
.v626-cat-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.v626-cat-tabs a {
  white-space: nowrap; padding: 7px 14px; border-radius: 18px;
  background: var(--v626-surface); color: var(--v626-text-soft); font-size:1.3rem;
}
.v626-cat-tabs a:hover { background: var(--v626-primary); color:#fff; }
.v626-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (min-width: 480px) { .v626-grid { grid-template-columns: repeat(4, 1fr); } }
.v626-card {
  background: var(--v626-surface); border-radius: var(--v626-radius);
  overflow: hidden; cursor: pointer; position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  text-align: center;
}
.v626-card:active { transform: scale(0.96); }
.v626-card img {
  width: 100%; height: 84px; object-fit: cover; background:#222;
}
.v626-card-name {
  font-size: 1.15rem; padding: 5px 4px 7px; color: var(--v626-text);
  line-height: 1.3; min-height: 34px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.v626-card:hover .v626-card-name { color: var(--v626-accent); }
.v626-card-tag {
  position: absolute; top: 4px; left: 4px;
  background: var(--v626-accent); color: #3A3A3A;
  font-size: 1rem; padding: 1px 6px; border-radius: 6px; font-weight: 700;
}

/* ---- Info / feature cards ---- */
.v626-info-grid {
  display:grid; grid-template-columns: repeat(2,1fr); gap:10px;
}
.v626-info-card {
  background: var(--v626-surface); padding: 12px; border-radius: var(--v626-radius);
  text-align:center;
}
.v626-info-card i, .v626-info-card .material-icons, .v626-info-card bi {
  font-size: 28px; color: var(--v626-primary);
}
.v626-info-card h3 { margin: 6px 0 4px; font-size: 1.4rem; color:#fff; }
.v626-info-card p { margin: 0; font-size: 1.2rem; color: var(--v626-text-soft); }

/* ---- Testimonial / winner ---- */
.v626-row-list { display:flex; flex-direction:column; gap:8px; }
.v626-row-item {
  display:flex; align-items:center; gap:10px;
  background: var(--v626-surface); padding: 10px; border-radius: var(--v626-radius);
}
.v626-row-item .v626-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--v626-primary);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex-shrink:0;
}
.v626-row-item .v626-row-main { flex:1; }
.v626-row-item .v626-row-main strong { color:#fff; font-size:1.35rem; }
.v626-row-item .v626-row-main span { color: var(--v626-accent); font-size: 1.2rem; display:block; }
.v626-row-item time { color: var(--v626-text-soft); font-size: 1.1rem; }

/* ---- Payment chips ---- */
.v626-chips { display:flex; flex-wrap:wrap; gap:8px; }
.v626-chip {
  background: var(--v626-surface); border-radius: 8px; padding: 8px 12px;
  display:inline-flex; align-items:center; gap:6px; color:var(--v626-text-soft); font-size:1.25rem;
}
.v626-chip i, .v626-chip .material-icons { color: var(--v626-mint); font-size: 18px; }

/* ---- FAQ accordion (simple visual) ---- */
.v626-faq { border-radius: var(--v626-radius); overflow:hidden; background: var(--v626-surface); }
.v626-faq details { border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 14px; }
.v626-faq details:last-child { border-bottom: none; }
.v626-faq summary { cursor: pointer; font-weight: 600; color: var(--v626-mint); font-size: 1.35rem; }
.v626-faq p { margin: 8px 0 2px; color: var(--v626-text-soft); font-size: 1.25rem; }

/* ---- CTA banner ---- */
.v626-cta-banner {
  background: linear-gradient(120deg, var(--v626-bg-deep), var(--v626-surface));
  border: 1px solid var(--v626-primary);
  border-radius: var(--v626-radius); padding: 16px; text-align:center; margin: 14px 0;
}
.v626-cta-banner h3 { margin: 0 0 6px; color: var(--v626-accent); }
.v626-cta-banner p { margin: 0 0 12px; color: var(--v626-text-soft); }
.v626-cta-banner .v626-btn { font-size: 1.4rem; padding: 10px 22px; }

/* ---- SEO article block ---- */
.v626-prose p { color: #ececec; font-size: 1.32rem; margin: 0 0 10px; }
.v626-prose h3 { color: var(--v626-mint); font-size: 1.5rem; margin: 14px 0 6px; }
.v626-prose a { font-weight: 600; }

/* ---- Footer ---- */
.v626-footer {
  background: #1c1c1c; color: var(--v626-text-soft);
  padding: 18px 14px calc(var(--v626-bottomnav-h) + 18px);
}
@media (min-width: 769px) {
  .v626-footer { padding-bottom: 28px; }
}
.v626-footer h4 { color: var(--v626-mint); margin: 12px 0 6px; font-size: 1.4rem; }
.v626-footer-links {
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 12px;
}
.v626-footer-links a {
  background: var(--v626-surface); color: var(--v626-text-soft);
  padding: 6px 10px; border-radius: 6px; font-size: 1.2rem;
}
.v626-footer-links a:hover { background: var(--v626-primary); color:#fff; }
.v626-footer-copy { font-size: 1.15rem; color:#888; border-top: 1px solid #333; padding-top: 10px; }

/* ---- Mobile bottom nav (5 buttons, hidden on desktop) ---- */
.v626-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 430px; margin: 0 auto;
  height: var(--v626-bottomnav-h);
  background: linear-gradient(180deg, #2c2c2c, #1c1c1c);
  border-top: 2px solid var(--v626-primary);
  display: flex; justify-content: space-around; align-items: stretch;
  z-index: 1000;
}
.v626-bottomnav button, .v626-bottomnav a {
  flex: 1; min-width: 60px; min-height: 60px;
  background: transparent; border: none; color: var(--v626-text-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 2px; font-family: inherit; cursor: pointer; text-decoration: none;
  transition: color .15s ease, transform .15s ease;
  position: relative;
}
.v626-bottomnav button:active, .v626-bottomnav a:active { transform: scale(0.92); }
.v626-bottomnav .v626-bn-icon { font-size: 22px; line-height: 1; }
.v626-bottomnav .v626-bn-icon.fas,
.v626-bottomnav .v626-bn-icon.far { color: var(--v626-mint); }
.v626-bottomnav .v626-bn-icon.material-icons { color: var(--v626-accent); }
.v626-bottomnav .v626-bn-label { font-size: 1rem; color: var(--v626-text-soft); }
.v626-bottomnav .v626-bn-active .v626-bn-label { color: var(--v626-accent); font-weight:700; }
.v626-bottomnav .v626-bn-active .v626-bn-icon { color: var(--v626-primary); }
.v626-bn-badge {
  position: absolute; top: 6px; right: 18px;
  background: #e53935; color:#fff; font-size: .9rem;
  border-radius: 8px; padding: 0 5px; min-width: 14px; line-height: 14px;
}

@media (min-width: 769px) {
  .v626-bottomnav { display: none; }
  .v626-header .v626-menu-btn { display: none; }
}

/* ---- Utility ---- */
.v626-text-accent { color: var(--v626-accent); font-weight: 700; }
.v626-divider { height: 1px; background: rgba(255,255,255,.08); margin: 14px 0; }
.v626-hide-mobile { display: none; }
@media (min-width: 769px) { .v626-hide-mobile { display: block; } }