/* ═══════════════════════════════════════
   GAMEPLUS M-SPEC DESIGN (MOBILE ONLY OVERRIDES)
   Target: screens <= 768px (linked via media query)
   ═══════════════════════════════════════ */

/* 1. LAYOUT & TYPOGRAPHY ADJUSTMENTS */
body {
  padding-top: 56px !important; /* Space for fixed mobile header */
  padding-bottom: 80px !important; /* Space for floating mobile bottom nav */
}
.container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
main.main-content {
  padding-top: 20px !important;
}

/* Titles and Headers */
h1 {
  font-size: clamp(28px, 6vw, 36px) !important;
  letter-spacing: -0.5px !important;
}
h2 {
  font-size: clamp(20px, 5vw, 24px) !important;
}
.ultimate-hero {
  min-height: auto !important;
  padding: 40px 10px !important;
}
.hero-main-title {
  font-size: 38px !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  margin-bottom: 15px !important;
}
.hero-subtitle {
  font-size: 14px !important;
  margin-bottom: 25px !important;
}
.hero-search {
  max-width: 100% !important;
  padding: 4px !important;
}
.hero-search input {
  font-size: 14px !important;
  padding: 0 12px !important;
}
.hero-search button {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}

/* Hide floating decorative cards on mobile */
.hero-floating-cards {
  display: none !important;
}

/* 2. FIXED MOBILE TOP APP BAR */
.nav-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}
.premium-nav {
  border-radius: 0 !important;
  max-width: 100% !important;
  background: rgba(10, 10, 20, 0.85) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
.premium-container {
  height: 56px !important;
  padding: 0 16px !important;
}
.nav-brand img {
  width: 32px !important;
  height: 32px !important;
}

/* Header Action icons */
.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.nav-action-btn {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
}
.nav-user-pill {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  margin-left: 4px !important;
}
.nav-user-pill span {
  display: none !important; /* Hide name, avatar becomes drawer trigger button */
}
.nav-user-pill img {
  width: 34px !important;
  height: 34px !important;
  border: 1.5px solid var(--cyan) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

/* 3. MOBILE BOTTOM NAVIGATION (CAPSULE LOOK) */
.mobile-bottom-nav {
  display: flex !important;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  width: calc(100% - 32px) !important;
  height: 60px !important;
  padding-bottom: 0 !important;
  background: rgba(10, 10, 18, 0.85) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 100px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
  z-index: 1000 !important;
}
.bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text2);
  font-size: 9px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  gap: 2px;
  transition: all 0.2s ease;
}
.bottom-nav-item i {
  font-size: 18px !important;
  transition: transform 0.2s ease, color 0.2s ease;
}
.bottom-nav-item:hover, .bottom-nav-item.active {
  color: white !important;
}
.bottom-nav-item.active i {
  transform: translateY(-3px) scale(1.15);
  color: var(--cyan) !important;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.6));
}
/* Tiny glowing active dot */
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan);
}

/* 4. MOBILE SLIDE-OUT DRAWER */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 290px;
  background: rgba(10, 10, 18, 0.95);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-left: 1px solid rgba(0, 229, 255, 0.15);
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.9);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.open {
  transform: translateX(0);
}
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer Content Elements */
.drawer-header {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
  object-fit: cover;
}
.drawer-avatar-fallback {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--cyan);
  border: 2px solid rgba(0, 229, 255, 0.3);
}
.drawer-username {
  font-weight: 800;
  font-size: 16px;
  color: white;
}
.drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text2);
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
}
.drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Drawer Profile Stats */
.drawer-stats {
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.drawer-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.drawer-stat-row:last-child {
  margin-bottom: 0;
}
.drawer-stat-label {
  font-size: 12px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
}
.drawer-stat-value {
  font-size: 14px;
  font-weight: 900;
  color: white;
}

/* Level Progress */
.drawer-level-container {
  margin-top: 15px;
}
.drawer-level-bar-bg {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  margin-top: 6px;
}
.drawer-level-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* Drawer Links */
.drawer-menu {
  flex: 1;
  overflow-y: auto;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text2);
  text-decoration: none;
  transition: all 0.2s ease;
}
.drawer-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: var(--text3);
  transition: color 0.2s;
}
.drawer-link:hover, .drawer-link.active {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}
.drawer-link:hover i, .drawer-link.active i {
  color: var(--cyan);
}
.drawer-link-danger {
  color: #ff4d4d;
}
.drawer-link-danger:hover {
  background: rgba(255, 77, 77, 0.1) !important;
  color: #ff4d4d !important;
}
.drawer-link-danger:hover i {
  color: #ff4d4d !important;
}

