@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Google+Sans:wght@400;500;700&display=swap');

/* ============================================
   GOOGLE PLAY STORE - 100% NATIVE ANDROID DESIGN
   Complete Rewrite - Mobile First
   ============================================ */

:root {
  --ps-bg: #FFFFFF;
  --ps-bg-surface: #FFFFFF;
  --ps-bg-surface-variant: #F1F3F4;
  --ps-bg-surface-container: #F8F9FA;
  --ps-bg-surface-container-high: #E8EAED;
  --ps-text-primary: #1F1F1F;
  --ps-text-secondary: #444746;
  --ps-text-tertiary: #747775;
  --ps-accent: #0B6D4C;
  --ps-accent-container: #C4E6CF;
  --ps-on-accent-container: #002112;
  --ps-blue: #0B57D0;
  --ps-border: #C4C7C5;
  --ps-border-variant: #E1E3E0;
  --ps-divider: #E1E3E0;
  --ps-radius-xs: 4px;
  --ps-radius-sm: 8px;
  --ps-radius-md: 12px;
  --ps-radius-lg: 16px;
  --ps-radius-full: 9999px;
  --ps-bottom-nav-height: 64px;
  --ps-font: 'Roboto', sans-serif;
  --ps-font-display: 'Google Sans', 'Roboto', sans-serif;
}

*, *::before, *::after {
  font-family: var(--ps-font) !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

html {
  color: var(--ps-text-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: var(--ps-bg) !important;
  color: var(--ps-text-primary);
  margin: 0;
  padding: 0 !important;
}

/* ============================================
   HEADER - Play Store Native (Mobile First)
   ============================================ */

#header.fix-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: var(--ps-bg) !important;
  border-bottom: none !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}

#header.fix-top.scrolled {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.ps-header-row {
  padding: 0 !important;
  background: var(--ps-bg) !important;
}

/* Top row: logo + search (desktop/tablet) or logo + avatar (mobile) */
.ps-header-top {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  gap: 8px;
}

/* Header icon buttons */
.ps-header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s;
  flex-shrink: 0;
}

.ps-header-icon:hover {
  background: var(--ps-bg-surface-variant);
}

/* Logo - Play Store style */
#header .logo {
  font-family: var(--ps-font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ps-text-primary) !important;
  text-decoration: none !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
  background: none !important;
  text-indent: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Desktop/Tablet Search Bar */
.ps-search-bar {
  flex: 1;
  max-width: 720px;
  height: 46px;
  background: var(--ps-bg-surface-variant);
  border-radius: 28px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  margin: 0 8px;
  transition: background 0.2s, box-shadow 0.2s;
  border: none !important;
  box-shadow: none !important;
}

.ps-search-bar:focus-within {
  background: var(--ps-bg) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1) !important;
  border: none !important;
}

.ps-search-icon {
  flex-shrink: 0;
  margin-right: 12px;
}

.ps-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: var(--ps-text-primary) !important;
  font-family: var(--ps-font) !important;
  padding: 0 !important;
  height: 100% !important;
  letter-spacing: 0.2px !important;
}

.ps-search-input::placeholder {
  color: var(--ps-text-secondary) !important;
  font-size: 16px !important;
}

/* Search dropdown */
.ps-search-dropdown {
  position: absolute !important;
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--ps-bg) !important;
  border-radius: var(--ps-radius-md) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  display: none !important;
  z-index: 200 !important;
  padding: 8px 0 !important;
}

/* Avatar circle */
.ps-header-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--ps-accent-container);
  color: var(--ps-accent);
  font-family: var(--ps-font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}

.ps-header-avatar:hover {
  box-shadow: 0 0 0 2px var(--ps-accent);
}

/* === MOBILE SEARCH BAR - Play Store single search === */
.ps-mobile-search {
  display: flex;
  align-items: center;
  height: 46px;
  background: var(--ps-bg-surface-variant);
  border-radius: 28px;
  margin: 0 16px 10px;
  padding: 0 16px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: none !important;
  box-shadow: none !important;
}

.ps-mobile-search:active {
  background: var(--ps-bg-surface-container-high);
}

.ps-mobile-search svg {
  flex-shrink: 0;
}

.ps-mobile-search span {
  flex: 1;
  font-size: 15px;
  color: var(--ps-text-secondary);
  font-family: var(--ps-font) !important;
  letter-spacing: 0.2px;
}

.ps-header-avatar-mobile {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--ps-accent-container);
  color: var(--ps-accent);
  font-size: 12px !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--ps-font-display) !important;
}

