/* ================================================
   BANNER
   ================================================ */

/* Logo row — sits ABOVE the glass banner, left-aligned */
.banner-top-logo {
  padding: 10px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.banner-top-logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

/* Glassmorphism wrap — sits around the banner slides */
.banner-glass-wrap {
  position: relative;
  margin: 0 10px 8px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 8px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.10);
  flex-shrink: 0;
}

/* Inner banner — no padding, fills the glass wrap */
.banner-wrap {
  position: relative;
  width: 100%;
  height: 186px;
  overflow: hidden;
  touch-action: pan-y;
  will-change: transform;
}
.banner-track{display:flex;width:100%;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.banner-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;}
.banner-placeholder{text-align:center;pointer-events:none;position:relative;z-index:1;}
.b-title{font-size:22px;font-weight:900;text-shadow:0 0 20px currentColor;}
.b-sub{font-size:12px;color:rgba(255,255,255,.72);margin-top:6px;}
.b-amount{font-size:34px;font-weight:900;color:var(--accent);text-shadow:0 0 30px var(--accent);margin-top:4px;}

/* Dots — JS logic stays, visually hidden */
.banner-dots { display: none; }
.dot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s;}
.dot.active{width:18px;background:var(--accent);}

/* ================================================
   QUICK NAV — compact redesign
   ================================================ */
.quick-nav{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0f0d22,#0c0a1e);
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}

/* Row 1: logos + icons */
.qnav-top{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:7px 12px 5px;
}

/* Row 2: action + inline balance */
.qnav-actions{
  display:flex;align-items:center;
  gap:8px;padding:0 10px 7px;
}

/* ---- Payment Logos ---- */
.pay-logos{display:flex;align-items:center;gap:8px;}
.pay-logo-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:default;}
.pay-logo-item svg{border-radius:9px;}
.pay-logo-label{font-size:7.5px;color:rgba(255,255,255,.38);font-weight:600;letter-spacing:.3px;}
.kbz-anim svg{animation:kbzFloat 3s ease-in-out infinite,kbzGlow 2.5s ease-in-out infinite;}
.wave-anim svg{animation:waveFloat 3s ease-in-out infinite .5s,waveGlow 2.5s ease-in-out infinite .5s;}

