/* =========================================================================
   MOSTPLAY EXACT THEME OVERRIDES (Mobile Drawer & Front Page)
   ========================================================================= */

/* --- 1. Global Page Background & Colors --- */
body, html {
  background-color: #efeff0 !important;
  color: #0e2749 !important;
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- 2. Top Header Styling (MostPlay Gradient + Buttons) --- */
header, 
.layout-desktop__header-inner,
.site-header {
  background: linear-gradient(180deg, #18417c 0%, #054ea1 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Header Action Buttons */
.header .login-btn,
.header__btn--primary,
header .btn-login,
button.btn-login,
.header-login-btn {
  background: #f4b600 !important;
  color: #0e2749 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  border: none !important;
}

.header .signup-btn,
.header__btn--secondary,
header .btn-register,
button.btn-register,
.header-register-btn {
  background: #e2e4e8 !important;
  color: #0e2749 !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  border: none !important;
}

/* --- 3. Category Navigation Ribbon (Gold / Amber Bar) --- */
.category-nav,
.game-type-nav,
nav.game-type,
.nav-category {
  background: #f4b600 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.category-nav .nav-item,
.game-type-nav li,
nav.game-type li {
  color: #0e2749 !important;
  font-weight: 700 !important;
}

.category-nav .nav-item.active,
.game-type-nav li.active,
nav.game-type li.active {
  background: #054ea1 !important;
  color: #f4b600 !important;
  border-radius: 6px 6px 0 0 !important;
}

/* --- 4. Game Lobby & Cards Grid --- */
.games-main,
.game-list,
.game-grid,
app-game-list {
  background: #efeff0 !important;
}

.game-box,
.game-item,
.games-box {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}

.game-box .game-title,
.game-item .game-name,
.games-box p {
  color: #0e2749 !important;
  font-weight: 600 !important;
}

/* --- 5. Mobile Side Menu / Drawer (Exact MostPlay Look) --- */
.menu,
app-side-menu .menu,
.member-menu {
  background: #efeff0 !important;
}

.menu-mask {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Drawer Header Card (Blue Mostplay Card) */
.menu-header,
.menu-top .menu-header {
  background: linear-gradient(180deg, #18417c 0%, #054ea1 100%) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 4px 12px rgba(5, 78, 161, 0.25) !important;
}

.menu-header .member-name,
.menu-header .member-name span,
.menu-header .account span,
.menu-header span {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* Afterlogin / Beforelogin bar below Header */
.menu-first .beforelogin,
.menu-first .afterlogin {
  background: #093c7d !important;
  border-radius: 0 0 10px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.menu-first .beforelogin a,
.menu-first .beforelogin .login-button a,
.menu-first .beforelogin .register-button a {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.menu-first .beforelogin .register-button a {
  color: #f4b600 !important;
}

/* Wallet and Balance */
.menu-first .afterlogin .main-wallet .wallet,
.menu-first .afterlogin .main-wallet .amount {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.menu-first .afterlogin .main-wallet .amount {
  color: #f4b600 !important;
}

/* Close Button (White X on dark/blue top right) */
.menu .btn-close,
.menu.active .btn-close {
  background-color: #ffffff !important;
  opacity: 0.9 !important;
  cursor: pointer !important;
}

/* Menu Items Grid: Clean White Square Cards */
.menu-first .menu-item ul.item-box,
.menu-first .menu-item ul.contact-box,
.menu-first .menu-item ul.home-box,
.menu-first .menu-item ul.main-box,
.menu-first .menu-item ul {
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

.menu-first .menu-item li,
.menu-first .menu-item .item-box li,
.menu-first .menu-item .contact-box li,
.menu-first .menu-item .home-box li,
.menu-first .menu-item .main-box li {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  width: 100% !important;
  height: 84px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.menu-first .menu-item li:active {
  transform: scale(0.96) !important;
  background: #f8f9fa !important;
}

.menu-first .menu-item li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* Menu Icons */
.menu-first .menu-item li a span,
.menu-first .menu-item li a img,
.menu-first .menu-item li span {
  width: 38px !important;
  height: 38px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin: 0 auto 4px auto !important;
}

/* Menu Text */
.menu-first .menu-item li a p,
.menu-first .menu-item li p {
  color: #0e2749 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
  width: 100% !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Search bar inside menu drawer */
.menu-item .search-box {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  border: 1px solid #e0e0e0 !important;
  margin: 0 10px 12px 10px !important;
  color: #555555 !important;
}

.menu-item .search-box span {
  color: #777777 !important;
  font-size: 13px !important;
}