/* Mobile: hide desktop search elements, show mobile search */
@media (max-width: 767px) {
  .ps-header-top {
    height: 56px;
    padding: 0 16px;
    gap: 0;
    justify-content: space-between;
  }
  
  .ps-header-icon,
  #tablet-search-button,
  #desktop-menu-button {
    display: none !important;
  }
  
  #header .logo {
    font-size: 22px;
  }
  
  .ps-header-avatar {
    display: flex !important;
  }
}

/* Desktop/tablet: hide mobile search bar */
@media (min-width: 768px) {
  .ps-mobile-search {
    display: none !important;
  }
}

/* ============================================
   SIDEBAR - Play Store Navigation Drawer
   ============================================ */

#sidebar-menu {
  background: var(--ps-bg) !important;
  z-index: 9999 !important;
}

#sidebar-menu .flex.items-center.p-2 {
  background: var(--ps-bg) !important;
  border-bottom: 1px solid var(--ps-border-variant) !important;
}

#sidebar-menu #sidebar a {
  color: var(--ps-text-primary) !important;
  border-left: none !important;
  border-radius: 0 var(--ps-radius-full) var(--ps-radius-full) 0 !important;
  margin-right: 12px;
  padding-left: 8px !important;
  transition: background 0.15s;
  height: 48px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

#sidebar-menu #sidebar a:hover {
  background: var(--ps-bg-surface-variant);
}

#sidebar-menu #sidebar a img {
  border-radius: var(--ps-radius-xs) !important;
  filter: none !important;
}

#sidebar-menu #sidebar .w-full.h-px {
  background: var(--ps-border-variant) !important;
  opacity: 1 !important;
}

#sidebar-menu #back-button svg path {
  fill: var(--ps-text-primary) !important;
}

#sidebar-menu input[type="text"] {
  background: var(--ps-bg-surface-variant) !important;
  color: var(--ps-text-primary) !important;
  border-radius: var(--ps-radius-full) !important;
}

/* Mobile sidebar: full width overlay */
@media (max-width: 767px) {
  #sidebar-menu {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Desktop sidebar: icon rail that expands */
@media (min-width: 1024px) {
  #sidebar-menu {
    width: 72px !important;
    min-width: 72px !important;
    padding-top: 64px !important;
    border-right: 1px solid var(--ps-border-variant) !important;
    overflow: hidden !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 20 !important;
  }
  
  #sidebar-menu:hover {
    width: 280px !important;
    min-width: 280px !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.06) !important;
  }
  
  /* Icon-only mode when not hovered */
  #sidebar-menu:not(:hover) #sidebar a {
    justify-content: center !important;
    padding: 0 !important;
    margin: 4px 12px !important;
    border-radius: 24px !important;
    height: 48px !important;
    width: 48px !important;
    align-items: center !important;
    border-left: none !important;
  }
  
  #sidebar-menu:not(:hover) #sidebar a img {
    margin: 0 !important;
  }
  
  #sidebar-menu:not(:hover) #sidebar a div {
    display: none !important;
  }
  
  #sidebar-menu:not(:hover) #sidebar .w-full.h-px {
    display: none !important;
  }
  
  /* Expanded mode */
  #sidebar-menu:hover #sidebar a {
    border-radius: 0 24px 24px 0 !important;
    margin-right: 12px !important;
    padding-left: 8px !important;
    width: auto !important;
    justify-content: flex-start !important;
  }
  
  #sidebar-menu:hover #sidebar a div {
    display: block !important;
  }
  
  #sidebar-menu:hover #sidebar .w-full.h-px {
    display: block !important;
  }
}

/* ============================================
   BOTTOM NAVIGATION BAR - Play Store Material 3
   ============================================ */

.ps-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ps-bottom-nav-height);
  background: var(--ps-bg-surface);
  border-top: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 9998;
  padding: 8px 0 0;
  box-shadow: 0 -1px 3px 0 rgba(0,0,0,0.06), 0 -1px 2px 0 rgba(0,0,0,0.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ps-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  text-decoration: none;
  color: var(--ps-text-tertiary);
  font-size: 12px;
  font-weight: 400;
  gap: 4px;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.ps-bottom-nav-item .ps-nav-icon {
  width: 56px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ps-radius-full);
  transition: background 0.2s;
  position: relative;
}

.ps-bottom-nav-item .ps-nav-icon i {
  font-size: 24px;
  transition: font-variation-settings 0.2s;
}

/* Active state: green pill behind icon */
.ps-bottom-nav-item.active {
  color: var(--ps-on-accent-container);
}

.ps-bottom-nav-item.active .ps-nav-icon {
  background: var(--ps-accent-container);
}

.ps-bottom-nav-item.active .ps-nav-icon i {
  color: var(--ps-on-accent-container);
  font-variation-settings: 'FILL' 1;
}