/* ---- Nav Icons ---- */
.nav-icons{display:flex;align-items:center;gap:1px;}
.nav-icon-btn{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;padding:4px 7px;background:none;border:none;
  color:#6a6490;font-size:8.5px;font-family:inherit;
  text-decoration:none;border-radius:10px;transition:color .2s;
  position:relative;
}
.nav-icon-btn:active{background:rgba(255,255,255,.06);color:#aaa;}
.nav-ico{
  width:28px;height:28px;
  background:rgba(255,255,255,.05);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
/* Bot accent */
.nav-bot-btn{color:rgba(245,197,24,.75);}
.nav-ico-bot{background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.18);}
/* Bot notification badge */
.bot-notif-badge{
  position:absolute;top:1px;right:3px;
  width:14px;height:14px;
  background:#ef4444;border-radius:50%;
  border:1.5px solid #0c0a1e;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:900;color:#fff;
  animation:notifPulse 2s ease-in-out infinite;
  z-index:2;
}
/* Download accent */
.nav-download-btn{color:rgba(99,179,237,.8);}
.nav-download-btn .nav-ico{background:rgba(99,179,237,.08);border:1px solid rgba(99,179,237,.12);}
/* Metallic မြန်မာ label */
.lang-label{
  font-weight:900;font-size:9px;letter-spacing:.3px;
  background:linear-gradient(180deg,#fff 0%,#d4c57a 25%,#f5e27a 50%,#c9a227 70%,#fff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ---- Login / Wallet buttons ---- */
.login-btn{
  background:linear-gradient(135deg,#1a4fd6,#0e3ab8);
  border:none;border-radius:20px;padding:8px 20px;
  font-size:13px;font-weight:700;color:#fff;
  white-space:nowrap;flex-shrink:0;font-family:inherit;
  box-shadow:0 3px 0 #091e6a,0 5px 14px rgba(26,79,214,.35),inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .15s;letter-spacing:.3px;
  transform:translateY(-1px);
}
.login-btn:active{box-shadow:0 1px 0 #091e6a,0 2px 8px rgba(26,79,214,.2);}
.wallet-btns{display:none;gap:7px;flex-shrink:0;}
.wallet-btn{
  border:none;border-radius:20px;padding:8px 15px;
  font-size:11.5px;font-weight:800;font-family:inherit;
  white-space:nowrap;display:flex;align-items:center;
  gap:4px;transition:all .15s;letter-spacing:.3px;
}
/* 3D press effect */
.wallet-btn.deposit{
  background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
  color:#fff;
  box-shadow:0 3px 0 #0f5c2a,0 5px 14px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-1px);
}
.wallet-btn.deposit:active{box-shadow:0 1px 0 #0f5c2a,0 2px 8px rgba(34,197,94,.2);}
.wallet-btn.withdraw{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;
  box-shadow:0 3px 0 #7a1010,0 5px 14px rgba(239,68,68,.3),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-1px);
}
.wallet-btn.withdraw:active{box-shadow:0 1px 0 #7a1010,0 2px 8px rgba(239,68,68,.2);}

/* ---- Inline Balance (right of wallet buttons) ---- */
.qnav-balance{
  display:none;align-items:center;gap:7px;
  margin-left:auto;flex-shrink:0;
}
.nft-avatar-canvas{
  width:30px;height:30px;flex-shrink:0;border-radius:7px;
  animation:nftGlowPulse 2.8s ease-in-out infinite;
}
@keyframes nftGlowPulse{
  0%,100%{box-shadow:0 0 5px rgba(0,220,255,.3),0 0 10px rgba(0,220,255,.1);}
  50%{box-shadow:0 0 10px rgba(0,220,255,.55),0 0 20px rgba(120,0,255,.2);}
}
.qnav-user-info{display:flex;flex-direction:column;gap:0;min-width:0;}
.qnav-username{font-size:10px;color:rgba(255,255,255,.65);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px;letter-spacing:.2px;}
.qnav-amount-row{display:flex;align-items:baseline;gap:2px;}
.qnav-bal-num{font-size:13px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;}
.qnav-bal-unit{font-size:8px;color:rgba(245,197,24,.55);font-weight:600;}
.qnav-refresh{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.qnav-refresh:active{background:rgba(255,255,255,.18);color:rgba(0,220,255,.9);}
.qnav-refresh.spinning svg{animation:balSpin .7s linear infinite;}
@keyframes balSpin{to{transform:rotate(360deg);}}

/* ================================================
   ANNOUNCE
   ================================================ */
.announce{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--bg2);border-top:1px solid #1c1840;border-bottom:1px solid #1c1840;overflow:hidden;flex-shrink:0;}
.announce-icon{flex-shrink:0;color:var(--accent);}
.announce-ticker{overflow:hidden;flex:1;}
.announce-ticker span{display:inline-block;white-space:nowrap;font-size:11px;color:var(--muted);animation:ticker 22s linear infinite;}

/* ================================================
   SIDEBAR — 3D icons
   ================================================ */
.sidebar{width:72px;flex-shrink:0;background:var(--bg2);scrollbar-width:none;overflow-y:auto;}
.sidebar::-webkit-scrollbar{display:none;}
.cat-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.04);
  min-height:64px;cursor:pointer;position:relative;
  background:transparent;transition:all .2s;
}
/* 3D card look */
.cat-item::after{
  content:'';position:absolute;inset:2px;border-radius:8px;
  background:rgba(255,255,255,.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:none;transition:all .2s;
}
.cat-item:active::after{background:rgba(255,255,255,.06);}
.cat-item.active{background:linear-gradient(135deg,rgba(245,197,24,.18),rgba(245,197,24,.06));}
.cat-item.active::after{background:rgba(245,197,24,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
.cat-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cat-lbl{font-size:8.5px;color:var(--muted);text-align:center;line-height:1.3;font-weight:600;}
.cat-item.active .cat-lbl{color:var(--accent);font-weight:800;}

/* ================================================
   GAME GRID
   ================================================ */
.game-area{flex:1;padding:5px;scrollbar-width:none;}
.game-area::-webkit-scrollbar{display:none;}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.game-card{
  aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;transition:transform .15s;
  box-shadow:0 3px 12px rgba(0,0,0,.6);
  will-change: transform;
  transform: translateZ(0);
}
.game-card:active{transform:none;}
.gc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gc-char{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.gc-label{position:relative;z-index:2;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.88) 60%);padding:18px 4px 5px;text-align:center;}
.gc-label span{font-size:8px;font-weight:800;color:#fff;display:block;}
/* Game card image: fade in smoothly to prevent flash */
.gc-bg{animation:gcFadeIn .35s ease-in;}
@keyframes gcFadeIn{from{opacity:0;}to{opacity:1;}}
/* Category label (2nd span) slightly dimmer */
.gc-label span:last-child{color:rgba(255,255,255,.65);font-size:7px;margin-top:1px;}

/* ================================================
   FOOTER
   ================================================ */
.site-footer{padding:24px 20px 18px;text-align:center;border-top:1px solid #1c1840;}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
.footer-logo-text{font-size:15px;font-weight:900;letter-spacing:1px;background:linear-gradient(135deg,var(--accent),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.footer-links a{color:var(--muted);font-size:11px;text-decoration:none;}
.footer-copy{font-size:10px;color:#4a4470;}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE EXTRAS — Social Icons + License Logos + Nav Grid
   ═══════════════════════════════════════════════════════════ */

.hp-extras {
  margin-top: 6px;
  padding: 0 0 4px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* ── 3-Column Nav Links ───────────────────────────────────── */
.hp-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 16px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hp-nav-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.hp-nav-col:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.06);
}
.hp-nav-item {
  font-size: 10px;
  color: rgba(255,255,255,.48);
  line-height: 1.4;
  cursor: pointer;
  transition: color .15s;
}
.hp-nav-item:hover { color: rgba(255,255,255,.75); }

/* ── Divider ──────────────────────────────────────────────── */
.hp-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0 12px;
}

/* ── Social Icons Row ─────────────────────────────────────── */
.hp-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  flex-wrap: wrap;
}
.hp-social-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-social-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hp-social-icon:active { transform: scale(.9); }
.hp-icon-skel {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1a1535 25%, #251e42 50%, #1a1535 75%);
  background-size: 200% 100%;
  animation: hpShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── License Logos ────────────────────────────────────────── */
.hp-license-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 12px;
}
.hp-license-icon {
  height: 28px;
  max-width: 72px;
  object-fit: contain;
  opacity: .75;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  filter: grayscale(20%);
}
.hp-license-icon:hover { opacity: 1; transform: scale(1.05); }
.hp-lic-skel {
  height: 24px;
  width: 56px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1a1535 25%, #251e42 50%, #1a1535 75%);
  background-size: 200% 100%;
  animation: hpShimmer 1.4s ease-in-out infinite;
}

/* ── Disclaimer Text ──────────────────────────────────────── */
.hp-disclaimer {
  padding: 14px 16px 18px;
  font-size: 10.5px;
  color: rgba(255,255,255,.35);
  line-height: 1.65;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ── Skeleton shimmer animation ──────────────────────────── */
@keyframes hpShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================
   GAME CARD — Skeleton shimmer while image loads
   ================================================ */

/* Shimmer pulse shown BEFORE image loads */
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 60%,
    rgba(255,255,255,0)    100%
  );
  background-size: 250% 100%;
  animation: gcShimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
  pointer-events: none;
}

/* Once image loaded (or placeholder shown) — hide shimmer */
.game-card.gc-img-loaded::before {
  display: none;
}

@keyframes gcShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* gc-init: initial letter shown in placeholder */
.gc-init {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  letter-spacing: .5px;
  line-height: 1;
}

/* ================================================
   CATEGORY TAB BAR — Horizontal (replaces sidebar)
   ================================================ */
.cat-tab-bar {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 4px;
  padding: 4px 10px;
  background: #7d8c7d;
  border-bottom: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-overflow-scrolling: touch;
}
.cat-tab-bar::-webkit-scrollbar { display: none; }

/* Items — horizontal: icon LEFT, text RIGHT, flat (no frame) */
.cat-tab-bar .cat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 20px;
  gap: 6px;
  background: transparent;
  border: none;
  min-height: unset;
  cursor: pointer;
  transition: background .15s;
}
.cat-tab-bar .cat-item::after { display: none; }
.cat-tab-bar .cat-item:active { background: rgba(0,0,0,.12); }
.cat-tab-bar .cat-item.active {
  background: rgba(255,255,255,.22);
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

/* Icon wrapper — SVG items */
.cat-tab-bar .cat-ico {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Real logo images */
.cat-tab-bar .cat-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
  display: block;
}

/* Label text — visible on #7d8c7d */
.cat-tab-bar .cat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.cat-tab-bar .cat-item.active .cat-lbl {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,.30);
}

/* Full-width game grid (no sidebar) */
.game-area {
  flex: 1;
  padding: 10px 10px 0;
  scrollbar-width: none;
  min-height: 0;
}
.game-area::-webkit-scrollbar { display: none; }

/* 3-col grid — proper spacing so cards don't touch */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ================================================
   GLASSMORPHISM THEME — #354d46 green BG
   ================================================ */

/* Home page: rich layered green background */
#homePage {
  background:
    radial-gradient(ellipse at 15% 25%, rgba(100,180,130,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(40,100,70,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(60,90,70,.15) 0%, transparent 80%),
    #354d46;
}

/* Quick nav — glass */
.quick-nav {
  background: rgba(30,55,44,.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Announce bar — glass tint */
.announce {
  background: rgba(25,50,38,.65) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.announce-ticker span { color: rgba(255,255,255,.62) !important; }

/* Category tab bar — solid #7d8c7d (override glass) */
.cat-tab-bar {
  background: #7d8c7d !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
}
.cat-tab-bar .cat-item {
  background: transparent !important;
  border: none !important;
}
.cat-tab-bar .cat-item.active {
  background: rgba(255,255,255,.22) !important;
  border: none !important;
}

/* ── Game card wrap (grid item) ────────────────────── */
.game-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}
.game-card-wrap:active .game-card { transform: none; }

/* ── Game card ─────────────────────────────────────── */
.game-card {
  aspect-ratio: 1 / 1;
  border-radius: 12px !important;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  width: 100%;
  transition: transform .15s;
  will-change: transform;
  transform: translateZ(0);
  background: rgba(60,60,80,.55) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.30) !important;
}
/* Loaded — image fills card, no shimmer */
.game-card.gc-img-loaded {
  background: transparent !important;
}
/* Remove inline gradient bg */
.game-card[style] { background: rgba(60,60,80,.55) !important; }
.game-card.gc-img-loaded[style] { background: transparent !important; }

/* Active state */
.game-card:active { transform: none; }

/* Full-cover image */
.gc-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: 12px;
}

/* ── Game name below card ──────────────────────────── */
.gc-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 2px;
  letter-spacing: .1px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* Hide old gc-label (in case any card still has it) */
.gc-label { display: none !important; }

/* ── Skeleton shimmer — green-tinted ──────────────── */
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.07) 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.07) 60%,
    rgba(255,255,255,0)    100%
  );
  background-size: 250% 100%;
  animation: gcShimmer 1.4s ease-in-out infinite;
  border-radius: 12px;
  pointer-events: none;
}
.game-card.gc-img-loaded::before { display: none; }

/* ── Placeholder (initial letter) glass tint ──────── */
.gc-char {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
}

/* ── Bottom nav glass ─────────────────────────────── */
.bottom-nav {
  background: rgba(28,50,40,.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.bnav-btn { color: rgba(255,255,255,.38) !important; }
.bnav-btn.active { color: var(--accent) !important; }


/* ================================================
   PROVIDER FILTER BAR
   Appears below cat-tab-bar ONLY when Slots tab is active.
   Hidden by default (display:none set via JS).
   ================================================ */
.provider-filter-bar {
  display: none;                    /* hidden until JS sets display:flex */
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 6px;
  padding: 6px 10px;
  background: #5a6b5a;              /* slightly darker than cat-tab-bar */
  border-bottom: 1px solid rgba(0,0,0,.14);
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.provider-filter-bar::-webkit-scrollbar { display: none; }

/* Provider button — pill shape */
.prov-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.10);
  border: none;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.prov-item:active { background: rgba(255,255,255,.20); }

/* Active provider pill — teal/green like the screenshot */
.prov-item.active {
  background: #3ecf8e;
  box-shadow: 0 2px 8px rgba(62,207,142,.35);
}

/* Provider logo image */
.prov-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
}

/* Provider label */
.prov-lbl {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.prov-item.active .prov-lbl {
  color: #fff;
  font-weight: 800;
}


/* ================================================
   SCROLL SENTINEL (infinite scroll)
   Invisible strip at bottom of game grid.
   IntersectionObserver watches it to trigger next 20 cards.
   ================================================ */
#loadMoreWrap {
  width: 100%;
  height: 1px;       /* invisible — just a trigger point */
  pointer-events: none;
}

.scroll-sentinel {
  width: 100%;
  height: 1px;
}


/* ================================================
   PROVIDER / CATEGORY QUICK-JUMP GRID
   Below the game grid — 7 cards, 3-column layout.
   ================================================ */

/* ── Provider / Category Section Header ─────────────────── */
.prov-cat-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 12px 2px;
}
.pch-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.pch-label {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  letter-spacing: .3px;
}
.prov-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 12px 10px;
}

.pcg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px 12px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pcg-card:active { background: rgba(255,255,255,.09); }

/* Arcade — spans full width */
.pcg-card--wide {
  grid-column: span 3;
  flex-direction: row;
  gap: 14px;
  padding: 14px 20px;
  justify-content: center;
}
.pcg-card--wide .pcg-logo { width: 90px; height: 52px; }
.pcg-card--wide .pcg-name { font-size: 14px; font-weight: 800; }

.pcg-logo {
  width: 72px;
  height: 46px;
  object-fit: contain;
  display: block;
}

.pcg-svg {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.pcg-name {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.2;
}

/* ================================================
   SEARCH TOGGLE BUTTON (nav-icons area)
   ================================================ */
.nav-ico-search {
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.25);
  transition: background .2s, border-color .2s;
}
.nav-search-btn.active .nav-ico-search {
  background: rgba(99,102,241,.28);
  border-color: rgba(99,102,241,.55);
}
.nav-search-btn.active {
  color: #818cf8;
}

/* ================================================
   SEARCH BAR — GPU-accelerated grid expand
   (grid-template-rows avoids layout/paint thrash)
   ================================================ */
.game-search-bar {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows .22s cubic-bezier(.4,0,.2,1),
              opacity .18s ease;
  will-change: grid-template-rows, opacity;
  contain: layout style;
  background: rgba(10,8,32,.96);
  border-bottom: 1px solid rgba(99,102,241,.15);
  flex-shrink: 0;
}
.game-search-bar.open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
.game-search-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.gsearch-ico {
  flex-shrink: 0;
  opacity: .7;
}
.gsearch-input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.gsearch-input::placeholder { color: rgba(255,255,255,.3); }
.gsearch-input:focus {
  border-color: rgba(99,102,241,.6);
  background: rgba(99,102,241,.08);
}
/* hide browser's native clear button */
.gsearch-input::-webkit-search-cancel-button { display: none; }
.gsearch-clear {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.07);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gsearch-clear:active {
  background: rgba(99,102,241,.25);
  color: #818cf8;
}

/* ================================================
   HOME PREVIEW SECTIONS (Live / Fish / Arcade)
   Fixed-count game card grids below provider grid.
   ================================================ */
.home-section {
  padding: 0 0 10px;
}
.hs-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 12px 6px;
}
.hs-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.hs-label {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  letter-spacing: .3px;
}
.hs-grid {
  padding: 0 8px;
}