:root{--gold:#ffcc40;--red:#e00000;--black:#000;--border:#d4af37;--card:#111;}
*{margin:0;padding:0;box-sizing:border-box}

/* ===== MOBILE VIEW FIX (Start) ===== */
body {
    font-family: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background-color: #1a1a1a; /* Background outside mobile view */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.mobile-wrapper {
    width: 100%;
    max-width: 414px; /* Fixed width like a large phone */
    height: 100vh;    /* Full height of the viewport */
    max-height: 896px; /* Max height to simulate phone screen */
    background: #0b0b0b; /* Main site background */
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    overflow-y: auto; /* Scrollable content */
    overflow-x: hidden;
    position: relative;
}

/* Optional: Add rounded corners and border only on larger screens */
@media (min-width: 768px) {
    .mobile-wrapper {
        border-radius: 30px;
        border: 10px solid #333; /* Simulates phone bezel */
        margin: 20px auto;
        height: 800px; /* Fixed height on desktop */
    }
    /* Custom Scrollbar for desktop view */
    .mobile-wrapper::-webkit-scrollbar { width: 5px; }
    .mobile-wrapper::-webkit-scrollbar-track { background: #0b0b0b; }
    .mobile-wrapper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }
}
/* ===== MOBILE VIEW FIX (End) ===== */

a{color:var(--gold);text-decoration:none}
.container{max-width:100%; padding: 0 5px; margin:0 auto} /* Adjusted for mobile wrapper */

 #velki-header{
    background:var(--gold);display:flex;align-items:center;justify-content:space-between;
    padding:3px 5px;border-bottom:2px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,.25);
    position:sticky;top:0;z-index:1000
  }
#menu-toggle{display:none}.menu-toggle-label{background:#000;border-radius:4px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.menu-toggle-label span{display:block;width:20px;height:2px;background:var(--gold)}
.header-logo img{height:30px;width:auto}.header-buttons{display:flex;gap:6px}
.btn{font-weight:900;padding:5px 10px;border-radius:8px;font-size:0.9rem;border:1.5px solid #fff} /* Slightly smaller font */
.btn.signup{background:var(--red);color:#fff}.btn.login{background:#000;color:#fff}
#menu-toggle{display:none}.menu-toggle-label{background:#000;border-radius:4px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.menu-toggle-label span{display:block;width:20px;height:2px;background:var(--gold);border-radius:2px}
.header-logo img{height:30px;width:auto}.header-buttons{display:flex;gap:6px}
.btn{font-weight:900;padding:5px 10px;border-radius:8px;font-size:1rem;border:1.5px solid #fff}
.btn.signup{background:var(--red);color:#fff}.btn.login{background:#000;color:#fff}
#main-menu{position:fixed;top:0;left:-50%;width:50%;height:70%;background:#000;color:#fff;transition:left .35s ease;z-index:999;padding:20px;overflow-y:auto}
#menu-toggle:checked~#main-menu{left:0}#menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.3s;z-index:998}
#menu-toggle:checked~#menu-overlay{opacity:1;pointer-events:all}.nav-links a{color:#fff;display:block;padding:7px 9px;border-radius:6px}
.velki-alert-bar{background:linear-gradient(90deg,#111,#000);color:#fff;padding:2px 0;overflow:hidden;border-top:1px solid #ffcc40;border-bottom:1.1px solid #e00000;margin-top:5px}
  .scroll-wrapper{display:flex;width:max-content;animation:scroll-loop 25s linear infinite}
  .scroll-text{font-size:12px;font-weight:700;text-transform:uppercase;padding-right:80px;white-space:nowrap}
  @keyframes scroll-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{position:relative;overflow:hidden;border-radius:10px;background:#0b0d10;margin:8px 0}
.hero-track{display:flex;transition:transform .4s ease;height:120px}
.hero img{width:100%;height:120px;object-fit:cover;flex:0 0 100%}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);background:#0008;border:0;color:#fff;border-radius:999px;width:32px;height:32px;cursor:pointer;z-index:2}
.hero-nav.prev{left:6px}.hero-nav.next{right:6px}

.nav{display:flex;justify-content:space-around;align-items:center;background:#000;padding:2px 0;gap:2px;border-radius:12px;margin:10px auto} /* Removed max-width */
.nav div{cursor:pointer;width:18%; /* Responsive width */ aspect-ratio: 1/1; border-radius:14px;background:#111;display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 0 1px #222;transition:transform .25s,background .25s,box-shadow .25s}
.nav div.active{background:#f6b500;box-shadow:0 0 10px rgba(246,181,0,.7),0 0 20px rgba(255,215,0,.4);transform:scale(1.06)}
.nav img{width:60%;height:auto;display:block;pointer-events:none} /* Responsive icon size */

.sports-subnav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px auto 0;}
.sports-subnav button{background:#0e0e0e;color:#fff;border:1px solid #1f1f1f;border-radius:999px;padding:6px 10px;font-weight:700;cursor:pointer; font-size: 0.85rem; transition:.2s}
.sports-subnav button.active{background:#f6b500;color:#000;border-color:#f6b500}

#promo-box{text-align:center;margin-top:10px;min-height:100px}
#odds-box{width:100%;margin:10px auto;min-height:200px}
#tbl-sec{margin:10px auto;width:100%}
#tbl-sec iframe{width:100%;height:450px;border:none;border-radius:8px;background:#111}

/* ODDS CONTAINER STYLE (Hidden by default) */
#odds-container { min-height: 150px; transition: opacity .3s ease; display: none; margin-top: 15px; }
 
.seo-content {
  background: #ffffff;
  color: #111111;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  line-height: 1.7;
  font-size: 1rem;
}

.seo-content h1,
.seo-content h2 {
  color: #ffcc40;
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.1rem;
}

details.expandable {
  margin-top: 0.5rem;
}

summary.expand-toggle {
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #f9f9f9;
  color: #111111;
  font-weight: 600;
  transition: all 0.3s ease;
}

summary.expand-toggle:hover {
  background: #ffcc40;
  color: #111;
}

summary.expand-toggle::-webkit-details-marker {
  display: none;
}

details[open] > summary.expand-toggle::after {
  content: "  View more ";
}

summary.expand-toggle::after {
  content: "VELKI";
}
footer{background:#000;padding:12px 8px;margin-top:14px}
.footer-main{display:flex;flex-direction: column; /* Stack footer on mobile */ gap:16px}
.footer-col{flex:1 1 auto}
.footer-links a{color:#ffeb3b; font-size: 0.9rem;}
.pay img{width:100%;height:auto;max-width:100%;object-fit:contain;margin-top:8px}
.social ul{display:flex;justify-content:center;gap:10px;list-style:none;padding:0;margin:16px 0 0; flex-wrap: wrap;}
.social img{width:30px;height:30px;transition:.25s} /* Slightly smaller social icons */

/* Typography adjustments for small screens */
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p, li { font-size: 0.95rem; line-height: 1.5; }