.ps-bottom-nav-item .ps-nav-label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.ps-bottom-nav-item.active .ps-nav-label {
  font-weight: 600;
  color: var(--ps-on-accent-container);
}

/* Hide bottom nav on desktop */
@media (min-width: 1024px) {
  .ps-bottom-nav {
    display: none !important;
  }
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ps-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(var(--ps-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================
   MAIN CONTENT AREA - Proper padding
   ============================================ */

.content-area {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
}

/* Mobile: header = ~102px (56px top row + 46px search), bottom nav = 64px */
@media (max-width: 767px) {
  .content-area {
    padding-top: 104px !important;
    padding-bottom: calc(var(--ps-bottom-nav-height) + 16px) !important;
  }
}

/* Tablet: header = 56px single row, no bottom nav */
@media (min-width: 768px) and (max-width: 1023px) {
  .content-area {
    padding-top: 64px !important;
    padding-bottom: calc(var(--ps-bottom-nav-height) + 16px) !important;
  }
}

/* Desktop: sidebar takes space, no bottom nav */
@media (min-width: 1024px) {
  .content-area {
    padding-top: 64px !important;
    padding-left: 80px !important;
    padding-right: 24px !important;
    max-width: 1200px;
    padding-bottom: 32px !important;
  }
}

@media (min-width: 1920px) {
  .content-area {
    padding-left: 260px !important;
  }
}

/* Body padding for bottom nav */
@media (max-width: 1023px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* ============================================
   TOP INFO BANNER - Play Store Promo Card
   ============================================ */

.top-info-banner {
  background: linear-gradient(135deg, #0B6D4C 0%, #34A853 100%) !important;
  border-radius: var(--ps-radius-lg) !important;
  margin: 4px 16px 20px !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.top-info-banner .info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}

/* ============================================
   CATEGORY CHIPS - Play Store Style
   ============================================ */

.home-categories-tags-container {
  padding: 0 16px;
  margin-bottom: 0;
}

.home-categories {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 8px 0 !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ps-border-variant);
  margin-bottom: 16px;
}

.home-categories::-webkit-scrollbar {
  display: none;
}

.home-categories a {
  background: transparent !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius-sm) !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ps-text-primary) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s;
  box-shadow: none !important;
}

.home-categories a:hover {
  background: rgba(11,109,76,0.06) !important;
  border-color: var(--ps-accent) !important;
  color: var(--ps-accent) !important;
}

.home-categories a img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  border-radius: var(--ps-radius-xs) !important;
  margin: 0 !important;
}

.home-categories a:last-child {
  border: 1px solid var(--ps-accent) !important;
  color: var(--ps-accent) !important;
  background: rgba(11,109,76,0.06) !important;
}

.home-tags {
  display: none !important;
}

/* Category bubble chips */
.ps-category-bubble {
  flex-shrink: 0;
  padding: 6px 14px !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius-sm) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ps-text-primary) !important;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  cursor: pointer;
  font-family: var(--ps-font) !important;
}

.ps-category-bubble:hover {
  background: rgba(11,109,76,0.06) !important;
  border-color: var(--ps-accent) !important;
  color: var(--ps-accent) !important;
}

.ps-category-bubble.active {
  background: rgba(11,109,76,0.12) !important;
  border-color: var(--ps-accent) !important;
  color: var(--ps-accent) !important;
}

.ps-category-bubble img {
  width: 20px;
  height: 20px;
  border-radius: var(--ps-radius-xs);
  object-fit: contain;
}

/* ============================================
   GAME CARDS - Play Store Vertical Cards
   ============================================ */

/* Game grid layout - 3 cols on mobile */
.home-games-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 0 16px;
}

