/* FRENZY96 Lobby hero balance card — B Spacious direction (2026-06-21)
   Teal-green + gold theme to match the new design. Additive; styles only #lobby-hero. */
#lobby-hero{
  margin:0 12px 12px;
  border-radius:18px;
  padding:18px 18px 16px;
  background:linear-gradient(155deg,#1a4651 0%,#123640 55%,#0d2630 100%);
  border:1px solid rgba(30,213,113,0.22);
  box-shadow:0 8px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
}
#lobby-hero::before{
  content:"";position:absolute;top:-40px;right:-30px;width:170px;height:170px;
  background:radial-gradient(circle,rgba(30,213,113,0.18),transparent 70%);
  pointer-events:none;
}
#lobby-hero .lh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;position:relative;}
#lobby-hero .lh-label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,0.55);}
#lobby-hero .lh-cur{font-size:11px;font-weight:600;letter-spacing:.5px;color:#1ED571;}
#lobby-hero .lh-amt{
  font-size:34px;font-weight:700;line-height:1.05;color:#ffffff;
  font-variant-numeric:tabular-nums;letter-spacing:-0.5px;margin-bottom:14px;position:relative;
  font-family:'JetBrains Mono',ui-monospace,monospace;
}
#lobby-hero .lh-btns{display:flex;gap:10px;position:relative;}
#lobby-hero .lh-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  height:46px;border-radius:12px;border:none;cursor:pointer;
  font-size:14px;font-weight:700;letter-spacing:.3px;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
#lobby-hero .lh-btn:active{transform:translateY(1px);}
#lobby-hero .lh-deposit{
  flex:1.5;background:linear-gradient(135deg,#F5C842 0%,#F0B419 100%);color:#3a2b00;
  box-shadow:0 4px 14px rgba(245,200,66,0.35);
}
#lobby-hero .lh-deposit:hover{filter:brightness(1.05);}
#lobby-hero .lh-withdraw{
  background:rgba(255,255,255,0.07);color:#dbe7e6;border:1px solid rgba(255,255,255,0.14);
}
#lobby-hero .lh-withdraw:hover{background:rgba(255,255,255,0.12);}
#lobby-hero svg{width:17px;height:17px;flex-shrink:0;}

/* ---- Lobby unification: inject brand green into the existing teal/cyan theme (2026-06-21) ---- */
/* Active game-category pill → clear brand green (ties to the balance card) */
#sec-popular-games .cat-btn.stanley-game-btn.active,
#sec-popular-games .cat-btn.stanley-game-btn.active.active{
  background:linear-gradient(160deg, rgba(30,213,113,0.20) 0%, rgba(13,38,46,0.92) 100%) !important;
  border-color:rgba(30,213,113,0.55) !important;
  box-shadow:0 4px 14px rgba(30,213,113,0.16), inset 0 0 0 1px rgba(30,213,113,0.14) !important;
}
/* Inactive category pills: nudge cyan border toward green-teal for cohesion */
#sec-popular-games .cat-btn.stanley-game-btn{
  border-color:rgba(30,213,113,0.18) !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}
/* Game tiles: subtle green-teal border + tap feedback (keep dark teal base) */
.og-tile.og-tile{
  border-color:rgba(30,213,113,0.16) !important;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
.og-tile.og-tile:hover{
  border-color:rgba(30,213,113,0.45) !important;
  box-shadow:0 6px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(30,213,113,0.25) !important;
}
.og-tile.og-tile:active{ transform:scale(0.97) !important; }
/* "OUR GAMES" style section titles → small green accent bar */
#sec-popular-games .section-title::before{
  content:"";display:inline-block;width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#1ED571,#16a85a);margin-right:8px;vertical-align:-1px;
}

/* ---- Quick Play row: Recently played / Popular shortcuts (2026-06-21) ---- */
#lobby-quickplay{ margin:0 12px 14px; }
#lobby-quickplay .qp-head{ display:flex;align-items:center;margin:0 2px 8px; }
#lobby-quickplay .qp-title{
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.9);
  display:flex;align-items:center;
}
#lobby-quickplay .qp-title::before{
  content:"";display:inline-block;width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,#1ED571,#16a85a);margin-right:8px;
}
#lobby-quickplay .qp-scroll{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#lobby-quickplay .qp-scroll::-webkit-scrollbar{ display:none; }
#lobby-quickplay .qp-tile{
  flex:0 0 auto;width:72px;background:none;border:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;scroll-snap-align:start;
}
#lobby-quickplay .qp-thumb{
  width:72px;height:72px;border-radius:14px;
  background:#0a3a52 center/cover no-repeat;
  border:1px solid rgba(30,213,113,0.22);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
#lobby-quickplay .qp-tile:hover .qp-thumb{
  border-color:rgba(30,213,113,0.55);box-shadow:0 6px 16px rgba(0,0,0,0.4),0 0 0 1px rgba(30,213,113,0.3);
}
#lobby-quickplay .qp-tile:active .qp-thumb{ transform:scale(0.95); }
#lobby-quickplay .qp-label{
  font-size:9.5px;font-weight:600;color:rgba(255,255,255,0.72);max-width:72px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;letter-spacing:.2px;
}

/* ---- Option 2: green selection accents (green=selected, gold=money CTA) (2026-06-21) ---- */
/* Bottom nav active item: recolor the EXISTING indicator bar (cyan) -> green.
   Bar geometry is set by mobile-phase1.css (.bnav-item.active::before, all !important);
   beat it with higher specificity (nav.bottom-nav ...) + !important on color only. */
nav.bottom-nav .bnav-item.active::before{
  background:linear-gradient(90deg,#1ED571,#16a85a) !important;
  box-shadow:0 0 9px rgba(30,213,113,0.6) !important;
}
/* Banner carousel: active dot -> green pill (was gold); inactive stays dim white */
.hero-dot.active.active{
  background:#1ED571 !important;
  box-shadow:0 0 8px rgba(30,213,113,0.45) !important;
}