/* Best Win - One-Folder build (mobile-first) */
html, body { height: 100%; }
body.bg-cover { background: url('bg.jpg') center/cover no-repeat fixed; }
.card-soft { border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.balance-chip{ background:#0ea5e9; color:#fff; border-radius:999px; padding:.35rem .75rem; font-weight:600; display:inline-block; }
.bottom-nav{ position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:.5rem .75rem; background:#0e1b2a; color:#fff; z-index:999; border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -5px 22px rgba(0,0,0,.35); }
.bottom-nav a{ color:#e8f0fe; text-decoration:none; font-size:.85rem; display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.bottom-nav a.active{ color:#00d4ff;}
/* topbar and hero */
.app-topbar { background: #0e1b2a; color: #e9f4ff; padding: .75rem .9rem; display:flex; align-items:center; justify-content:space-between; }
.app-actions .btn { font-weight:700; border-radius:10px; }
.home-hero { background: #0f1f33 url('hero.png') center/cover no-repeat; border-radius:16px; min-height:180px; position:relative; overflow:hidden; }
.home-hero .banner{ position:absolute; right:14px; top:14px; text-align:right; color:#fff; }
.home-hero .banner .big{ font-size:2rem; font-weight:900; line-height:1; }
.quick-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:.6rem; }
.quick-grid .qcard{ background:#12253a; color:#dfeaf6; border-radius:12px; padding:.65rem .4rem; text-align:center; font-size:.8rem; }
.quick-grid .qcard i{ font-size:1.2rem; display:block; margin-bottom:.3rem; }
/* —— Game tiles —— */
.game-grid a{ color: inherit; }
.game-card{
  min-height: 180px;                /* cabbir isku mid ah */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; text-align:center;
  border-radius:16px;
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.game-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.32);
  border-color: rgba(54,228,168,.35);
}
.game-icon-wrap{
  width: 72px; height: 72px; border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.game-icon{ width:100%; height:100%; object-fit:contain; display:block; }
.game-title{ font-weight:700; }
.game-sub{ color:#9fb0c9; font-size:.85rem }

/* —— Bottom dock nav —— */
.bottom-dock{
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(640px, 94%);
  background: radial-gradient(120% 120% at 50% 0%, rgba(54,228,168,.12), rgba(22,43,69,.92));
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: .35rem .5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  z-index: 1000;
}
.bottom-dock a{
  flex:1; text-decoration:none; color:#cfe0ff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.35rem 0; gap:.15rem; font-size:.8rem;
  border-radius:12px; transition: background .12s ease, color .12s ease, transform .12s ease;
}
.bottom-dock a .dock-img{
  width:22px; height:22px; object-fit:contain; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.bottom-dock a:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.bottom-dock a.active{ color:#36e4a8; background: rgba(54,228,168,.12); }

/* spacing so dock uusan u daboolin content-ka */
.has-dock{ padding-bottom: 92px; }