@media (min-width: 600px) {
  .home-games-list {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  .home-games-list {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 1440px) {
  .home-games-list {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* Individual game card - Play Store vertical card */
.new-games-list {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  position: relative !important;
  transition: none;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  animation: ps-fade-in 0.25s ease-out;
}

.new-games-list:hover {
  transform: none;
}

/* Square thumbnail with rounded corners */
.new-games-list img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s ease !important;
  display: block;
}

.new-games-list:hover img {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
}

/* Remove inline width/height that break aspect ratio */
.new-games-list img[width],
.new-games-list img[height] {
  width: 100% !important;
  height: auto !important;
}

/* Game name below thumbnail - Play Store 2-line title */
.ps-game-card-title {
  font-family: var(--ps-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ps-text-primary) !important;
  margin-top: 8px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
  width: 100% !important;
  letter-spacing: 0.1px;
}

@media (min-width: 600px) {
  .ps-game-card-title {
    font-size: 13px !important;
  }
}

/* Grid items: overlay text should be relative below image */
.grid .new-games-list .absolute.bottom-0 {
  position: relative !important;
  background: transparent !important;
  color: var(--ps-text-primary) !important;
  backdrop-filter: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 6px 0 0 !important;
  border-radius: 0 !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
}

/* Remove dark overlay backgrounds from game names in grid */
.new-games-list .absolute.bottom-0.bg-black {
  background: transparent !important;
}

/* Featured/new icon positioning */
.new-games-list .absolute.top-0 {
  z-index: 5;
}

/* ============================================
   FEATURED CAROUSEL - Horizontal scroll
   ============================================ */

.ps-section {
  margin-bottom: 28px;
}

.ps-section:first-child {
  margin-top: 4px;
}

/* Featured carousel horizontal scroll */
.home-top-games-list-carousel {
  display: flex !important;
  gap: 12px !important;
  padding: 4px 16px 12px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.home-top-games-list-carousel::-webkit-scrollbar {
  display: none;
}

/* Featured carousel cards - wider 16:9 */
.home-top-games-list-carousel > a,
.home-top-games-list-carousel .new-games-list,
.home-top-games-list-carousel .home-top-games-list {
  flex-shrink: 0 !important;
  width: auto !important;
}

.home-top-games-list-carousel img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.home-top-games-list-carousel .new-games-list img,
.home-top-games-list-carousel .home-top-games-list img,
.home-top-games-list-carousel a img {
  width: 280px !important;
  height: 158px !important;
  aspect-ratio: 16/9 !important;
}

@media (max-width: 599px) {
  .home-top-games-list-carousel .new-games-list img,
  .home-top-games-list-carousel .home-top-games-list img,
  .home-top-games-list-carousel a img {
    width: 256px !important;
    height: 144px !important;
  }
}

/* Featured card text overlay */
.home-top-games-list-carousel .absolute.bottom-0 {
  position: absolute !important;
  background: linear-gradient(transparent, rgba(0,0,0,0.65)) !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 24px 12px 10px !important;
  border-radius: 0 0 var(--ps-radius-md) var(--ps-radius-md) !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* ============================================
   SECTION HEADERS - Play Store Style
   ============================================ */

.mb-5 h2,
.mb-6 h2,
.ps-section h2 {
  font-family: var(--ps-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ps-text-primary) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
}

@media (max-width: 599px) {
  .mb-5 h2,
  .mb-6 h2,
  .ps-section h2 {
    font-size: 17px !important;
  }
}

/* "See more" links - Play Store green */
a.text-violet-500,
.text-violet-500 {
  color: var(--ps-accent) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  letter-spacing: 0.1px;
}

a.text-violet-500:hover {
  text-decoration: underline !important;
}

/* ============================================
   HORIZONTAL CAROUSEL SECTIONS
   ============================================ */

.splide-items-container {
  display: flex !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.splide-items-container::-webkit-scrollbar {
  display: none;
}

.splide-items-container a {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0;
}

@media (min-width: 600px) {
  .splide-items-container a {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }
}

@media (min-width: 1024px) {
  .splide-items-container a {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

.splide-items-container a img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none;
}

.splide-items-container a .ps-game-card-title {
  max-width: 140px !important;
}

/* ============================================
   TAG CHIPS
   ============================================ */

.ps-chip {
  background: var(--ps-bg-surface-variant) !important;
  border: none !important;
  border-radius: var(--ps-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ps-text-secondary) !important;
  font-family: var(--ps-font) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
  cursor: pointer !important;
}

.ps-chip:hover {
  background: var(--ps-bg-surface-container-high) !important;
}

/* ============================================
   HIDE UNUSED ELEMENTS
   ============================================ */

#special-page-header-desc {
  display: none;
}

.hide-text {
  display: none !important;
}

.ad728list {
  display: none !important;
}

#mobile-search-button,
#mobile-avatar {
  display: none !important;
}

/* ============================================
   CONTENT WRAPPER
   ============================================ */

#content {
  max-width: 100%;
}

#content.space-y-5 {
  gap: 0 !important;
  padding: 0;
}

#content.space-y-5 > div {
  margin-bottom: 24px;
}

.content-area > div {
  max-width: 100%;
}

/* ============================================
   FOOTER / BOTTOM AREA
   ============================================ */

.p-5.my-6,
.p-5.my-8,
.p-5.bg-\[\#F8F9FA\] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin: 0 !important;
}

.footer-description {
  color: var(--ps-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.modal-footer-open {
  color: var(--ps-accent) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-size: 14px !important;
}

.modal-footer-open:hover {
  text-decoration: underline !important;
}

/* Bottom action buttons */
.space-y-2 a,
.space-y-2 div {
  font-family: var(--ps-font) !important;
  border-radius: var(--ps-radius-full) !important;
  height: 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}

.space-y-2 a {
  border: 1px solid var(--ps-border) !important;
  color: var(--ps-accent) !important;
  background: transparent !important;
}

.space-y-2 a:hover {
  background: rgba(11,109,76,0.08) !important;
}

.space-y-2 div.bg-\[\#0B6D4C\] {
  background: var(--ps-accent) !important;
  color: white !important;
}

.space-y-2 div.bg-\[\#0B6D4C\]:hover {
  background: #095A3E !important;
}

/* ============================================
   SEARCH RESULTS
   ============================================ */

#search-results-desktop {
  background: var(--ps-bg-surface) !important;
  border: none !important;
  border-radius: var(--ps-radius-md) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

#search-results {
  background: var(--ps-bg-surface) !important;
}

#search-results a,
#search-results-desktop a {
  color: var(--ps-text-primary) !important;
}

.search-result-item {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--ps-divider);
}

/* ============================================
   CATEGORY & TAG PAGES
   ============================================ */

#game-list-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 0 16px;
}