/* 5. HORIZONTAL SWIPE GRIDS */
.swipe-track {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 16px !important;
  padding: 10px 4px 20px 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.swipe-track::-webkit-scrollbar {
  display: none !important;
}
.swipe-track > .card, .swipe-track > .lb-row, .swipe-track > a {
  flex: 0 0 85% !important;
  scroll-snap-align: start !important;
  max-width: 85% !important;
}

/* 6. LEADERBOARD MOBILE COMPACTING */
.lb-glass-panel {
  padding: 20px 15px !important;
}
.lb-stats-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.lb-stat-card {
  padding: 15px !important;
}

/* Horizontal game tabs */
.lb-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
  padding-bottom: 12px !important;
  gap: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  margin-bottom: 20px !important;
}
.lb-tabs::-webkit-scrollbar {
  display: none !important;
}
.lb-tab-btn {
  flex: 0 0 auto !important;
  padding: 8px 16px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

/* Compact podium on mobile */
.podium-container {
  gap: 10px !important;
  min-height: auto !important;
  height: 240px !important;
  margin-bottom: 30px !important;
}
.podium-item {
  width: 95px !important;
}
.podium-item.rank-1 {
  width: 115px !important;
}
.podium-avatar {
  width: 60px !important;
  height: 60px !important;
}
.rank-1 .podium-avatar {
  width: 80px !important;
  height: 80px !important;
}
.podium-name {
  font-size: 11px !important;
}
.rank-1 .podium-name {
  font-size: 13px !important;
}
.podium-step {
  padding-top: 15px !important;
}
.rank-1 .podium-step { height: 130px !important; }
.rank-2 .podium-step { height: 95px !important; }
.rank-3 .podium-step { height: 75px !important; }
.podium-rank-num {
  font-size: 30px !important;
}
.rank-1 .podium-rank-num {
  font-size: 40px !important;
}

/* Leaderboard Rows layout compacting */
.lb-row {
  padding: 12px 14px !important;
  gap: 10px !important;
}
.lb-rank {
  width: 24px !important;
  font-size: 14px !important;
}
.lb-avatar {
  width: 32px !important;
  height: 32px !important;
}
.lb-name {
  font-size: 13px !important;
}
.lb-tag {
  padding: 1px 5px !important;
  font-size: 8px !important;
}
.lb-trophies {
  font-size: 13px !important;
}
/* Hide Wins/Losses breakdown on very small devices if crowded */
.lb-wl {
  font-size: 9px !important;
}

/* 7. BOTTOM SHEET FOR MOBILE FILTERS */
.mobile-filters-trigger {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  margin-bottom: 20px;
}
.mobile-filters-trigger i {
  color: var(--cyan);
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(12, 12, 22, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: 24px 24px 0 0;
  z-index: 10000;
  padding: 24px 20px 40px 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bottom-sheet.open {
  transform: translateY(0);
}
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bottom-sheet-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.bottom-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bottom-sheet-title {
  font-weight: 900;
  font-size: 16px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bottom-sheet-close {
  font-size: 18px;
  color: var(--text3);
  cursor: pointer;
}

/* Override existing Filters Panel container on mobile */
.container > div[style*="background: rgba(10, 10, 20, 0.6)"] {
  display: none !important; /* Hide desktop filters container */
}

/* 8. PROFILE & MATCHES MOBILE SPECIFIC DESIGN */
.profile-card-premium {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 20px !important;
  gap: 15px !important;
}
.profile-avatar-container {
  width: 90px !important;
  height: 90px !important;
  margin-right: 0 !important;
}
.profile-username-glow {
  justify-content: center !important;
  font-size: 24px !important;
}
.profile-stats-mini {
  justify-content: center !important;
}
.profile-tabs-header {
  overflow-x: auto !important;
  white-space: nowrap !important;
  justify-content: flex-start !important;
  padding-bottom: 8px !important;
  scrollbar-width: none;
}
.profile-tabs-header::-webkit-scrollbar {
  display: none;
}
.profile-tab-btn {
  flex: 0 0 auto !important;
}

/* Match history optimizations */
.match-card-premium {
  flex-direction: column !important;
  padding: 15px !important;
  gap: 12px !important;
  text-align: center !important;
}
.match-teams-vs-container {
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}
.match-team-block {
  flex-direction: row !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.match-vs-pill {
  margin: 0 auto !important;
}
.match-meta-info {
  align-items: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-top: 10px !important;
  width: 100% !important;
}
.match-time-date {
  text-align: center !important;
}
.match-actions-container {
  width: 100% !important;
  justify-content: center !important;
}

/* Footer optimizations */
.footer-premium {
  padding: 40px 0 20px !important;
  margin-top: 40px !important;
}
.footer-premium div[style*="display: grid"] {
  grid-template-columns: 1fr !important;
  gap: 30px !important;
  text-align: center !important;
}
.footer-premium div[style*="display: grid"] > div {
  align-items: center !important;
}
.footer-premium div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr 1fr !important;
}
.footer-premium div[style*="border-top"] {
  flex-direction: column !important;
  gap: 12px !important;
}

/* Flash notifications adjustments */
.flash-container {
  width: 90% !important;
  left: 5% !important;
  right: 5% !important;
  bottom: 85px !important; /* Stand above bottom nav */
}

/* 9. ACTUAL PROFILE PAGE CLASSES MOBILE OVERRIDES */
.profile-header-body {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 20px 24px 20px !important;
  margin-top: -60px !important;
  gap: 15px !important;
}
.profile-banner {
  height: 140px !important;
}
.profile-avatar {
  width: 110px !important;
  height: 110px !important;
  border-radius: 16px !important;
  border-width: 4px !important;
}
.profile-info {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.profile-name-row {
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
}
.profile-username {
  font-size: 26px !important;
}
.profile-fullname {
  margin-bottom: 12px !important;
}
.profile-badges {
  justify-content: center !important;
  width: 100% !important;
}
.profile-actions {
  justify-content: center !important;
  width: 100% !important;
  margin-top: 15px !important;
}
.stats-ribbon {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
.stat-card {
  padding: 15px !important;
}
.stat-value {
  font-size: 28px !important;
}
.profile-grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

/* Horizontal scrolling tabs nav for Profile tabs */
.tabs-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
  padding: 6px !important;
  gap: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.tabs-nav::-webkit-scrollbar {
  display: none !important;
}
.tabs-nav button, .tabs-nav a {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* 10. GAMES HUB GRID AND CARDS MOBILE OVERRIDES */
.games-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 10px !important;
}
.game-card-premium {
  height: 220px !important;
  border-radius: 16px !important;
}
.game-card-content {
  padding: 15px 12px !important;
}
.game-card-title {
  font-size: 1.1rem !important;
  margin-bottom: 6px !important;
}
.game-card-line {
  height: 2px !important;
  margin-bottom: 8px !important;
}
.game-stats {
  display: none !important; /* Hide stats in grids to save vertical height */
}

/* 11. MATCHES FILTER SCROLL TRACK MOBILE OVERRIDES */
.filter-scroll-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
  padding: 10px 15px !important;
  gap: 10px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  margin-bottom: 20px !important;
}
.filter-scroll-container::-webkit-scrollbar {
  display: none !important;
}
.filter-scroll-container button {
  flex: 0 0 auto !important;
}

/* 12. UTILITY DISPLAY CLASSES MOBILE OVERRIDES */
.mobile-only {
  display: block !important;
}
button.mobile-only, div.mobile-only {
  display: flex !important;
}
.hide-on-mobile, .mobile-only-hide {
  display: none !important;
}

/* 13. DASHBOARD PAGE MOBILE OVERRIDES */
.dash-container {
  padding-top: 1rem !important;
}
.dash-header {
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  gap: 15px !important;
}
.dash-greeting {
  font-size: 20px !important;
  line-height: 1.2 !important;
}
.dash-actions {
  justify-content: center !important;
  gap: 10px !important;
}
.dash-actions a {
  flex: 1 !important;
  font-size: 11px !important;
  padding: 10px 12px !important;
}

/* XP Bar */
.dash-xp-bar {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 15px !important;
  padding: 15px !important;
}
.dash-xp-level {
  margin: 0 auto !important;
}
.dash-xp-info {
  margin-left: 0 !important;
}
.dash-xp-info-top {
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}
.dash-streak {
  margin-left: 0 !important;
  justify-content: center !important;
}

/* Stats Grid */
.dash-stats-row {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
.dash-stat-card {
  padding: 15px 10px !important;
}
.dash-stat-value {
  font-size: 32px !important;
}

/* Quick Actions */
.dash-quick-actions {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.dash-quick-action {
  padding: 15px 10px !important;
}

/* Next Match Widget */
.dash-match-teams {
  flex-direction: column !important;
  gap: 12px !important;
}
.dash-match-team {
  text-align: center !important;
}
.dash-match-vs {
  margin: 0 auto !important;
}

/* My Teams list in dashboard */
.dash-team {
  padding: 12px !important;
}
.dash-team-logo {
  width: 40px !important;
  height: 40px !important;
}
.dash-team-name {
  font-size: 14px !important;
}

/* Friends list in dashboard */
.dash-friend-row {
  padding: 10px !important;
}


/* 14. TEAM FINDER PAGE MOBILE OVERRIDES */
/* Fix the 65px left indentation of description/actions which squeezed content on narrow screens */
.post-card > div[style*="padding-left: 65px"] {
  padding-left: 0 !important;
  margin-top: 15px !important;
}
.post-card {
  padding: 16px !important;
}
.post-card > div[style*="display: flex; justify-content: space-between"] {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.post-card > div[style*="display: flex; justify-content: space-between"] > div[style*="display: flex; gap: 15px"] {
  align-items: flex-start !important;
}
.post-card > div[style*="display: flex; justify-content: space-between"] > div[style*="background: rgba"] {
  align-self: flex-start !important;
}


/* 15. SHOP PAGE MOBILE OVERRIDES */
.container > div[style*="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px"] {
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  gap: 15px !important;
}
.container > div[style*="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px"] > div[style*="background: rgba"] {
  margin: 0 auto !important;
  width: 100% !important;
  justify-content: center !important;
}


/* 16. PREDICTIONS PAGE MOBILE OVERRIDES */
.pred-page {
  padding: 20px 10px 60px !important;
}
.pred-header {
  margin-bottom: 30px !important;
}
.wallet-card {
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  gap: 15px !important;
  padding: 20px 15px !important;
}
.wallet-amount {
  justify-content: center !important;
  font-size: 32px !important;
}
.wallet-card > a {
  width: 100% !important;
  justify-content: center !important;
}
.vote-options {
  flex-direction: column !important;
  gap: 8px !important;
}
.vote-label {
  padding: 12px 10px !important;
}
.bet-row {
  width: 100% !important;
}
.bet-submit {
  padding: 12px 16px !important;
  font-size: 12px !important;
}

/* 17. INDIVIDUAL GAME DETAIL PAGE OVERRIDES */
.game-hero {
  height: auto !important;
  padding: 30px 15px 20px 15px !important;
  margin-bottom: 30px !important;
  border-radius: 16px !important;
}
.game-hero-content {
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  text-align: center !important;
}
.game-hero-icon {
  width: 90px !important;
  height: 90px !important;
  border-radius: 18px !important;
}
.game-hero-title {
  font-size: 32px !important;
  margin-bottom: 8px !important;
}
.game-hero-stats {
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.game-hero-stat {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  flex: 0 1 120px !important;
}
.game-hero-stat-value {
  font-size: 18px !important;
}

/* Individual Game Page headers */
.container > div[style*="margin-top: 50px"], 
.container > div[style*="margin-top: 60px"] {
  margin-top: 30px !important;
}
.container h2[style*="font-size: 28px"] {
  font-size: 20px !important;
  margin-bottom: 20px !important;
}

/* Tournament cards grid collapse */
.grid-3 {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* Teams cards grid collapse */
.teams-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.team-card {
  border-radius: 16px !important;
}
.team-card-banner {
  height: 80px !important;
}
.team-card-logo-wrap {
  width: 60px !important;
  height: 60px !important;
  bottom: -20px !important;
  left: 15px !important;
  border-radius: 12px !important;
}
.team-card-body {
  padding: 30px 15px 15px 15px !important;
}
.team-card-title {
  font-size: 1.15rem !important;
}
.team-desc {
  margin-bottom: 15px !important;
}

/* 18. PRIVATE MESSAGES PAGE OVERRIDES */
.messages-wrapper {
  padding: 0 !important;
  min-height: calc(100vh - 56px - 80px) !important;
}
.messages-glass-container {
  grid-template-columns: 1fr !important;
  height: calc(100vh - 56px - 80px) !important; /* Exact height between fixed header and bottom nav */
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: none !important;
}

/* Inbox Header */
.inbox-header {
  padding: 16px 20px !important;
  background: rgba(0, 0, 0, 0.2);
}
.inbox-header h2 {
  font-size: 18px !important;
}

/* Conversations Panel list */
.convo-list {
  padding: 4px !important;
}
.convo-card {
  padding: 12px 14px !important;
  margin-bottom: 4px !important;
  border-radius: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
}
.convo-name {
  font-size: 15px !important;
}
.convo-preview {
  font-size: 12px !important;
  max-width: 140px !important;
}

/* Chat Header */
.chat-header {
  padding: 12px 16px !important;
  gap: 10px !important;
  background: rgba(10, 10, 18, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.back-btn {
  font-size: 18px !important;
  padding: 6px 10px 6px 0 !important;
}
.chat-header-name {
  font-size: 16px !important;
}
.chat-header-status {
  font-size: 10px !important;
}

/* Messages area scroll box */
.chat-messages-area {
  padding: 15px !important;
  gap: 12px !important;
}
.message-wrapper {
  max-width: 85% !important;
}
.message-bubble {
  padding: 10px 14px !important;
  font-size: 14px !important;
}
.message-time {
  font-size: 10px !important;
  margin-top: 4px !important;
}

/* Input form container at bottom */
.chat-input-container {
  padding: 12px !important;
  background: rgba(10, 10, 18, 0.95) !important;
}
.chat-form {
  padding: 6px 6px 6px 16px !important;
  border-radius: 20px !important;
}
.chat-input {
  font-size: 14px !important;
}
.chat-submit {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}

/* Empty State centering */
.empty-state {
  padding: 20px !important;
}
.empty-state-icon {
  font-size: 60px !important;
}
.empty-state h2 {
  font-size: 20px !important;
}

/* 14. ACCESSIBILITY & TOUCH TARGETS (Nivel 1 Quick Wins) */
button, .btn, .btn-action, .nav-action-btn, .bottom-nav-item, input, select, .nav-link, .nav-link-pill, .tab-btn, a.btn {
  min-height: 48px !important;
}
input, select {
  font-size: 16px !important; /* Previne zoom-ul nedorit pe iOS Safari */
}
/* Asigurare dimensiuni Bottom Nav */
.mobile-bottom-nav {
  height: 65px !important;
}
.bottom-nav-item {
  min-height: 65px !important;
  padding: 5px 0 !important;
}