@media (min-width: 600px) {
  #game-list-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

@media (min-width: 1024px) {
  #game-list-container {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 1440px) {
  #game-list-container {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

#game-list-container .new-games-list img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

#game-list-container .new-games-list:hover img {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12) !important;
  transform: none !important;
}

#game-list-container .new-games-list .ps-game-card-title {
  font-size: 12px !important;
  color: var(--ps-text-primary) !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
}

@media (min-width: 600px) {
  #game-list-container .new-games-list .ps-game-card-title {
    font-size: 13px !important;
  }
}

/* Category page header */
.flex.items-center.mt-2.mb-4 {
  color: var(--ps-text-primary) !important;
  padding: 0 16px;
}

.flex.items-center.mt-2.mb-4 h1 {
  color: var(--ps-text-primary) !important;
  font-family: var(--ps-font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.flex.items-center.mt-2.mb-4 img {
  border-radius: var(--ps-radius-sm) !important;
}

/* Category list items */
.space-y-2.md\:grid a {
  border: 1px solid var(--ps-border-variant) !important;
  border-radius: var(--ps-radius-md) !important;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ps-text-primary);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

.space-y-2.md\:grid a:hover {
  border-color: var(--ps-accent) !important;
  background: rgba(11,109,76,0.04) !important;
}

.space-y-2.md\:grid a img {
  border-radius: 6px !important;
}

.space-y-2.md\:grid {
  display: grid !important;
  gap: 8px !important;
}

/* ============================================
   SEARCH PAGE
   ============================================ */

.mb-4.text-xl.font-extrabold.text-white,
.mb-4.text-xl {
  color: var(--ps-text-primary) !important;
  font-family: var(--ps-font-display) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  padding: 0 16px;
}

.search-games-list {
  padding: 0 16px !important;
}

.grid.grid-cols-2.gap-4,
.grid.grid-cols-3.gap-3 {
  padding: 0 16px !important;
}

/* ============================================
   PLAY GAME PAGE
   ============================================ */

.play-now-button {
  background: var(--ps-accent) !important;
  border-radius: var(--ps-radius-full) !important;
  font-family: var(--ps-font-display) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  height: 48px !important;
  text-transform: none !important;
}

.play-now-button:hover {
  background: #095A3E !important;
}

#exit-button {
  background: var(--ps-accent) !important;
  border-radius: var(--ps-radius-full) !important;
  font-weight: 500 !important;
}

/* Top section game detail */
#top-section {
  border-radius: 0 !important;
}

#top-section .text-2xl.font-extrabold,
#top-section .text-2xl {
  font-family: var(--ps-font-display) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
}

/* Fix breadcrumb on game page */
.bg-white.mt-4 a {
  color: var(--ps-accent) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.bg-white.mt-4 a:hover {
  text-decoration: underline !important;
}

.bg-white.mt-4 .space-y-3 h1 {
  color: var(--ps-text-primary) !important;
  font-family: var(--ps-font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

/* Game tags on detail */
.bg-white.mt-4 .flex.flex-wrap.gap-4 a {
  background: var(--ps-bg-surface-variant) !important;
  color: var(--ps-text-primary) !important;
  border-radius: var(--ps-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
}

/* Related games */
.relategames li img {
  border: none !important;
  border-radius: var(--ps-radius-md) !important;
  background: transparent !important;
}

.relategames li a:hover img {
  border: none !important;
}

.play-games-page-game-list .new-games-list img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 1/1 !important;
}

.tag-item {
  background: var(--ps-bg-surface-variant) !important;
  color: var(--ps-text-primary) !important;
  border-radius: var(--ps-radius-sm) !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* ============================================
   MODAL FIXES
   ============================================ */

.modal-close {
  color: var(--ps-text-secondary) !important;
  cursor: pointer !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.15s !important;
}

.modal-close:hover {
  background: var(--ps-bg-surface-variant) !important;
}

.modal-footer .relative.bg-gray-800 {
  background: var(--ps-bg-surface) !important;
  color: var(--ps-text-primary) !important;
}

.modal-footer .text-white {
  color: var(--ps-text-primary) !important;
}

.modal-footer .text-gray-300 {
  color: var(--ps-text-secondary) !important;
}

.modal-footer .modal-close {
  color: var(--ps-text-secondary) !important;
}

.modal-footer .bg-black {
  background: rgba(0,0,0,0.4) !important;
}

/* ============================================
   VIDEO HOVER PREVIEW
   ============================================ */

.video-container {
  border-radius: var(--ps-radius-md) !important;
  overflow: hidden;
}

.video-container video {
  border-radius: var(--ps-radius-md) !important;
}

.splide-items-container .video-container {
  border-radius: var(--ps-radius-md) !important;
}

.splide-items-container .video-container video {
  border-radius: var(--ps-radius-md) !important;
}

/* ============================================
   SCROLLBAR HIDING
   ============================================ */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   DARK THEME ELEMENT OVERRIDES (play.css conflicts)
   ============================================ */

/* Force white backgrounds everywhere */
body, html {
  background: var(--ps-bg) !important;
}

.bg-gray-800 {
  background: var(--ps-bg-surface-container) !important;
}

.text-gray-300 {
  color: var(--ps-text-secondary) !important;
}

.bg-\[\#212233\] {
  background: var(--ps-bg-surface-container) !important;
  color: var(--ps-text-primary) !important;
}

.bg-\[\#1a1b28\] {
  background: var(--ps-bg-surface) !important;
}

.bg-\[\#01875F\] {
  background: var(--ps-accent) !important;
}

.bg-violet-600 {
  background: var(--ps-accent) !important;
}

/* Force text-white on dark backgrounds to be dark */
.text-white:not(#top-section .text-white):not(.play-now-button .text-white):not(#exit-button .text-white):not(.modal-footer .text-white):not(.top-info-banner .text-white):not(.ps-mobile-search .text-white):not(.home-top-games-list-carousel .text-white) {
  color: var(--ps-text-primary) !important;
}

.p-5.text-white.bg-\[\#212233\] {
  background: var(--ps-bg-surface-container) !important;
  color: var(--ps-text-primary) !important;
  border-radius: var(--ps-radius-lg) !important;
}

.p-5.text-white.bg-\[\#212233\] .text-gray-300 {
  color: var(--ps-text-secondary) !important;
}

/* Fix violet to accent color */
.text-violet-500,
a.text-violet-500 {
  color: var(--ps-accent) !important;
}

.ring-violet-600 {
  --tw-ring-color: var(--ps-accent) !important;
}

.fill-violet-500 {
  fill: var(--ps-accent) !important;
}

.border-violet-500 {
  border-color: var(--ps-accent) !important;
}

/* Footer bar */
#footer.fix, #footer {
  background: var(--ps-bg-surface-container) !important;
  border-top: 1px solid var(--ps-border-variant) !important;
  color: var(--ps-text-secondary) !important;
  position: relative !important;
  z-index: 1 !important;
}

#footer .link-b a,
#footer a {
  color: var(--ps-accent) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

#footer span {
  color: var(--ps-text-tertiary) !important;
  font-size: 13px !important;
}

/* ============================================
   RECENTLY PLAYED SECTION
   ============================================ */

.flex.items-stretch.mb-6 {
  padding: 0 16px !important;
  margin-bottom: 24px !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes ps-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   ALERTS & ERRORS
   ============================================ */

.alert.warning {
  background: #FEF7E0 !important;
  color: var(--ps-text-primary) !important;
  border: 1px solid #F9E794 !important;
  border-radius: var(--ps-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}

._a-c {
  color: var(--ps-text-secondary) !important;
  text-align: center !important;
}

._a-c h3 {
  color: var(--ps-text-primary) !important;
  font-weight: 500 !important;
}

.small._a-c {
  text-align: center !important;
  padding: 40px 16px !important;
}

.small._a-c i {
  color: var(--ps-text-secondary) !important;
  font-size: 48px !important;
}

.small._a-c div {
  color: var(--ps-text-secondary) !important;
  font-size: 16px !important;
}

/* ============================================
   COOKIE CONSENT
   ============================================ */

.cookieconsent {
  background: var(--ps-text-primary) !important;
  color: white !important;
  border-radius: var(--ps-radius-md) !important;
}

.cookieconsent a {
  color: #81C995 !important;
}

/* ============================================
   BLOG & PROFILE PAGES
   ============================================ */

.blog-list a {
  color: var(--ps-text-primary) !important;
  text-decoration: none !important;
}

.blog-list a:hover {
  color: var(--ps-accent) !important;
}

#profile-page .text-white {
  color: var(--ps-text-primary) !important;
}

/* ============================================
   GAME PAGE LOADER
   ============================================ */

#preloader_box {
  border-radius: var(--ps-radius-md) !important;
}

#loader_container {
  border-radius: var(--ps-radius-md) !important;
}

/* ============================================
   FOCUS STATES
   ============================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ps-accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================
   SMOOTH SCROLL
   ============================================ */

html {
  scroll-behavior: smooth !important;
}

/* ============================================
   RESPONSIVE SMALL MOBILE (<380px)
   ============================================ */

@media (max-width: 380px) {
  .home-games-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  
  .splide-items-container a {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }
  
  .home-top-games-list-carousel .new-games-list img,
  .home-top-games-list-carousel .home-top-games-list img,
  .home-top-games-list-carousel a img {
    width: 220px !important;
    height: 124px !important;
  }
  
  .ps-game-card-title {
    font-size: 11px !important;
  }
}

/* ============================================
   GAME CARD RATING META (if present)
   ============================================ */

.ps-game-card-meta {
  font-size: 11px;
  color: var(--ps-text-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ps-game-card-rating {
  font-size: 11px;
  color: var(--ps-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ============================================
   PLAY STORE TABS
   ============================================ */

.ps-top-tabs {
  display: flex;
  border-bottom: 2px solid var(--ps-border-variant);
  margin-bottom: 0;
  overflow-x: auto;
  padding: 0 16px;
  scrollbar-width: none;
}

.ps-top-tabs::-webkit-scrollbar {
  display: none;
}

.ps-top-tab {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  cursor: pointer;
  font-family: var(--ps-font) !important;
}

.ps-top-tab.active {
  color: var(--ps-accent);
  border-bottom-color: var(--ps-accent);
}

.ps-top-tab:hover {
  color: var(--ps-accent);
  background: transparent;
}

/* ============================================
   DESCRIPTION EXPAND/COLLAPSE
   ============================================ */

.truncated-description {
  color: var(--ps-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  max-height: 60px;
  overflow: hidden;
}

.show-more-button {
  color: var(--ps-accent) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* ============================================
   PLAY GAME SPECIFIC OVERRIDES
   ============================================ */

#top-section .play-now-button img {
  filter: brightness(0) invert(1) !important;
}

.game-favorite-list .new-games-list img,
.game-played-list .new-games-list img {
  border-radius: var(--ps-radius-md) !important;
  aspect-ratio: 1/1 !important;
}

.flex.gap-3 a img.w-14 {
  border-radius: var(--ps-radius-md) !important;
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1/1 !important;
}

.game-info .bg-black {
  background: rgba(0,0,0,0.32) !important;
}

#ava-game_container {
  border-radius: var(--ps-radius-md) !important;
  overflow: hidden !important;
}

/* Show more games button */
.show-more-games-button {
  background: var(--ps-bg-surface-variant) !important;
  color: var(--ps-text-primary) !important;
  border-radius: 24px !important;
  font-weight: 500 !important;
}

.show-more-games-button:hover {
  background: var(--ps-bg-surface-container-high) !important;
}

/* ============================================
   SEARCH TABLET POSITIONING
   ============================================ */

#search-results-tablet {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--ps-bg);
  z-index: 200;
  display: none;
  max-height: calc(100svh - 80px);
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ============================================
   H1-H6 HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ps-font-display) !important;
}

/* ============================================
   TAILWIND RESPONSIVE CLASS OVERRIDES
   (tailwind.min.css doesn't include breakpoints)
   ============================================ */

/* hidden md:flex - hide on mobile, show on tablet+ */
@media (max-width: 767px) {
  .hidden.md\:flex,
  .hidden.md\:block,
  .hidden.md\:inline-flex {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden.md\:flex {
    display: flex !important;
  }
  .hidden.md\:block {
    display: block !important;
  }
  .md\:hidden {
    display: none !important;
  }
}

/* lg: breakpoint */
@media (min-width: 1024px) {
  .hidden.lg\:flex {
    display: flex !important;
  }
  .lg\:hidden {
    display: none !important;
  }
}

/* ============================================
   HEADER SCROLL SHADOW JS
   ============================================ */

/* Add shadow on scroll for fixed header */

/* ============================================
   MATERIAL ICONS FIX - Ensure icons render
   ============================================ */

.material-icons-round {
  font-family: 'Material Icons Round' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: 'liga' !important;
}

/* Ensure the bottom nav icons don't show text fallback */
.ps-nav-icon .material-icons-round {
  font-family: 'Material Icons Round' !important;
  speak: none !important;
}

/* Also fix the material-icons-outlined class */
.material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  font-feature-settings: 'liga' !important;
}

/* ============================================
   FINAL POLISH - 9/10 Play Store Match
   ============================================ */

/* === Fix "See more" links to be Play Store green === */
a[href*="best-games"],
a[href*="new-games"],
a[href*="featured-games"],
a[href*="played-games"],
a[href*="categories"],
a[href*="tags"],
.text-violet-500,
a.text-violet-500,
a[href*="see-more"],
.flex.justify-between a,
.mb-5 a,
.mb-6 a {
  color: #0B6D4C !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
}

/* === Make "See more" look like Play Store arrow link === */
a[href*="best-games"]:hover,
a[href*="new-games"]:hover,
a[href*="featured-games"]:hover,
a[href*="played-games"]:hover,
a[href*="categories"]:hover,
.text-violet-500:hover,
a.text-violet-500:hover {
  text-decoration: underline !important;
}

/* === Fix the "More" button in Recently Played to be Play Store style === */
.ps-section .bg-violet-500,
.ps-section .bg-violet-600,
a[href*="played-games"].bg-violet-500,
a[href*="played-games"].bg-violet-600 {
  background: transparent !important;
  color: #0B6D4C !important;
  border: 1px solid #C4C7C5 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

/* === Recently Played section: Play Store horizontal scroll style === */
.flex.items-stretch.mb-6 {
  padding: 0 16px !important;
  margin-bottom: 24px !important;
}

/* === Fix the featured card overlay info - make it look like Play Store === */
.home-top-games-list-carousel .absolute.bottom-0 div {
  color: white !important;
}

/* === Ensure "Suggested for you" header has proper padding === */
.ps-section .flex.items-center.justify-between {
  padding: 0 16px;
  margin-bottom: 12px;
}

/* === Play Store: "Recently Played" title style === */
.flex.items-center.gap-2 h2,
.flex.items-center h2,
.mb-4 h2 {
  font-family: 'Google Sans', 'Roboto', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1F1F1F !important;
  letter-spacing: -0.2px !important;
}

/* === Fix the "More" outlined button === */
a.outline,
a[href*="played"].outline,
.outline {
  border: 1px solid #C4C7C5 !important;
  color: #1F1F1F !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* === Fix recently played card styling === */
.flex.items-stretch.mb-6 a {
  text-decoration: none !important;
}

/* === Remove any remaining violet/purple colors === */
.bg-violet-500,
.bg-violet-600 {
  background: #0B6D4C !important;
}

.text-violet-400,
.text-violet-500,
.text-violet-600 {
  color: #0B6D4C !important;
}

.border-violet-500,
.border-violet-600 {
  border-color: #0B6D4C !important;
}

.hover\:bg-violet-500:hover,
.hover\:bg-violet-600:hover {
  background: #095A3E !important;
}

/* === Ensure bottom nav icons are the right color === */
.ps-bottom-nav-item .ps-nav-icon i {
  color: #747775 !important;
}

.ps-bottom-nav-item.active .ps-nav-icon i {
  color: #002112 !important;
}

/* === Clean up the green banner - Play Store promo card === */
.top-info-banner {
  margin: 0 16px 16px !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #0B6D4C 0%, #34A853 100%) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* === Category chips: ensure they are visible === */
.home-categories-tags-container {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.home-categories {
  padding: 8px 16px 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #F1F3F4 !important;
}

/* === Fix the search results dropdown to show on top === */
.ps-search-dropdown,
#search-results-desktop {
  z-index: 9999 !important;
}

/* === Ensure proper game card shadow on mobile === */
@media (max-width: 599px) {
  .new-games-list img {
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }
  
  .ps-game-card-title {
    font-size: 11px !important;
    margin-top: 6px !important;
  }
  
  .home-games-list {
    gap: 10px !important;
    padding: 0 12px !important;
  }
  
  .ps-section {
    margin-bottom: 20px !important;
  }
}

/* === Fix the BackTop button to not interfere === */
#BackTop {
  display: none !important;
}

/* === Clean up any leftover dark text on dark bg === */
.p-5 .text-white {
  color: #444746 !important;
}

/* === Play Store "Install" / "Play" button style for game cards === */
.home-top-games-list-carousel .bg-violet-500,
.home-top-games-list-carousel .bg-violet-600 {
  background: rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(4px) !important;
}

/* === Fix the "More" chip in categories === */
.home-categories a:last-child {
  background: rgba(11,109,76,0.08) !important;
  color: #0B6D4C !important;
  border: 1px solid #0B6D4C !important;
}