/* ============================================================
   Gold Theme — CSS
   ============================================================ */

/* Local Gold Inter fonts (offline-first) */
@font-face {
  font-family: 'Inter';
  src: url('../webfonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../webfonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SaudiRiyal';
  src: url('../webfonts/SaudiRiyal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'UAEDirham';
  src: url('../webfonts/UAEDirham.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik';
  src: url('../webfonts/Rubik-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fonts loaded locally via @font-face above */

/* ── CSS Variables ── */
:root {
  /* Exact Native Gold Theme Variables */
  --gg-bg: #171A1C;
  --gg-bg-surface: rgba(23, 26, 28, 0.9);
  --gg-bg-pill: rgba(23, 26, 28, 0.95);
  --gg-bg-sidebar: #171A1C;
  --gg-bg-card: #1c222b;
  /* Opaque surface for popups/modals. Was referenced by .sweet-alert (the
     after-game coin reward popup) and .modal-content but never defined, so
     var(--gg-bg-secondary) was invalid → the popup rendered TRANSPARENT and its
     text was unreadable over the game posters. */
  --gg-bg-secondary: #1c222b;
  
  --gg-accent: #d4af37;
  --gg-accent-hover: #e4c56a;
  --gg-active-nav: rgba(var(--gg-accent-rgb, 74,159,232), 0.12);
  
  --gg-text: #ffffff;
  --gg-text-secondary: #8b949e;
  --gg-border: rgba(255, 255, 255, 0.06);
  
  --gg-header-height: 84px;
  --gg-sidebar-width: 240px;
  --gg-card-radius: 12px;
  
  --gg-font-title: "UAEDirham", "Inter", "Montserrat", sans-serif;
  --gg-font-text: "UAEDirham", "Inter", "Montserrat", -apple-system, sans-serif;
  --gg-font-mono: "DM Mono", monospace;
  
  --gg-shadow: 0 0 20px rgba(var(--gg-accent-rgb, 74,159,232), 0.35);
  
  /* Snappy Timing Functions */
  --transition-fast: 150ms cubic-bezier(0.19, 1, 0.22, 1);
  --transition-normal: 250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.theme-body, 
.home-container, 
.games-container, 
.shop-container, 
.rank-container,
.modal-content,
.blue-main-card {
  backface-visibility: hidden;
}

/* ── Global Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
}

body, .theme-body {
  font-family: var(--gg-font-text) !important;
  background-color: #171A1C !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(var(--gg-accent-rgb, 74,159,232), 0.18) 0%, transparent 60%), /* Central Search Glow */
    radial-gradient(circle at 0% 0%, rgba(220, 38, 38, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(var(--gg-accent-rgb, 74,159,232), 0.2) 0%, transparent 50%),
    linear-gradient(rgba(23, 26, 28, 0.6), rgba(23, 26, 28, 0.8)),
    url('../images/home-bg.jpg') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: var(--gg-text) !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .gg-title {
  font-family: var(--gg-font-title) !important;
  font-weight: 500;
}

[v-cloak] { display: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139, 148, 158, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 148, 158, 0.5); }

/* ============================================================
   HEADER — Gold Top Navigation Bar
   ============================================================ */
/* News carousel (Home sidebar) — show the cafe's news banner at the FULL card width
   and its natural aspect ratio (no crop); the card height follows the image. The old
   rules pinned the <img> to its intrinsic size (`width:auto`) and flex-centered it, so
   a real banner rendered tiny and the card collapsed around it. Don't force `display`
   on every .carousel-item — let Bootstrap toggle it, or all slides stack. */
#home_news_sidebar .carousel,
#home_news_sidebar .carousel-inner,
#home_news_sidebar .carousel-item {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0 !important;   /* core .carousel-spotlight adds 3rem → a black void below the image */
}

#home_news_sidebar img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    /* No height cap / object-fit: the card height follows the image exactly, so there's
       never a letterbox void (a capped + contained QR/square left a big black gap). */
}

/* News indicator dots — small, refined, white. Inactive = faint dot, active = short
   white pill, so the current slide reads clearly without the chunky gold look. Clicking
   a dot jumps to that slide (BS data-api via data-target/data-slide-to); the cafe's
   per-slide news_duration still auto-advances the loop (BS toggles `.active`). */
#home_news_sidebar .carousel-indicators {
    bottom: 8px;
    margin: 0;
}
#home_news_sidebar .carousel-indicators .gg-news-dot {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}
#home_news_sidebar .carousel-indicators .gg-news-dot.active {
    width: 16px;
    border-radius: 3px;
    background-color: #fff !important;
}

/* Reactive crossfade for the looping news carousel (#gg_news_carousel — renamed from
   #home_carousel_news to take it off Bootstrap). Both slides stay rendered and cross-fade
   by opacity (driven by vueHome.newsActivePage), so the LAST news wraps straight to the
   FIRST with no blank frame. The active slide is position:relative to give the card its
   height; the others overlay at opacity 0. */
#gg_news_carousel .carousel-item {
    display: block !important;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
}
#gg_news_carousel .carousel-item.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.header-section {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 260px;
  background: transparent !important;
  pointer-events: none;
}

.header-area {
  height: var(--gg-header-height) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important; /* core casts a full-width drop shadow → looked like a navy bar under the whole header */
  padding: 0 48px !important;
  /* 3-column grid (logo | nav | right) so the nav sits in the TRUE screen
     centre instead of the gap between the logo and the wider right cluster. */
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center !important;
  transition: var(--transition-normal);
  pointer-events: auto; /* Re-enable pointer events for the nav */
}
/* keep the right cluster hugging the right edge of its column */
.header-area .header-right-zone {
  justify-self: end;
}

/* Logo */
.header-area .logo {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0;
  margin-right: 16px;
}

.header-area .logo img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

/* Header Menu — Gold-style nav: plain text links sitting in their OWN navy
   rounded bar. The full-width header shadow is removed
   (.header-area box-shadow:none) so only this bar reads as a surface. */
.header-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  /* In-flow flex child: header-area's `space-between` centers it in the gap
     between the logo and the right cluster, so it can never overlap the right
     icons (the old `position:absolute; left:50%` centered on the viewport and
     collided with the right cluster — Rank pill under the "?" button). */
  position: relative !important;
  transform: none !important;
  /* its own navy bar */
  background: rgba(13, 17, 23, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 5px 6px !important;
  border-radius: 14px !important;
  flex-shrink: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.header-menu .menu-icon-link,
.header-menu a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
  padding: 8px 18px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gg-text-secondary) !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
  white-space: nowrap;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  position: relative;
}

.header-menu .menu-icon-link:hover,
.header-menu a:hover {
  color: var(--gg-text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* active tab = subtle highlight pill + accent text (Gold style) */
.header-menu .menu-icon-link.active,
.header-menu a.active {
  color: var(--gg-accent) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: none !important;
  font-weight: 700 !important;
}

/* Gold nav has no icons — hide them, keep text only */
.header-menu .menu-icon {
  display: none !important;
}

.header-menu-active {
  color: var(--gg-accent) !important;
}

/* Header Right Info */
.header-right-info {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 12px !important;
}

.header-time {
  font-size: 11px !important;
  color: var(--gg-text-secondary) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-sound a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: var(--transition-fast);
}
.header-sound a:hover { color: #fff !important; background: rgba(255,255,255,0.15) !important; }

.header-balance {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 12px 4px 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(13, 17, 23, 0.3) !important;
  cursor: pointer;
  color: #fff !important;
}

.header-avatar-dropdown {
  width: 34px !important;
  height: 34px !important;
}

.header-avatar-dropdown .cafe_info_member_logo {
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 50% !important;
}

/* Header Search */
.header-search {
  display: none !important;
}

/* ============================================================
   LAYOUT — Main Content Area
   ============================================================ */
#page_games {
  padding-top: var(--gg-header-height) !important;
  height: 100vh;
  overflow: hidden;
  background-color: transparent !important;
}

/* Safety: Hide main shell + spinner on login. */
.theme-body:has(#page_login:not(.d-none)) #page-layout,
.theme-body:has(#page_login:not(.d-none)) #page_games,
.theme-body:has(#page_login:not(.d-none)) #spinner.cover,
.theme-body:has(#page_login:not(.d-none)) .header-section,
.theme-body:has(#page_login:not(.d-none)) .bottom-section,
.theme-body.bd-login-page #spinner.cover,
.theme-body.bd-login-page #page_games,
.theme-body.bd-login-page .header-section,
.theme-body.bd-login-page .bottom-section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* When logging out, d-none alone can lose to other flex/display rules — force-hide the whole shell. */
#page_games.gg-hide-main-shell {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Defensive: never let #page_games stay visible when marked hidden (bootstrap edge cases). */
#page_games.d-none {
  display: none !important;
}

/* Hard guard: if login view DOM is visible, always hide layout shell */
#theme_main_body:has(#page_login:not(.d-none)) > #page-layout,
#theme_main_body:has(#page_login:not(.d-none)) > #page_games {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Inner containers stay transparent so the PAGE's solid base shows through. */
.events-container, .game-electric-shell,
.sidebar-v9, .sidebar-v9-r, .middle-v9, .shop-master-v9,
.rank-page-container {
  background-color: transparent !important;
  background: transparent !important;
}

/* Shop sticky search: fully clear strip (no frosted layer — was reading as “not transparent”) */
.shop-master-v9 .search-v9 {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Games / Rank / Shop / Event: ONE solid dark base so all four pages match.
   (Shop+Event were transparent → showed the darker body #0d1117 while
   Games/Rank used --gg-bg #171A1C — the mismatch.) */
#page-game,
#page-rank,
#page-shop,
#page-event {
  background-color: var(--gg-bg) !important;
  background-image: none !important;
  background: var(--gg-bg) !important;
}

#page-rank {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Hide the top video strip across app pages */
.theme-body:not(.bd-login-page) .video-box {
  top: var(--gg-header-height) !important;
  height: calc(100% - var(--gg-header-height)) !important;
}

#games {
  overflow: hidden !important;
}

/* Remove old sidebar bg layers */
.header-area + div[style*="position: fixed"],
div[style*="right: 400px"],
div[style*="left: 268px"] {
  display: none !important;
}

/* Bottom section (running games bar) */
.bottom-section {
  background: rgba(13, 17, 23, 0.9) !important;
  backdrop-filter: blur(6px) !important;
  border-top: 1px solid var(--gg-border) !important;
  border: none !important;
  height: 52px !important;
}

/* Border block override */
.border-block {
  border: none !important;
  background: transparent !important;
}

/* ============================================================
   HOME PAGE — Hero Layout
   ============================================================ */
.home-container {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  height: 100% !important;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

/* Top row - takes full height */
.home-up-column {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 !important;
  height: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}

/* Left side: Hero area with top-5 games */
.home-top5-games {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 24px 24px 0 24px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  position: relative;
  z-index: 2;
}

.home-top5-games .game-image {
  width: 120px !important;
  min-width: 120px;
  max-width: 120px;
  aspect-ratio: 2/3;
  border-radius: var(--gg-card-radius) !important;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: var(--transition-normal);
  border: 2px solid transparent;
}

.home-top5-games .game-image:hover {
  transform: scale(1.05);
  border-color: var(--gg-accent);
  box-shadow: 0 0 20px rgba(44, 191, 217, 0.3);
}

.home-top5-games .game-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--gg-card-radius) !important;
}

.home-top5-games .game-heat {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  z-index: 3;
}

.home-top5-games .game-image .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  background: rgba(0, 0, 0, 0.7) !important;
  border-radius: var(--gg-card-radius) !important;
}

.home-top5-games .game-image:hover .overlay {
  opacity: 1;
}

.home-top5-games .overlay label {
  font-size: 12px;
  font-weight: 600;
  padding: 0 8px;
  text-align: center;
}

.home-top5-games .overlay .btn {
  background: var(--gg-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right info panel */
.home-up-column > .bd-highlight.rounded.p-4.col-3 {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  flex: 0 0 360px !important;
  background: var(--gg-glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
  margin: 16px 16px 0 0 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto;
  z-index: 2;
}

#home_member_info {
  height: auto !important;
}

#home_member_info .row.text-white {
  margin-bottom: 16px;
}

#home_member_info .cafe_info_member_logo {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--gg-accent);
}

.member-group {
  background: rgba(44, 191, 217, 0.1) !important;
  border-radius: 4px;
  padding: 4px 8px !important;
  font-size: 11px;
  font-weight: 600;
}

.member-current-group {
  background: var(--gg-accent) !important;
  color: #000 !important;
}

/* Bottom row - News + Promotion */
.home-down-column {
  display: flex !important;
  flex-direction: row !important;
  padding: 16px !important;
  gap: 16px;
  height: auto !important;
  min-height: 200px;
  flex-shrink: 0;
}

.home-news {
  flex: 1 !important;
  background: var(--gg-glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.home-news .carousel-inner { border-radius: 16px; }
.home-news img { border-radius: 12px; object-fit: cover; }

.home-promoted {
  width: 360px !important;
  min-width: 360px !important;
  flex: 0 0 360px !important;
  background: var(--gg-glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
  margin: 0 !important;
}

.home-promoted .promoted-product {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Leaderboard */
.home-leaderboard {
  background: var(--gg-glass) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
}

/* ============================================================
   GAMES PAGE — Sidebar + Grid
   ============================================================ */

/* Left Category Sidebar */
.game-category-menu {
  width: var(--gg-sidebar-width) !important;
  min-width: var(--gg-sidebar-width) !important;
  background: var(--gg-bg-sidebar) !important;
  border-right: 1px solid var(--gg-border);
  padding: 16px 0 !important;
  height: calc(100vh - var(--gg-header-height) - 52px);
  overflow-y: auto;
  flex-shrink: 0;
  contain: layout style;
}

/* Performance: containment hints for shop cards and other heavy lists */
.product-card-v9 {
  contain: layout style;
  /* content-visibility:auto removed — same blank-card issue as .game-item in the
     nested shop scroll container; the shop virtual-scroll already caps the DOM. */
}

.category-pill-v9,
.launcher-box-v12,
.gg-tag,
.gg-tag-active {
  contain: layout style;
}

.sidebar-v9,
.sidebar-v9-r,
.middle-v9,
.shop-master-v9,
.grid-scroll-v9 {
  contain: layout;
}

/* Promote scrolling areas to their own layer for smoother scroll */
.gg-scroll,
.custom-scrollbar,
.grid-scroll-v9,
.sidebar-scroll-v9 {
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
}

.game-category-menu .menu-header {
  padding: 8px 20px !important;
  margin: 0 !important;
  display: none !important;
}

.game-category-menu .dropdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  padding: 0 12px !important;
}

.game-category-menu .dropdown-item {
  display: block !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gg-text-secondary) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}

.game-category-menu .dropdown-item:hover {
  color: var(--gg-text) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.game-category-menu .dropdown-item-active,
.game-category-menu .dropdown-item.dropdown-item-active {
  color: var(--gg-accent) !important;
  background: rgba(44, 191, 217, 0.08) !important;
  font-weight: 500 !important;
}

/* Game Content Area */
.game-category-menu + .container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  max-width: none !important;
  padding: 0 !important;
}

/* Search bar at top of games */
.game-electric-shell {
  padding: 0 !important;
}

.game-electric-shell > .p-4 {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  height: calc(100vh - var(--gg-header-height) - 52px) !important;
}

/* ── Game Search Bar (injected via CSS pseudo or JS) ── */
/* We'll rely on the header search being shown for games page */

/* Game Grid */
.game-electric-shell .d-flex.col-12 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  padding: 0 !important;
  align-content: start !important;
}

/* Game Item Card */
.game-item {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  contain: layout style;
  /* content-visibility:auto left near-bottom cards painted BLACK (it lazy-renders
     off-screen items but in this nested scroll container it skipped cards that were
     actually in view). The progressive renderLimit (60/page) already bounds the DOM,
     so just render the cards normally — no blank band. */
}

.game-item .game-image {
  position: relative;
  width: 100% !important;
  aspect-ratio: 2/3;
  border-radius: var(--gg-card-radius) !important;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--gg-bg-card);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--gg-border);
}

.game-item .game-image:hover {
  /* no translateY lift — it made every card "jump" as the cursor passed over
     them (read as "all cards moving"). Keep only the contained image zoom +
     border glow so the card never changes its footprint. */
  border-color: var(--gg-accent);
  box-shadow: var(--gg-shadow);
}

.game-item .game-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--gg-card-radius) !important;
  transition: transform 0.4s ease;
}

.game-item .game-image:hover img {
  transform: scale(1.05);
}

/* Gold-style click: zoom the POSTER IMAGE inside the clicked card (clipped by
   the card's overflow:hidden) — NOT the card itself. The card's footprint never
   changes, so it can't grow over / disturb its neighbours. Only the clicked
   game shows motion; nothing else moves or appears to move. */
.game-item .game-image.gg-card-clicked img {
  animation: ggCardClick 0.18s ease-out forwards;
}
@keyframes ggCardClick {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* The detail opens as a pure FADE — no scale/translate — so nothing in the grid
   area appears to "move" except the card you clicked. */
.gg-detail-enter {
  animation: ggDetailIn 0.22s ease-out;
}
@keyframes ggDetailIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Badges on game cards */
.badge-container {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
  flex-direction: column;
}

.icon-license {
  color: #22c55e !important;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.icon-favorite {
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition: transform 0.2s;
}

.icon-favorite:hover {
  transform: scale(1.2);
}

/* Game card overlay */
.game-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, transparent 80%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 16px !important;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--gg-card-radius);
  pointer-events: none;
}

.game-item .game-image:hover .overlay {
  opacity: 1;
}

.game-item .overlay label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.game-item .overlay .btn-group {
  gap: 8px;
}

.game-item .overlay .btn {
  background: var(--gg-accent) !important;
  border: none !important;
  color: #141519 !important; /* using primary dark color for contrast */
  border-radius: 22px !important;
  min-width: 90px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-family: var(--gg-font-text) !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  padding: 0 16px !important;
  pointer-events: auto;
  text-decoration: none;
}

.game-item .overlay .btn:hover {
  background: var(--gg-accent-hover) !important;
  transform: translateY(-2px) scale(1.05);
}

.game-name-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--gg-text-secondary);
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right sidebar for game page */
.game-right-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  display: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Member sidebar (used in game page) */
.member-sidebar {
  display: none !important;
}

/* Game Detail View */
.game-electric-shell > .container.d-flex[style*="background"] {
  background: var(--gg-glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
}

.vip-arrow {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  margin-right: 12px;
}

.game-detail-btn-groups .btn {
  background: var(--gg-accent) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#page_login {
  background: var(--gg-bg) !important;
}

.loginDiv, .formDiv {
  background: transparent !important;
}

.blue-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 420px;
  max-width: 90vw;
}

.blue-main-card {
  background: var(--gg-glass) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  width: 100%;
  box-shadow: var(--gg-shadow) !important;
}

.blue-card-header {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blue-card-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gg-text) !important;
}

.blue-card-body {
  padding: 20px 28px 28px;
}

.blue-signup-link {
  color: var(--gg-accent) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
}

.blue-signup-link:hover {
  color: var(--gg-accent-hover) !important;
}

.blue-btn-primary {
  width: 100%;
  padding: 12px !important;
  background: var(--gg-accent) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blue-btn-primary:hover {
  background: var(--gg-accent-hover) !important;
  transform: translateY(-1px);
}

.blue-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gg-text-secondary);
  margin-bottom: 6px;
}

.login-input, .form-control.login-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 10px !important;
  color: var(--gg-text) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease !important;
}

.login-input:focus {
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 2px rgba(44, 191, 217, 0.15) !important;
  outline: none !important;
}

.login-input::placeholder {
  color: var(--gg-text-secondary) !important;
  opacity: 0.6;
}

/* Quick Icons */
.blue-quick-icons {
  width: 100%;
}

.blue-quick-icon-group {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.blue-quick-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.blue-quick-icon-item:hover {
  transform: translateY(-2px);
}

.blue-quick-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--gg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.blue-quick-icon-circle:hover {
  border-color: var(--gg-accent);
  background: rgba(44, 191, 217, 0.08);
}

.blue-quick-icon-circle img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.blue-quick-icon-label {
  font-size: 12px;
  color: var(--gg-text-secondary);
  cursor: pointer;
}

/* Row items (Balance, Admin) */
.blue-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: var(--gg-glass);
  border: 1px solid var(--gg-glass-border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blue-row-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gg-border);
}

.blue-row-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blue-row-item-left label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gg-text);
  cursor: pointer;
}

.blue-row-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-row-item-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.blue-row-item-arrow {
  color: var(--gg-text-secondary);
  font-size: 18px;
}

/* Back arrow */
.blue-back-arrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: background 0.2s;
}

.blue-back-arrow:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   LOCK SCREEN
   ============================================================ */
#page_lock {
  /* Full-screen + centred. .formDiv only resets the background, so without explicit
     size/position the lock container had no dimensions and the unlock card landed
     off-screen. display:flex comes from the inline :style (toggles with isLocked);
     these add the sizing + centering. (w-50/h-50 dual-monitor classes still override.) */
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(13, 17, 23, 0.95) !important;
  backdrop-filter: blur(6px) !important;
}

.unlock-form-div {
  background: var(--gg-glass) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 20px !important;
  padding: 40px !important;
}

.unlock-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 10px !important;
  color: var(--gg-text) !important;
}

.btn-unlock, .client-btn-success {
  background: var(--gg-accent) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 8px 32px !important;
}

.client-btn-close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 10px !important;
  color: var(--gg-text) !important;
  font-weight: 500 !important;
  padding: 8px 32px !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  background: var(--gg-bg-secondary) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 16px !important;
  color: var(--gg-text) !important;
}

.modal-header {
  border-bottom: 1px solid var(--gg-border) !important;
  padding: 16px 24px !important;
}

.modal-header .close {
  color: var(--gg-text-secondary) !important;
  opacity: 1 !important;
}

.modal-title {
  font-weight: 600 !important;
  color: var(--gg-text) !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  border-top: 1px solid var(--gg-border) !important;
  padding: 16px 24px !important;
}

/* Confirm-dialog buttons (shutdown / reboot / checkout / etc.) sat in a
   display:flex .btn-group with align-items:normal + display:block children,
   so the two buttons were vertically offset (one higher than the other).
   Force a centred, equal-width, evenly-spaced row. */
.modal-footer .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px;
}
.modal-footer .btn-group > .btn {
  margin: 0 !important;        /* neutralise per-button mr-3; gap handles spacing */
  min-width: 116px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 10px !important;
  color: var(--gg-text) !important;
}

.modal-input:focus {
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 2px rgba(44, 191, 217, 0.15) !important;
}

/* Mouse-settings sliders (myModalMouse) — the markup uses these class names
   but the theme never styled them, so the tracks collapsed and only the
   number showed. Restyled to the default layout with the cafe accent. */
.mouse-move-slider-container,
.double-click-slider-container {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.mouse-move-slider-track,
.double-click-slider-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.mouse-move-slider-progress,
.double-click-slider-progress {
  height: 100%;
  background: var(--gg-accent);
  border-radius: 3px;
}
.mouse-move-slider-handle,
.double-click-slider-handle {
  width: 18px;
  height: 18px;
  background: var(--gg-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.mouse-move-value,
.double-click-value {
  margin-top: 12px;
  color: var(--gg-text);
  font-weight: 700;
  font-size: 15px;
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.dropdown-menu {
  background: rgba(22, 27, 34, 0.98) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 6px !important;
}

.dropdown-menu .dropdown-item {
  color: var(--gg-text) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
}

.dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--gg-text) !important;
}

/* Header account dropdown — profile header (avatar + name + balance) + red Logout */
.header-menu-profile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.header-menu-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.12); flex-shrink: 0; }
.header-menu-name { color: #fff; font-weight: 700; font-size: 14px; line-height: 1.15; }
.header-menu-bal { color: var(--gg-accent); font-weight: 600; font-size: 12px; margin-top: 1px; }
.header-menu-bal i { font-size: 11px; opacity: 0.9; }
.header-menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 2px 6px 6px; }
.dropdown-menu .dropdown-item[href*="checkout_click"] { color: #f87171 !important; }
.dropdown-menu .dropdown-item[href*="checkout_click"]:hover { background: rgba(248,113,113,0.12) !important; color: #f87171 !important; }
/* Pill name grows to fit (e.g. "abdulakim alasul"), but cap very long names with
   an ellipsis so the pill never runs away / overflows the header. The full name
   stays readable in the opened menu's profile header (wider). */
.header-balance .member_info_name {
  display: inline-block;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.header-menu-name { max-width: 150px; }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-category-menu {
  width: var(--gg-sidebar-width) !important;
  min-width: var(--gg-sidebar-width) !important;
  background: transparent !important;
  border-right: 1px solid var(--gg-border);
}

/* Premium shop sidebar category pills */
.shop-master-v9 .sidebar-v9 {
  background: transparent !important;
  border-right: none !important;
}

.shop-master-v9 .sidebar-v9-r {
  max-width: 286px;
}

.shop-master-v9 .wallet-v9 {
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

.shop-master-v9 .wallet-v9 .h4 {
  font-size: 20px !important;
}

.shop-master-v9 .cart-v9 {
  border-radius: 18px !important;
}

.shop-master-v9 .cart-v9 .p-4 {
  padding: 14px !important;
}

.shop-master-v9 .cart-v9 .item-v9 {
  padding: 10px !important;
  border-radius: 12px !important;
}

.shop-master-v9 .checkout-btn-v9 {
  font-size: 14px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.shop-master-v9 .category-pill-v9 {
  min-height: 46px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.shop-master-v9 .category-pill-v9:hover:not(.active) {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.06) !important;
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.22);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(var(--gg-accent-rgb, 74,159,232), 0.08) inset;
  transform: translateX(2px);
}

.shop-master-v9 .category-pill-v9.active {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.14) !important;
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.42);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26), 0 0 20px rgba(var(--gg-accent-rgb, 74,159,232), 0.16);
}

.shop-master-v9 .category-pill-v9 i {
  color: rgba(255, 255, 255, 0.78) !important;
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.shop-master-v9 .category-pill-v9 span {
  color: #b9c1cf !important;
  transition: color 0.2s ease;
}

.shop-master-v9 .category-pill-v9:hover:not(.active) i,
.shop-master-v9 .category-pill-v9:hover:not(.active) span {
  color: #e6e9ef !important;
}

.shop-master-v9 .category-pill-v9.active i {
  color: #f2d06b !important;
  text-shadow: 0 0 10px rgba(var(--gg-accent-rgb, 74,159,232), 0.34);
  transform: scale(1.05);
}

.shop-master-v9 .category-pill-v9.active span {
  color: #fff3cd !important;
  text-shadow: 0 0 10px rgba(var(--gg-accent-rgb, 74,159,232), 0.22);
}

/* ============================================================
   TOASTR
   ============================================================ */
.toast-success { background-color: var(--gg-accent) !important; }
.toast-error { background-color: #e74c3c !important; }
.toast-info { background-color: #3498db !important; }

/* ============================================================
   RANK PAGE
   ============================================================ */
.ranking-div {
  background: var(--gg-glass) !important;
  border: 1px solid var(--gg-glass-border) !important;
  border-radius: 16px !important;
}

/* ============================================================
   EVENT PAGE
   ============================================================ */
.event-container {
  background: transparent !important;
}

/* ============================================================
   PASSWORD WRAPPER
   ============================================================ */
.password-wrapper {
  position: relative;
}

.password-toggle, .password-toggle-unlock, .password-toggle-admin-exit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.password-toggle:hover, .password-toggle-unlock:hover, .password-toggle-admin-exit:hover {
  opacity: 0.8;
}

/* ============================================================
   ACCESS CODE
   ============================================================ */
.access-code-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.access-code-input {
  width: 46px !important;
  height: 46px !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 12px !important;
  color: var(--gg-text) !important;
}

.access-code-input:focus {
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 2px rgba(44, 191, 217, 0.2) !important;
}

/* ============================================================
   LOGIN FOOTER
   ============================================================ */
.login-footer-info {
  bottom: 12px !important;
  right: 16px !important;
  z-index: 10;
  gap: 8px;
}

.login-footer-info .footer-item {
  font-size: 12px;
  color: var(--gg-text-secondary);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

/* PC Name */
.pc_name {
  position: fixed !important;
  bottom: 12px !important;
  left: 16px !important;
  /* fallback only — NOT !important so the login PC-name's inline binding
     :style="{fontSize: vueGlobal.pcNameFontSize}" (the admin "PC name size" in px,
     theSettings.client_pc_name_size) wins. With !important it was pinned to 14px. */
  font-size: 14px;
  color: var(--gg-text-secondary) !important;
  z-index: 10;
}

/* Power buttons (panel option "full_screen_shutdown_and_reboot", home + lock).
   Docked bottom-left to MATCH login.htm's own override (bottom:32/left:40) —
   sits just above .pc_name (bottom:12/left:16). Was top:12/left:12; center
   report 2026-07-26 wanted them at the bottom like the login screen. */
.feedback-icon {
  position: fixed;
  top: auto;
  bottom: 32px;
  left: 40px;
  z-index: 200;
  gap: 8px;
}

/* Shared by login, lock screen and Home. display lives here (not a d-flex class) so the Home
   bar's v-show can hide it. Two-class selectors outrank login.htm's `.feedback-icon a`. */
.gg-power-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feedback-icon .gg-power-btn {
  width: 42px;
  height: 42px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(10, 12, 16, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.62) !important;
  text-decoration: none !important;
  transition: color 0.18s, border-color 0.18s, background-color 0.18s, transform 0.18s;
}
.feedback-icon .gg-power-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-icon .gg-power-restart:hover {
  color: rgb(var(--gg-accent-rgb, 212, 175, 55)) !important;
  border-color: rgba(var(--gg-accent-rgb, 212, 175, 55), 0.55);
  background: rgba(var(--gg-accent-rgb, 212, 175, 55), 0.1) !important;
  transform: translateY(-1px);
}
.feedback-icon .gg-power-off:hover {
  color: #f26d6d !important;
  border-color: rgba(242, 109, 109, 0.55);
  background: rgba(242, 109, 109, 0.1) !important;
  transform: translateY(-1px);
}

/* ============================================================
   SPINNER
   ============================================================ */
.cover {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Transparent so the page being loaded shows its own (video) background — just the
     centred .gg-loader floats on top. Still full-screen at z-index 9999, so it keeps
     blocking clicks during the load. (Was a solid var(--gg-bg), which read as black.) */
  background: transparent !important;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-border {
  color: var(--gg-accent) !important;
}

/* Modern loading spinner — accent "comet ring" (rounded head + fading tail).
   Centred by .cover's flexbox. Pure CSS, GPU-cheap. */
.gg-loader {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--gg-accent) 94%, transparent) top/7px 7px no-repeat,
    conic-gradient(transparent 30%, var(--gg-accent));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  animation: gg-spin 0.9s infinite linear;
  filter: drop-shadow(0 0 10px rgba(var(--gg-accent-rgb, 74,159,232), 0.35));
}
@keyframes gg-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   ELECTRIC BORDER (promoted offer)
   ============================================================ */
.electric-border {
  position: relative;
}

.electro-border-overlay {
  pointer-events: none;
}

/* ============================================================
   GENERAL UTILITY OVERRIDES
   ============================================================ */
.text-gray { color: var(--gg-text) !important; }

.form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  color: var(--gg-text) !important;
  border-radius: 8px !important;
}

.search-v9 .form-control,
.shop-search-input-v9 {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 100px !important;
}

.search-v9 .form-control:focus,
.shop-search-input-v9:focus {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.4) !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 2px rgba(44, 191, 217, 0.15) !important;
}

a { color: var(--gg-accent); text-decoration: none; }
a:hover { color: var(--gg-accent-hover); }

.btn-info {
  background: var(--gg-accent) !important;
  border-color: var(--gg-accent) !important;
}

/* Progress bar */
.progress { background: rgba(255, 255, 255, 0.06) !important; border-radius: 8px !important; }
.progress-bar { background: var(--gg-accent) !important; }

/* Table */
.table { color: var(--gg-text) !important; }
.table thead th { border-bottom-color: var(--gg-border) !important; color: var(--gg-text-secondary) !important; font-weight: 600; }
.table td { border-top-color: var(--gg-border) !important; }

/* Badge */
.badge { font-weight: 500; }

/* QR styling */
.news-qr { border-radius: 8px; background: #fff; padding: 8px; }

/* Reset password link */
.reset-password-link {
  text-align: right;
  margin-bottom: 4px;
}
.reset-password-link a {
  color: var(--gg-accent) !important;
  font-size: 13px;
}

/* Error messages */
.error-message {
  font-size: 12px;
  color: #e74c3c !important;
  margin-top: 4px;
}

.error-message.show {
  display: block !important;
}

/* Pagination */
.pagination .page-link {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--gg-border) !important;
  color: var(--gg-text) !important;
  border-radius: 6px !important;
}

.pagination .page-item.active .page-link {
  background: var(--gg-accent) !important;
  border-color: var(--gg-accent) !important;
  color: #fff !important;
}

/* Video background */
.url-video, .youtube-video {
  z-index: -1 !important;
}

/* SweetAlert */
.sweet-alert {
  background: var(--gg-bg-secondary) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 20px !important;
  padding: 26px 28px 22px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
  font-family: var(--gg-font-text, 'Inter', sans-serif) !important;
}
/* Faint gold halo across the top — the same atmospheric glow the rest of the theme uses. */
.sweet-alert::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 110px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(var(--gg-accent-rgb, 212,175,55), 0.13), transparent 72%);
  border-radius: 20px 20px 0 0;
  pointer-events: none;
}
.sweet-alert h2 { color: var(--gg-text) !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: 0.2px !important; }
.sweet-alert p { color: var(--gg-text-secondary) !important; font-size: 15px !important; line-height: 1.55 !important; }
.sweet-alert .sa-confirm-button-container button {
  background: var(--gg-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 30px !important;
  box-shadow: 0 6px 18px rgba(var(--gg-accent-rgb, 212,175,55), 0.30) !important;
  transition: background 0.15s ease, transform 0.05s ease !important;
}
.sweet-alert .sa-confirm-button-container button:hover { background: var(--gg-accent-hover, #e4c56a) !important; }
.sweet-alert .sa-confirm-button-container button:active { transform: translateY(1px) !important; }

/* ── Error icon ("Insufficient coin balance" etc.) — refined glowing red ring + crisp X.
   sweetalert ships a flat #F27474 ring + lines that look raw on the dark card; give it a soft
   red halo (box-shadow rings) + a faint radial fill, and brighten the X with a subtle glow. ── */
.sweet-alert .sa-icon.sa-error {
  border-color: rgba(239, 68, 68, 0.85) !important;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.13), transparent 70%) !important;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.07), 0 0 26px rgba(239, 68, 68, 0.33) !important;
}
.sweet-alert .sa-icon.sa-error .sa-line {
  background-color: #ff5b5b !important;
  border-radius: 3px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55) !important;
}

/* ── Warning icon — recoloured to the theme's gold (was pale amber #F8BB86). ── */
.sweet-alert .sa-icon.sa-warning {
  border-color: rgba(var(--gg-accent-rgb, 212,175,55), 0.9) !important;
  background: radial-gradient(circle, rgba(var(--gg-accent-rgb, 212,175,55), 0.12), transparent 70%) !important;
  box-shadow: 0 0 0 6px rgba(var(--gg-accent-rgb, 212,175,55), 0.07), 0 0 26px rgba(var(--gg-accent-rgb, 212,175,55), 0.3) !important;
}
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot {
  background-color: var(--gg-accent, #d4af37) !important;
  box-shadow: 0 0 10px rgba(var(--gg-accent-rgb, 212,175,55), 0.5) !important;
}

/* Success "✓" icon (after-game coin reward). sweetalert.css hard-codes the icon's
   draw-in animation masks (::before / ::after / .sa-fix) to WHITE so they vanish on
   a WHITE popup. They're POSITIONED pseudo-elements, so they sit ABOVE the green
   ring — on our dark card they showed first as a white blob, then (when tinted to the
   bg) as dark slashes cutting the ring ("2 lines"). They're pure animation
   scaffolding, so make them fully TRANSPARENT — nothing covers the ring. We also drop
   the faint duplicate .sa-placeholder ring (avoids a double-ring) and brighten the
   green from the pale default (#A5DC86) for contrast on the dark card. */
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-fix {
  background: transparent !important;
}
.sweet-alert .sa-icon.sa-success { border-color: #57d36a !important; }
.sweet-alert .sa-icon.sa-success .sa-placeholder { border-color: transparent !important; }
.sweet-alert .sa-icon.sa-success .sa-line { background-color: #57d36a !important; }

/* ── Context menu — the "Get license" account picker + any right-click menu ──
   jQuery contextMenu ships light/white; repaint it to the gold dark theme.
   Free accounts are selectable (gold hover); in-use accounts arrive as
   .context-menu-disabled + a lock icon (set in core request_game_licenses). */
.context-menu-list {
  background: rgba(20, 23, 30, 0.98) !important;
  border: 1px solid var(--gg-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6) !important;
  min-width: 230px !important;
  font-family: 'Inter', sans-serif !important;
}
/* small uppercase header above the account list */
.context-menu-list.play-with-license-title::before {
  content: 'Choose an account';
  display: block;
  padding: 7px 14px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.42);
}
.context-menu-item {
  color: #e6edf3 !important;
  background: transparent !important;
  border-radius: 8px !important;
  padding: 9px 14px 9px 38px !important;   /* left room for the lock icon */
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
.context-menu-item.context-menu-hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.18) !important;
  color: #fff !important;
}
/* in-use accounts: greyed + not selectable (no hover highlight) */
.context-menu-item.context-menu-disabled {
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed !important;
}
.context-menu-item.context-menu-disabled.context-menu-hover {
  background: transparent !important;
}
/* the FA lock glyph on in-use accounts → red; default icon → muted/accent on hover */
.context-menu-icon::before,
.context-menu-icon.context-menu-icon--fa::before {
  color: rgba(255, 255, 255, 0.6) !important;
  left: 12px !important;
  width: 1.4em !important;
}
.context-menu-icon.context-menu-disabled::before,
.context-menu-icon.context-menu-icon--fa.context-menu-disabled::before {
  color: #ef4444 !important;
}
.context-menu-icon.context-menu-hover::before,
.context-menu-icon.context-menu-icon--fa.context-menu-hover::before {
  color: var(--gg-accent) !important;
}

/* Fix layout sidebar bg */
div[style*="backdrop-filter: blur(6px)"][style*="right: 0"][style*="width: 400px"] {
  display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
  .game-electric-shell .d-flex.col-12 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .game-category-menu {
    width: 200px !important;
    min-width: 200px !important;
  }
  
  .home-up-column > .bd-highlight.rounded.p-4.col-3,
  .home-promoted {
    width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
  }
}

/* ============================================================
   GUEST LOGIN STYLES (from blue theme)
   ============================================================ */
.login-guest-selectable {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 54px !important;            /* match the Email/Promocode .login-input height */
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 12px !important;     /* match .login-input radius */
  background: rgba(148, 163, 184, 0.07) !important;  /* match .login-input bg */
  transition: border-color 0.2s ease;
  position: relative !important;
}

.login-guest-selectable:focus-within {
  border-color: var(--gg-accent) !important;
  box-shadow: 0 0 0 2px rgba(var(--gg-accent-rgb, 74,159,232), 0.22) !important;
}

.login-guest-trigger {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--gg-text-secondary) !important;
  cursor: pointer;
}

/* compound selector (.login-input.login-guest-input) so it beats .login-input —
   the inner input must be borderless/transparent/full-height, otherwise it renders
   its own box inside the wrapper (the "two boxes stacked" look). */
.login-guest-input,
.login-input.login-guest-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gg-text) !important;
  box-shadow: none !important;
  height: 100% !important;
}

.login-guest-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #161b22 !important;
  border: 1px solid var(--gg-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.6);
  /* Cap height + scroll: the preset list (5/10/15/20/25/30…USD) had no max-height
     and sprawled past the card bottom, overlapping the Submit button. */
  max-height: 184px;
  overflow-y: auto;
}

/* Amount/Minutes sit side-by-side (half width each), so a half-width preset menu
   left the full-width Submit button peeking out beside it — looked like a collision.
   Span the menu across the whole Amount+Minutes row so it cleanly covers what's below. */
.blue-form-row .form-group:first-child .login-guest-menu {
  left: 0;
  right: auto;
  width: calc(200% + 12px);
}
.blue-form-row .form-group:last-child .login-guest-menu {
  left: auto;
  right: 0;
  width: calc(200% + 12px);
}

.login-guest-option {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--gg-text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.login-guest-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.login-guest-option.is-active {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.14);
  color: var(--gg-accent);
}

/* ============================================================
   START SESSION
   ============================================================ */
#page-start-session {
  background: var(--gg-bg) !important;
}

/* Start-session offer/option cards — these classes are referenced by
   start-session.htm but were never defined in the theme OR core, so the cards
   (whose content is in an absolutely-positioned body) collapsed to 0×0 and the
   page looked empty → the client got stuck after login. Define real sizes. */
.card-wh {
  width: 220px;
  height: 320px;
}
.card-container {
  position: relative;
  border-radius: 14px;
}
.start-session-card-body {
  background: rgba(22, 27, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.start-session-card-image {
  /* Show the offer poster CONTAINED at a smaller, native-aspect size (like the
     default icafemenu theme's 138px) instead of stretching it to fill the card
     width and cropping — small source images no longer get upscaled/blurred, so
     each poster shows at its best quality and never distorts. */
  width: 138px;
  height: auto;
  max-height: 138px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: 10px;
}
/* the offer Start button uses the accent (was relying on client-btn-success) */
.btn-start-session {
  background: var(--gg-accent) !important;
  border: none !important;
  /* dark text instead of white — white-on-bright-gold glares/vibrates. Shorter
     too, so the offer buttons feel lighter (was tall + full bright). */
  color: #14161c !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.3px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* The label is an inner <span class="text-white"> — Bootstrap's .text-white
   forces it white, so override it here too (this is the actual glare source). */
.btn-start-session .lang,
.btn-start-session span,
.btn-start-session .text-white {
  color: #14161c !important;
}
/* Higher specificity (#id) so the smaller size wins over the core button rules.
   Covers QR-topup too (client-btn-success without btn-start-session). */
#page_start_session .btn-start-session,
#page_start_session .client-btn-success {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
}

/* Start-session welcome heading — fills the empty top band so the offer
   cards read as a designed page instead of floating in the centre. */
.ss-welcome-logo {
  height: 64px;
  max-width: 240px;
  object-fit: contain;
}
.ss-welcome-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.ss-welcome-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  margin-bottom: 0;
}

/* Start-session top-right cluster: balance + points + QR top-up + avatar */
.ss-topbar {
  position: absolute;
  top: 18px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 6;
}
.ss-stat-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 16px;
  background: rgba(13, 17, 23, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ss-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.ss-stat i { color: var(--gg-accent); font-size: 15px; }
.ss-stat-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.12); }
.ss-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ss-icon-btn:hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.16);
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.4);
}
.ss-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
}

/* Start-session My Offers / Buy More tabs */
.ss-tab {
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 2px 6px;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.04em;
  font-size: 15px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ss-tab:hover { color: rgba(255, 255, 255, 0.8); }
.ss-tab-active {
  color: #fff;
  border-bottom-color: var(--gg-accent);
}

/* ============================================================
   ADDITIONAL BLUE-FORM OVERRIDES
   ============================================================ */
.blue-form-row {
  display: flex;
  gap: 12px;
}

.blue-form-row .form-group {
  flex: 1;
}

/* Booking banner */
.booking-banner {
  background: rgba(255, 193, 7, 0.08) !important;
  border: 1px solid rgba(255, 193, 7, 0.2) !important;
  border-radius: 10px;
  padding: 12px 16px;
}

/* Inline topup payment image */
.inline-topup-payment-type-img {
  max-width: 200px;
  border-radius: 8px;
}

/* Topup summary */
.topup-summary-value {
  color: var(--gg-text);
  font-weight: 600;
  padding: 8px 0;
}

/* Get code button */
.get-code-btn {
  background: var(--gg-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  cursor: pointer;
}

/* Control label */
.control-label.required::after {
  content: " *";
  color: #e74c3c;
}

/* Language modal — custom list (native <select> lists are OS-white / broken in WebView) */
.modal-dialog-language {
  max-width: 420px;
}

.language-modal-body {
  text-align: left;
}

.language-modal-hint {
  font-size: 13px;
  color: var(--gg-text-secondary);
  margin-bottom: 10px;
}

.language-selector-modal .modal-body {
  max-height: min(420px, 62vh);
  overflow-y: auto;
  padding-top: 12px !important;
}

.language-list-gg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.language-list-gg__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--gg-card-radius);
  border: 1px solid var(--gg-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--gg-text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.language-list-gg__item:hover,
.language-list-gg__item:focus {
  outline: none;
  border-color: var(--gg-accent);
  background: rgba(255, 255, 255, 0.08);
}

.language-list-gg__item.is-active {
  border-color: var(--gg-accent);
  box-shadow: 0 0 0 2px rgba(var(--gg-accent-rgb, 74,159,232), 0.22);
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.08);
}

.language-list-gg__name {
  flex: 1;
  min-width: 0;
}

.language-list-gg__check {
  flex-shrink: 0;
  margin-left: 10px;
  color: var(--gg-accent);
  font-size: 16px;
}

.myModalLanguage .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* ============================================================
   BALANCE HISTORY & ORDER LIST
   ============================================================ */
.modal-content-order {
  max-height: 85vh;
  overflow: hidden;
}

.order-list-header, .balance-history-header {
  padding: 16px 24px;
}

.order-list-title, .balance-history-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gg-text);
}

.order-search-form {
  margin-top: 12px;
}

.order-search-input-group {
  position: relative;
}

.order-search-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--gg-border) !important;
  border-radius: 10px !important;
  color: var(--gg-text) !important;
  padding: 8px 14px 8px 36px !important;
  width: 100%;
}

.order-search-input-group .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.order-table-container, .balance-table-container {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0 24px;
}

.order-table, .balance-table {
  width: 100%;
}

.order-status-pending .status-dot { background: #f59e0b; }
.order-status-paid .status-dot { background: #22c55e; }
.order-status-error .status-dot { background: #ef4444; }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.order-pagination, .balance-pagination {
  padding: 12px 24px;
}

.balance-summary {
  gap: 24px;
  margin-top: 8px;
}

.summary-label {
  color: var(--gg-text-secondary);
  margin-right: 8px;
  font-size: 13px;
}

.summary-value {
  font-weight: 700;
  font-size: 15px;
}

.summary-topup { color: #22c55e; }
.summary-expenses { color: #ef4444; }

/* ============================================================
   GAMES SIDEBAR — Gold Style Tags
   ============================================================ */
.sidebar-section-header {
  font-family: var(--gg-font-title) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #718096 !important;
  margin-bottom: 12px !important;
}

.gg-tag {
  font-family: var(--gg-font-text) !important;
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #a0aec0 !important;
  border-radius: 8px;
  margin-bottom: 4px;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.gg-tag:hover {
  background: rgba(45, 55, 72, 0.6);
  color: #ffffff !important;
  transform: translateX(4px);
}


.gg-tag-active {
  background: #2d3748 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Gold Toggle Switch */
.gg-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}

.gg-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.gg-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: 0.3s;
}

.gg-switch-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #a0aec0;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gg-switch input:checked + .gg-switch-slider {
  background: rgba(44, 191, 217, 0.25);
}

.gg-switch input:checked + .gg-switch-slider::before {
  transform: translateX(18px);
  background: #2cbfd9;
}

/* ── Premium Volume Slider ── */
.volume-control-wrapper {
    padding: 12px 2px 4px;
}

.volume-slider-unit {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
    padding: 14px 22px;
    border-radius: 100px;
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.24);
    margin-bottom: 20px;
}

/* Inline volume popover (header) — the .volume-slider-unit relocated under the speaker
   icon as a compact dropdown, replacing the full audio modal. Right-anchored so it can't
   overflow the viewport; solid dark so it reads over the page. */
.gg-volume-wrap { position: relative; }
.gg-volume-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    width: 200px;
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    background: rgba(20, 23, 30, 0.98) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55) !important;
}
.gg-volume-pop .volume-icon-side { font-size: 13px; }
.gg-volume-pop .premium-slider-track { height: 8px; }
.gg-volume-pop .premium-slider-handle { width: 18px; height: 18px; }
/* Muted — the speaker turns red so it's obvious sound is off (the slider sits at 0;
   drag it up or click the speaker again to unmute). */
.gg-mute-toggle.gg-muted { color: #ef4444 !important; text-shadow: 0 0 8px rgba(239, 68, 68, 0.55); }

/* Notification bell popover (header) — recent admin "Send Message" pushes + a link into
   Events when any are active. Same anchored-dropdown shape as .gg-volume-pop, just wider
   and list-shaped instead of a slider. */
.gg-notify-wrap { position: relative; }
.gg-notify-pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 3000;
	width: 360px;
	max-height: 360px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 20px !important;
	background: rgba(20, 23, 30, 0.98) !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px !important;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55) !important;
}
.gg-notify-title { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.gg-notify-empty { font-size: 13px; color: rgba(255,255,255,0.45); padding: 6px 0 2px; }
.gg-notify-list { display: flex; flex-direction: column; gap: 16px; }
.gg-notify-item { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.gg-notify-item:last-child { border-bottom: none; padding-bottom: 0; }
.gg-notify-item-text { font-size: 13px; color: rgba(255,255,255,0.92); line-height: 1.55; }
/* !important + doubled selector: this link sits inside .gg-notify-wrap, which (like every
   header icon button) also carries the shared "header-sound" class — and `.header-sound a`
   (further up this file) forces EVERY anchor inside it into a 38x38 circular icon button via
   !important. That's what was actually clipping the text (not a rendering bug): the button
   was being crushed into a tiny circle, and the circle's own background/border visually
   covered the leading letters. Beat that rule's specificity + !important explicitly here. */
.gg-notify-pop .gg-notify-item-link {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	white-space: nowrap;
	margin-top: 10px;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 700;
	color: var(--gg-accent) !important;
	background: rgba(var(--gg-accent-rgb), 0.1) !important;
	border: 1px solid rgba(var(--gg-accent-rgb), 0.3) !important;
	border-radius: 18px !important;
	text-decoration: none;
}
.gg-notify-pop .gg-notify-item-link:hover { background: rgba(var(--gg-accent-rgb), 0.2) !important; color: var(--gg-accent) !important; text-decoration: none; }
.gg-notify-item-time { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }
/* Same .header-sound-inherited-38x38-circle problem as .gg-notify-item-link above — same fix. */
.gg-notify-pop .gg-notify-events-link {
	display: block !important;
	width: auto !important;
	height: auto !important;
	margin-top: 4px;
	padding-top: 14px;
	border: none !important;
	border-top: 1px solid rgba(255,255,255,0.08) !important;
	font-size: 12px;
	font-weight: 600;
	color: var(--gg-accent) !important;
	background: none !important;
	border-radius: 0 !important;
	text-decoration: none;
	white-space: nowrap;
}
.gg-notify-pop .gg-notify-events-link:hover { color: var(--gg-accent) !important; background: none !important; text-decoration: underline; }

/* ── Running-games dock — IN-FLOW (last child of #games) but styled as a centered, elevated
   "command bar" so it reads as a real dock while staying in the main compositing layer (a
   position:fixed dock is a separate GPU layer CEF won't repaint). No continuous animation. */
/* Floats over the page (only the chips); the page's own bg/video shows everywhere else.
   absolute (NOT fixed) keeps it in the main compositing layer; pointer-events let clicks
   through the empty sides to the page behind. */
.gg-rundock { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 40; display: flex; justify-content: center; padding: 0 24px; background: transparent; pointer-events: none; }
.gg-rundock-bar {
	display: flex; align-items: center; gap: 10px; padding: 0; background: transparent; pointer-events: auto;
}
.gg-rundock-chip { display: flex; align-items: center; gap: 9px; padding: 7px 8px; background: rgba(12,15,22,0.82); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.45); transition: background .16s, border-color .16s, transform .16s; }
.gg-rundock-chip:hover { background: rgba(28,32,42,0.9); border-color: rgba(var(--gg-accent-rgb), 0.55); transform: translateY(-2px); }
.gg-rundock-ico { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px var(--gg-accent), 0 0 11px rgba(var(--gg-accent-rgb), 0.35); }
.gg-rundock-name { font-weight: 700; font-size: 13px; white-space: nowrap; color: #fff; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.gg-rundock-close { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #ff6b6b; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; margin-left: 2px; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.34); transition: background .15s, color .15s, transform .15s; }
.gg-rundock-close:hover { background: #ef4444; color: #fff; transform: scale(1.06); }

.volume-icon-side {
    color: rgba(var(--gg-accent-rgb, 74,159,232), 0.72);
    font-size: 18px;
}

.premium-slider-track {
    flex: 1;
    height: 10px;
    background: linear-gradient(180deg, rgba(7, 15, 28, 0.9) 0%, rgba(23, 35, 54, 0.86) 100%);
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.14);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
}

.premium-slider-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #b9952f 0%, var(--gg-accent) 55%, #f2d06b 100%);
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(var(--gg-accent-rgb, 74,159,232), 0.35);
}

/* Bigger invisible hit area (kiosk): the visible track is only 8-10px tall, a fiddly
   target. The pseudo-element widens the clickable strip to ~28px without changing the
   visuals; handleTrackClick/clientXChange do their math on the track's own rect, so the
   extra vertical hit area doesn't skew the volume calc (X is clamped 0-100 by core). */
.premium-slider-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}

.premium-slider-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 30% 30%, #fff7da 0%, #f0cd68 42%, var(--gg-accent) 100%);
    border: 1px solid rgba(255, 245, 214, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(var(--gg-accent-rgb, 74,159,232), 0.16), 0 10px 18px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.volume-number {
    font-size: 46px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.7px;
    text-shadow: 0 0 14px rgba(var(--gg-accent-rgb, 74,159,232), 0.22);
}

.volume-percent {
    font-size: 20px;
    color: rgba(var(--gg-accent-rgb, 74,159,232), 0.9);
    font-weight: 700;
    margin-left: 2px;
}

.myModalAudio .modal-content {
    background: radial-gradient(120% 140% at 15% 0%, rgba(24, 40, 66, 0.38) 0%, rgba(11, 19, 34, 0.88) 46%, rgba(8, 14, 26, 0.96) 100%) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.24) !important;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    overflow: hidden;
}

.myModalAudio .modal-header {
    border-bottom: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.16) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}

.myModalAudio .modal-title {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -0.8px;
    color: #fff !important;
}

.myModalAudio .close {
    color: rgba(var(--gg-accent-rgb, 74,159,232), 0.9) !important;
    opacity: 0.95 !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

.myModalAudio .close:hover {
    color: #f2d06b !important;
    transform: scale(1.08);
}

.myModalAudio .modal-footer {
    border-top: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.14) !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
}

.myModalAudio .client-btn-success {
    background: linear-gradient(90deg, #b9952f 0%, var(--gg-accent) 55%, #f2d06b 100%) !important;
    color: #1b160a !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(247, 221, 148, 0.7) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 0 14px rgba(var(--gg-accent-rgb, 74,159,232), 0.28) !important;
    padding: 10px 44px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    letter-spacing: 0.6px !important;
}

.myModalAudio .client-btn-success:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.myModalAudio .client-btn-success:active {
    transform: translateY(0);
    filter: brightness(0.96);
}



/* ============================================================ 
   PREMIUM LEADERBOARD — Rank Page overhaul
   ============================================================ */

/* ============================================================ 
   SIDEBAR & TYPOGRAPHY ENHANCEMENTS
   ============================================================ */
.sidebar-section-header {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #4b5563;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.gg-tag {
    display: block;
    padding: 10px 16px;
    margin-bottom: 4px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #9ca3af !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.gg-tag:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff !important;
    transform: translateX(4px);
}

.gg-tag-active {
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.12) !important;
    color: var(--gg-accent) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--gg-accent);
    border-radius: 4px 10px 10px 4px;
}

/* ============================================================ 
   RANK PAGE — Ultra Premium Leaderboard
   ============================================================ */
.rank-page-container {
    padding: 0 60px;
    min-height: calc(100vh - 160px);
    height: auto;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: transparent;
    padding-top: calc(var(--gg-header-height) + 30px);
    font-family: 'Inter', 'Outfit', sans-serif;
}

/* ── Page Title ── */
.rank-page-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.rank-page-subtitle {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 32px;
    font-weight: 500;
}

/* ── Game Selection Pill ── */
.rank-game-icons {
    gap: 12px;
    margin-bottom: 48px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.rank-game-icons .game-icon {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    cursor: pointer;
    background: transparent;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    opacity: 0.4;
    overflow: hidden;
    position: relative;
}

.rank-game-icons .game-icon:hover {
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.04);
}

.rank-game-icons .game-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.2);
    transition: filter 0.25s;
}

.rank-game-icons .game-icon.active {
    opacity: 1;
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.1);
    border-color: var(--gg-accent);
    box-shadow: 0 0 20px rgba(var(--gg-accent-rgb, 74,159,232), 0.25), inset 0 0 12px rgba(var(--gg-accent-rgb, 74,159,232), 0.08);
}

.rank-game-icons .game-icon.active img {
    filter: none;
}

/* ── Podium Section ── */
.rank-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 56px;
    padding-top: 40px;
    position: relative;
}

/* Background glow behind podium */
.rank-podium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(var(--gg-accent-rgb, 74,159,232), 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.podium-item {
    width: 200px;
    background: linear-gradient(180deg, rgba(30, 37, 46, 0.9) 0%, rgba(22, 27, 34, 0.95) 100%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 32px 20px 24px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.podium-item:hover {
    transform: translateY(-8px);
}

/* 2nd Place */
.podium-item.second {
    padding-bottom: 20px;
}

.podium-item.second .podium-avatar {
    border-color: #c0c0c0;
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.15);
}

.podium-item.second:hover {
    box-shadow: 0 8px 32px rgba(192, 192, 192, 0.1);
}

/* 1st Place — THE CHAMPION */
.podium-item.first {
    width: 240px;
    padding: 40px 24px 28px;
    background: linear-gradient(180deg, rgba(var(--gg-accent-rgb, 74,159,232), 0.16) 0%, rgba(22, 27, 34, 0.95) 60%);
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.3);
    box-shadow: 0 0 60px rgba(var(--gg-accent-rgb, 74,159,232), 0.14), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.podium-item.first:hover {
    box-shadow: 0 0 80px rgba(var(--gg-accent-rgb, 74,159,232), 0.2), 0 12px 48px rgba(0, 0, 0, 0.4);
}

.podium-item.first .podium-avatar {
    width: 110px;
    height: 110px;
    border: 3px solid #f9da41;
    box-shadow: 0 0 30px rgba(249, 218, 65, 0.25), 0 0 60px rgba(249, 218, 65, 0.1);
}

/* 3rd Place */
.podium-item.third .podium-avatar {
    border-color: #cd7f32;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.15);
}

.podium-item.third:hover {
    box-shadow: 0 8px 32px rgba(205, 127, 50, 0.1);
}

/* ── Avatar ── */
.podium-avatar-wrapper {
    position: relative;
    margin: 0 auto 18px auto;
    width: fit-content;
}

.podium-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #4b5563;
    transition: transform 0.3s, box-shadow 0.3s;
}

.podium-item:hover .podium-avatar {
    transform: scale(1.05);
}

/* ── Rank Badge ── */
.podium-rank-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 14px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.podium-item.first .podium-rank-badge {
    background: linear-gradient(135deg, #f9da41, #f59e0b);
    color: #000;
    box-shadow: 0 4px 12px rgba(249, 218, 65, 0.3);
}

.podium-item.second .podium-rank-badge {
    background: linear-gradient(135deg, #e5e7eb, #9ca3af);
    color: #000;
    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.3);
}

.podium-item.third .podium-rank-badge {
    background: linear-gradient(135deg, #cd7f32, #a85e20);
    color: #fff;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);
}

/* ── Name & Points ── */
.podium-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.podium-item.first .podium-name {
    font-size: 20px;
}

.podium-pts {
    font-size: 13px;
    font-weight: 700;
    color: var(--gg-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.podium-item.first .podium-pts {
    font-size: 15px;
}

/* ── Crown glow animation ── */
@keyframes crownGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(249, 218, 65, 0.4)); }
    50% { filter: drop-shadow(0 0 16px rgba(249, 218, 65, 0.7)); }
}

.podium-item.first .crown-icon {
    animation: crownGlow 2s ease-in-out infinite;
}

/* ── Leaderboard Table ── */
.rank-table-custom {
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.7) 0%, rgba(17, 22, 28, 0.9) 100%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 52vh;
    margin-bottom: 60px;
    /* parent .rank-page-container is a flex column; without this the podium
       squeezes the table down to ~1 visible row. Don't let it shrink. */
    flex-shrink: 0;
}

.rank-table-custom table {
    width: 100%;
    border-collapse: collapse;
}

.rank-table-custom thead th {
    padding: 16px 24px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #6b7280;
    text-align: left;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: 'Inter', sans-serif;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(13, 17, 23, 0.96);
}

.rank-table-custom tbody td {
    padding: 14px 24px;
    font-size: 14px;
    color: #d1d5db;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    vertical-align: middle;
    font-family: 'Inter', sans-serif;
}

.rank-table-custom tbody tr {
    transition: background 0.2s ease;
}

.rank-table-custom tbody tr:hover {
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.05);
}

.rank-table-custom tbody tr:last-child td {
    border-bottom: none;
}

/* Position number */
.rank-table-custom .rank-pos {
    font-weight: 800;
    font-size: 15px;
    color: var(--gg-accent);
    width: 70px;
    font-family: 'Inter', monospace;
}

/* Player cell */
.rank-table-custom .rank-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rank-table-custom .player-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #1c222b;
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.rank-table-custom .rank-player span {
    font-weight: 600;
    color: #e5e7eb;
}

/* Score styling */
.rank-table-custom .rank-score {
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #9ca3af;
}

/* Prize / Points */
.rank-table-custom .rank-prize {
    color: var(--gg-accent);
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* ── Empty State ── */
.rank-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 0;
    opacity: 0.25;
}

.rank-empty-state i {
    font-size: 56px;
    margin-bottom: 16px;
    color: var(--gg-accent);
}

.rank-empty-state p {
    font-size: 16px;
    color: #9ca3af;
    font-weight: 500;
}

/* ============================================================
   MEMORY OPTIMIZATIONS
   ============================================================ */
.mem-optimized .games-grid, 
.mem-optimized .shop-grid, 
.mem-optimized .leaderboard-container,
.mem-optimized .podium-section,
.mem-optimized .game-list-content { 
    display: none !important; 
}

/* ── Memory Optimization v3 ── */

/* When a page section gets .mem-optimized, skip rendering entirely */
.mem-optimized {
  content-visibility: hidden !important;
  contain-intrinsic-size: 0 0 !important;
}

/* content-visibility on hidden *page* shells only — global .d-none breaks native selects, tabs, menus */
#page-home.d-none,
#page-game.d-none,
#page-shop.d-none,
#page-event.d-none,
#page-rank.d-none {
  content-visibility: hidden !important;
}

/* Reduce GPU layers from game card hover effects */
.game-item .game-image {
  will-change: auto;
}

/* ── Premium Dropdown Menu ── */
.premium-dropdown {
  display: flex !important;
  flex-direction: column !important;
  animation: premiumDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}

@keyframes premiumDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.premium-menu-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: #c9d1d9 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  margin: 1px 0;
  background: transparent !important;
  white-space: nowrap;
}

.premium-menu-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  transition: color 0.15s ease;
}

.premium-menu-item:hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.08) !important;
  color: #fff !important;
}

.premium-menu-item:hover i {
  color: var(--gg-accent);
}

.premium-menu-item:active {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.15) !important;
  transform: scale(0.98);
}

/* Logout special styling */
.premium-menu-logout {
  color: #f87171 !important;
}

.premium-menu-logout i {
  color: #f87171 !important;
}

.premium-menu-logout:hover {
  background: rgba(248, 113, 113, 0.1) !important;
  color: #fca5a5 !important;
}

.premium-menu-logout:hover i {
  color: #fca5a5 !important;
}

/* Override Bootstrap dropdown defaults */
.premium-dropdown .dropdown-item {
  background: transparent !important;
}

.premium-dropdown .dropdown-item:hover,
.premium-dropdown .dropdown-item:focus {
  background: transparent !important;
}

/* ============================================================
   Session-time HUD pill (driven by js/session-time.js)
   Sits in .header-right-info between the bell and .header-balance.
   Three urgency levels — gold (ok) → amber (warn) → red (crit) —
   plus a "used" mode for postpaid/free seats (gold, no progress bar).
   ============================================================ */
.header-time-left {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.35);
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.08);
  color: var(--gg-accent) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  cursor: default;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.header-time-left i {
  font-size: 14px;
  opacity: 0.95;
}
.header-time-left-text {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-time-left-bar {
  display: inline-block;
  width: 56px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-left: 4px;
}
.header-time-left-fill {
  display: block;
  height: 100%;
  background: currentColor;
  transition: width 800ms ease;
}

/* warn = amber, > 5min ≤ 15min */
.header-time-left.urgency-warn {
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.10);
}

/* crit = red, ≤ 5 min, gentle pulse to draw the eye */
.header-time-left.urgency-crit {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
  animation: gg-time-pulse 1600ms ease-in-out infinite;
}
@keyframes gg-time-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}

/* "used" mode (postpaid / free) — gold, no progress bar */
.header-time-left.mode-used .header-time-left-bar { display: none; }

/* ============================================================
   Continue Playing row (Home) — horizontal strip above the hero
   Data source: js/recently-played.js
   ============================================================ */
.home-continue-playing {
  animation: gg-fade-slide-up 400ms ease-out both;
}
.home-rp-card {
  transform: translateZ(0);
  will-change: transform;
}
.home-rp-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.5) !important;
  box-shadow: 0 10px 25px rgba(var(--gg-accent-rgb, 74,159,232), 0.15);
}
.home-rp-card:hover .home-rp-play {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.home-rp-card:hover .home-rp-play:hover {
  transform: translateY(0) scale(1.1) !important;
  background: var(--gg-accent-hover) !important;
}
.home-continue-playing > div:last-child::-webkit-scrollbar {
  height: 4px;
}
.home-continue-playing > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.25);
  border-radius: 4px;
}
.home-continue-playing > div:last-child::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.45);
}
@keyframes gg-fade-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Keyboard shortcuts cheat-sheet overlay (toggled by `?`)
   Driven by js/shortcuts.js
   ============================================================ */
.gg-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gg-fade-in 200ms ease-out both;
}
.gg-shortcuts-card {
  width: min(560px, 90vw);
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
  overflow: hidden;
  animation: gg-shortcuts-pop 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gg-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gg-shortcuts-header h5 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gg-accent);
}
.gg-shortcuts-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}
.gg-shortcuts-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fff;
}
.gg-shortcuts-grid {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gg-shortcuts-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.gg-shortcuts-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-width: 2px;
  font-family: 'Inter', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--gg-accent);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.gg-shortcuts-or {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 4px;
}
.gg-shortcuts-desc {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
}
@keyframes gg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gg-shortcuts-pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   Page transitions — fade & slide pages into view when they
   become the active page. Relies on the existing layout.htm
   pattern where `pageType != 'X'` adds `d-none`; once removed,
   the `d-flex` class triggers the entrance animation.
   ============================================================ */
#page-home.d-flex,
#page-game.d-flex,
#page-shop.d-flex,
#page-event.d-flex,
#page-rank.d-flex {
  /* opacity-only entrance (was opacity+translateY) — a transform on the whole
     heavy page forces a full-page composite each navigation; fade is cheaper.
     `will-change` removed: it permanently pinned every active page to a GPU
     layer (anti-pattern; will-change should be transient). */
  animation: gg-page-enter 220ms ease-out both;
}
@keyframes gg-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal entrance polish — makes the existing .modal.show look less abrupt. */
.modal.show .modal-dialog {
  animation: gg-modal-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gg-modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   Skeleton shimmer — shown inside the Games grid while the
   master `theGames` list is still being populated via WSS.
   CSS-only; the template decides when to render the skeletons.
   ============================================================ */
.gg-skeleton-card {
  aspect-ratio: 2/3;
  border-radius: 12px;
  background: linear-gradient(110deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: gg-skeleton-shimmer 1400ms linear infinite;
  border: 1px solid rgba(255,255,255,0.04);
}
.gg-skeleton-pill {
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(110deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: gg-skeleton-shimmer 1400ms linear infinite;
  border: 1px solid rgba(255,255,255,0.04);
}
@keyframes gg-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect users' reduced-motion preference — disable all our custom animations. */
@media (prefers-reduced-motion: reduce) {
  #page-home.d-flex,
  #page-game.d-flex,
  #page-shop.d-flex,
  #page-event.d-flex,
  #page-rank.d-flex,
  .modal.show .modal-dialog,
  .home-continue-playing,
  .gg-shortcuts-overlay,
  .gg-shortcuts-card,
  .gg-skeleton-card,
  .gg-skeleton-pill,
  .header-time-left.urgency-crit {
    animation: none !important;
  }
}

/* ============================================================
   Command Palette (Ctrl+K / ⌘K) — Spotlight-style overlay
   Driven by js/command-palette.js
   ============================================================ */
.gg-cmdp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: gg-fade-in 180ms ease-out both;
}
.gg-cmdp-card {
  width: min(720px, 92vw);
  max-height: 70vh;
  background: rgba(17, 22, 28, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--gg-accent-rgb, 74,159,232), 0.06) inset;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: gg-shortcuts-pop 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gg-cmdp-input-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gg-cmdp-search-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
}
.gg-cmdp-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.gg-cmdp-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.gg-cmdp-kbd-hint kbd {
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Inter', 'Consolas', monospace;
}
.gg-cmdp-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.gg-cmdp-results::-webkit-scrollbar { width: 6px; }
.gg-cmdp-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.gg-cmdp-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease;
}
.gg-cmdp-item.is-selected {
  background: linear-gradient(90deg, rgba(var(--gg-accent-rgb, 74,159,232), 0.16), rgba(var(--gg-accent-rgb, 74,159,232), 0.06));
  box-shadow: inset 0 0 0 1px rgba(var(--gg-accent-rgb, 74,159,232), 0.25);
}
.gg-cmdp-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.gg-cmdp-item.is-selected .gg-cmdp-item-icon {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.16);
  color: var(--gg-accent);
}
.gg-cmdp-item-body {
  flex: 1;
  min-width: 0;
}
.gg-cmdp-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-cmdp-item-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-cmdp-item-enter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(var(--gg-accent-rgb, 74,159,232), 0.85);
  white-space: nowrap;
}
.gg-cmdp-item-enter kbd {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.1);
  border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.2);
  border-radius: 4px;
  color: var(--gg-accent);
  font-family: 'Inter', 'Consolas', monospace;
  font-weight: 600;
}
.gg-cmdp-empty {
  padding: 40px 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
.gg-cmdp-empty i {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.5;
}
.gg-cmdp-footer {
  padding: 10px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.2);
}
.gg-cmdp-footer kbd {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Inter', 'Consolas', monospace;
  margin: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
  .gg-cmdp-overlay, .gg-cmdp-card { animation: none !important; }
}

/* ============================================================
   Shared empty-state component — used by Rank, Events, Search.
   Layered icon illustration (outline background + filled fg).
   ============================================================ */
.gg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  animation: gg-fade-slide-up 400ms ease-out both;
}
.gg-empty-illus {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gg-empty-illus::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gg-accent-rgb, 74,159,232), 0.12), transparent 70%);
  z-index: 0;
}
.gg-empty-icon-bg {
  position: absolute;
  font-size: 110px;
  color: rgba(255, 255, 255, 0.06);
  z-index: 1;
}
.gg-empty-icon-fg {
  position: relative;
  font-size: 44px;
  color: var(--gg-accent);
  filter: drop-shadow(0 4px 14px rgba(var(--gg-accent-rgb, 74,159,232), 0.4));
  z-index: 2;
}
.gg-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.2px;
}
.gg-empty-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  max-width: 420px;
  line-height: 1.55;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gg-empty-state { animation: none !important; }
}

/* ============================================================
   Session Summary widget — Home sidebar card.
   Driven by js/session-summary.js
   ============================================================ */
.gg-session-summary {
  background: linear-gradient(135deg,
    rgba(var(--gg-accent-rgb, 74,159,232), 0.1) 0%,
    rgba(15, 23, 42, 0.45) 60%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.18);
  border-radius: 20px;
  padding: 18px 20px;
  animation: gg-fade-slide-up 400ms ease-out both;
}
.gg-ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gg-ss-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gg-accent);
}
.gg-ss-header i {
  color: rgba(var(--gg-accent-rgb, 74,159,232), 0.6);
  font-size: 14px;
}
.gg-ss-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
}
.gg-ss-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  min-width: 0;
}
.gg-ss-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.12);
  color: var(--gg-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.gg-ss-stat-body { width: 100%; }
.gg-ss-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}
.gg-ss-stat-caption {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-ss-divider {
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent);
  margin: 4px 0;
}
@media (prefers-reduced-motion: reduce) {
  .gg-session-summary { animation: none !important; }
}

/* ============================================================
   Virtual / progressive scrolling for the Games grid.
   Driven by js/virtual-scroll.js

   `content-visibility: auto` is the browser's own lazy-render hint:
   any .game-item that is outside the viewport (plus a margin) is
   NOT laid out, styled, or painted until it's about to scroll in.
   `contain-intrinsic-size` reserves the right amount of space so
   the scrollbar stays stable.
   ============================================================ */
.game-item {
  /* content-visibility:auto removed here too (this duplicate rule was the one
     winning) — it painted near-bottom cards black; renderLimit bounds the DOM. */
}

/* "Load more" footer: clickable card that bumps renderLimit by 60.
   Also used as a visual marker that auto-pagination is happening. */
.gg-load-more {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 20px;
  margin-top: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(var(--gg-accent-rgb, 74,159,232), 0.3);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.gg-load-more:hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.08);
  border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.5);
  color: var(--gg-accent);
}
.gg-load-more i {
  font-size: 12px;
  opacity: 0.7;
}
.gg-load-more-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
.gg-load-more:hover .gg-load-more-count { color: rgba(var(--gg-accent-rgb, 74,159,232), 0.7); }

/* ============================================================
   Game-card hover: replacement for the inline onmouseover/onmouseout
   that used to live on .game-image, .gg-card-overlay, and .gg-card-play-btn.
   Eliminating those inline handlers cuts ~6-8 event listeners PER card;
   at 60 rendered cards that's ~400-500 fewer listeners in the heap.
   Video play/pause is kept (handled by document-level delegation in
   js/ram-optimizer.js).
   ============================================================ */
.gg-card-hoverable:hover {
  /* no transform — the translateY+scale here made every card lift/grow as the
     cursor passed over it (the "all cards move" effect). Keep glow only; the
     poster image still zooms via .game-image:hover img (contained). */
  border-color: var(--gg-accent) !important;
  box-shadow: 0 8px 30px rgba(var(--gg-accent-rgb, 74,159,232), 0.25);
}

/* Overlay appears when the card (not just the overlay) is hovered — matches the
   pre-existing nested-hover semantics where entering the poster shows the UI. */
.gg-card-hoverable:hover .gg-card-overlay {
  opacity: 1 !important;
}

/* ── Direct-launch action cover (.gg-cover) ────────────────────────────────────
   Shown on LICENSED games when the café disabled "Show details before launch".
   The detail view is the only place the borrow flow lives, so both choices move
   onto the card. Reveal is the EXISTING CSS :hover on the overlay above — no JS
   hover handler, which matters on a grid that can hold 1000+ tiles.
   The overlay carries INLINE styles (background / justify-content), so these need
   !important. */
.gg-card-overlay.gg-cover {
  background: rgba(6, 8, 11, 0.88) !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.gg-cover-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 12px;
  padding: 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
/* Stacked, full-width: a side-by-side pair squeezes to nothing on the 150px
   Most-Played card. Width is fluid rather than fixed so one rule serves both the
   180px+ grid tile and the 150px Most-Played tile. */
.gg-cardbtns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 160px;
  padding: 0 6px;
}
.gg-cardbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: filter .15s, background .15s, transform .12s;
}
.gg-cardbtn:active { transform: translateY(1px); }
.gg-cardbtn svg { width: 22px; height: 22px; flex-shrink: 0; }
.gg-cardbtn:focus-visible {
  outline: 2px solid var(--gg-accent-hover, #e4c56a);
  outline-offset: 2px;
}
/* Primary = the member's own account. Solid accent, same as .gg-detail-play — a
   gradient/color-mix background can fail to parse in some CEF builds and drop the
   whole declaration, leaving a black button. */
.gg-cardbtn-play {
  background: var(--gg-accent, #d4af37);
  color: #14161c;
  box-shadow: 0 6px 18px rgba(var(--gg-accent-rgb, 212,175,55), 0.32);
}
.gg-cardbtn-play:hover { filter: brightness(1.08); }
/* Secondary = borrow a café account. Outlined GOLD, not grey glass: with no text
   labels the two buttons must read as one family, or the second looks like an
   afterthought rather than a real choice. No backdrop-filter here — it stays banned
   as a compositor/CPU killer, and this would repeat per tile across the grid. */
.gg-cardbtn-borrow {
  background: rgba(var(--gg-accent-rgb, 212,175,55), 0.12);
  border: 1.5px solid rgba(var(--gg-accent-rgb, 212,175,55), 0.7);
  color: var(--gg-accent-hover, #e4c56a);
}
.gg-cardbtn-borrow:hover { background: rgba(var(--gg-accent-rgb, 212,175,55), 0.24); }

/* ── Per-café: hide the coin/prize economy (build switch GG_HIDE_COINS) ──
   For centres that don't run coins at all. Covers the only two entry points:
   the Coins tile in Home's stat grid, and Shop's "Redeem with coins" divider +
   "Coins / Prizes" category pill. With both gone the coins group (-2) is
   unreachable, so the coin-priced branches inside Shop never render either.
   Home's stat grid is 2 columns with 3 tiles, so dropping the third just leaves
   a clean 2-up row — no layout compensation needed. */
html.gg-no-coins .gg-coin-tile,
html.gg-no-coins .gg-coins-divider,
html.gg-no-coins .gg-coins-pill {
  display: none !important;
}

/* Detail view's borrow button now uses the same glyph as the cards (was fa-key). */
.gg-detail-license-icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  flex-shrink: 0;
}

/* Play button scale on hover */
.gg-card-play-btn:hover {
  transform: scale(1.1);
}

/* Reveal the hover video only once it is actually PLAYING (Gold-style: the
   poster stays visible while the trailer loads, then the video fades in over it
   — no black/blank flash). ram-optimizer.js adds .hv-playing on the 'playing'
   event while the card is hovered, and removes it on mouse-out. */
.hover-video-card.hv-playing {
  opacity: 1 !important;
}

/* ============================================================
   GPU memory: kill backdrop-filter on hidden / inactive content.
   backdrop-filter creates a GPU compositing layer per element. With
   d-none + content-visibility: hidden the layout is skipped, but
   without these rules the browser can still allocate a layer for
   prepared offscreen content. Stripping backdrop-filter from
   hidden subtrees recovers GPU VRAM.
   ============================================================ */
#page-home.d-none *,
#page-game.d-none *,
#page-shop.d-none *,
#page-event.d-none *,
#page-rank.d-none *,
.mem-optimized * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Also flatten any rendering layers - "auto" lets the browser drop them. */
  will-change: auto !important;
}

/* Filter is also expensive — drop heavy filters inside hidden pages. */
#page-home.d-none img,
#page-game.d-none img,
#page-shop.d-none img,
#page-event.d-none img,
#page-rank.d-none img {
  filter: none !important;
}

/* containment: when pages are not active, also tell the browser to
   isolate their layout/style so changes inside them don't propagate. */
#page-home,
#page-game,
#page-shop,
#page-event,
#page-rank {
  contain: layout style;
}

/* ============================================================
   SMART NOTIFICATIONS
   ============================================================ */
#gg-notifications-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.gg-toast {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--gg-accent);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gg-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.gg-toast.hiding {
  transform: translateX(120%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

.gg-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.1);
  color: var(--gg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.gg-toast-content {
  flex-grow: 1;
}

.gg-toast-title {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

.gg-toast-message {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.4;
}

.gg-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  transition: 0.2s;
  font-size: 14px;
}

.gg-toast-close:hover {
  color: #fff;
  transform: scale(1.1);
}

.gg-toast.type-success .gg-toast-icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.gg-toast.type-success { border-left-color: #22c55e; }
.gg-toast.type-error .gg-toast-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.gg-toast.type-error { border-left-color: #ef4444; }
.gg-toast.type-info .gg-toast-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.gg-toast.type-info { border-left-color: #3b82f6; }

/* ============================================================
   FLOATING DOCK & CHAT (iCafeCloud x ggRock Mix)
   ============================================================ */
.gg-floating-dock {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.gg-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.gg-dock-btn:hover {
  background: rgba(var(--gg-accent-rgb, 74,159,232), 0.15);
  color: var(--gg-accent);
  transform: scale(1.15);
}

.gg-dock-btn.active {
  background: var(--gg-accent);
  color: #000;
  box-shadow: 0 0 15px rgba(var(--gg-accent-rgb, 74,159,232), 0.5);
}

.gg-dock-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
}

/* Chat Panel */
.gg-chat-panel {
  position: fixed;
  right: 80px;
  top: 50%;
  transform: translateY(-50%) translateX(20px);
  width: 350px;
  height: 600px;
  max-height: 80vh;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.gg-chat-panel.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.gg-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
}

.gg-chat-title {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gg-chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gg-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}

.gg-chat-msg.self {
  align-self: flex-end;
  align-items: flex-end;
}

.gg-chat-msg.other {
  align-self: flex-start;
  align-items: flex-start;
}

.gg-chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}

.gg-chat-msg.self .gg-chat-bubble {
  background: var(--gg-accent);
  color: #000;
  border-bottom-right-radius: 4px;
}

.gg-chat-msg.other .gg-chat-bubble {
  background: rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 4px;
}

.gg-chat-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.gg-chat-input-area {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 8px;
}

.gg-chat-input {
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 10px 16px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.gg-chat-input:focus {
  border-color: var(--gg-accent);
}

.gg-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gg-accent);
  border: none;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.gg-chat-send:hover {
  transform: scale(1.1);
}

/* ============================================================
   ACCOUNT DROPDOWN & THEME SYSTEM
   ============================================================ */
:root {
  --gg-accent-hover: #e4c56a;
  --gg-shadow: 0 0 20px rgba(var(--gg-accent-rgb, 74,159,232), 0.35);
}

.gg-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gg-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.gg-dropdown-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s;
}

.gg-dropdown-item:hover i {
  color: var(--gg-accent);
}

/* Theme picker */
.gg-theme-option:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.03);
}

.gg-theme-option.active {
  border-color: var(--gg-accent) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Star buttons in feedback */
.gg-star-btn.active {
  color: #f59e0b !important;
  transform: scale(1.2);
}

/* ============================================================
   IN-SESSION "CHANGE OFFER" PICKER (core theOfferSwitch)
   Trigger: header dropdown "Change offer" + the ⇄ next to the
   offer in the member-sidebar offers panel. Lets a member with
   multiple offers switch which one is being billed mid-session.
   ============================================================ */
/* contextual ⇄ button (member-sidebar offers row) */
.gg-offer-switch-btn {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.45);
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.14);
    color: var(--gg-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.gg-offer-switch-btn:hover {
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.28);
    transform: scale(1.08);
}

/* picker modal */
.gg-offer-content {
    background: #14171e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
}
.gg-offer-header {
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gg-offer-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}
.gg-offer-modal .close {
    padding: 0;
    background: none;
    border: none;
    color: #9ca3af;
    opacity: 1;
    line-height: 0;
}
.gg-offer-modal .close:hover { color: #fff; }
.gg-offer-body { padding: 16px 20px 20px; }
.gg-offer-note {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
    line-height: 1.5;
}
.gg-offer-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 58vh;
    overflow-y: auto;
}
.gg-offer-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.gg-offer-row.is-active {
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.12);
    border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.45);
}
.gg-offer-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.gg-offer-meta { flex: 1 1 auto; min-width: 0; }
.gg-offer-name {
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gg-offer-remaining {
    margin-top: 2px;
    color: var(--gg-accent);
    font-size: 12.5px;
}
.gg-offer-badge {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 10px;
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.18);
    border: 1px solid rgba(var(--gg-accent-rgb, 74,159,232), 0.5);
    color: var(--gg-accent);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.gg-offer-use {
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--gg-accent);
    border: none;
    color: #14161c;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.gg-offer-use:hover { filter: brightness(1.08); transform: translateY(-1px); }
.gg-offer-use.is-disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Home member-card "Change offer" chip — slim gold pill sitting directly under the
   name (in the name column, beside the avatar). Opens the My Offers picker. */
.gg-home-offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;          /* slim — fits under the name within the avatar height */
    border-radius: 9px;
    /* rgba (NOT color-mix) so the gold tint actually renders on iCafeMenu's older-Chromium
       CEF — color-mix() is unsupported there and made this chip transparent. */
    background: rgba(var(--gg-accent-rgb, 212,175,55), 0.18);
    border: 1px solid rgba(var(--gg-accent-rgb, 212,175,55), 0.55);
    color: var(--gg-accent);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.gg-home-offer-chip:hover {
    background: rgba(var(--gg-accent-rgb, 212,175,55), 0.28);
    transform: translateY(-1px);
}
.gg-home-offer-chip-icon { font-size: 13px; line-height: 1; }

/* ── Avatar LEVEL RING (Home member card) ───────────────────────────────────
   Circular gold progress arc around the avatar (conic-gradient masked to a ring),
   with the level badge sitting in the ring's bottom gap. Replaces the old
   horizontal Level Progress bar so it doesn't eat a whole row. */
.gg-avatar-ring {
    position: relative;
    width: 76px; height: 76px;
    flex: 0 0 76px;
    cursor: pointer;
    transition: transform .2s ease;
}
/* Smooth SVG ring (vector strokes anti-alias cleanly; the old conic-gradient + mask
   pixelated on the arc edges). Rotated so the 90° gap sits at the bottom by the badge. */
.gg-avatar-ring .gg-ring-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transform: rotate(135deg);
    overflow: visible;
}
.gg-avatar-ring .gg-ring-svg circle {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}
.gg-avatar-ring .gg-ring-track {
    stroke: rgba(var(--gg-accent-rgb, 212,175,55), 0.20);   /* faint accent tint (CEF-safe) */
    stroke-dasharray: 155.5 51.85;                           /* 270° arc + 90° bottom gap */
}
.gg-avatar-ring .gg-ring-prog {
    stroke: var(--gg-accent);
    stroke-dasharray: 0 999;
    transition: stroke-dasharray .6s ease;
}
.gg-avatar-ring .gg-avatar-img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px;
    border-radius: 50%;
    object-fit: cover;
}
.gg-avatar-ring .gg-level-badge {
    position: absolute; left: 50%; bottom: -2px;
    transform: translateX(-50%);
    background: var(--gg-bg-card, #1c222b);
    border: 1px solid var(--gg-accent);
    color: var(--gg-accent);
    font-weight: 800; font-size: 10px; line-height: 1;
    padding: 3px 8px;
    border-radius: 9px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Refresh-balance icon: spin while ggRefreshBalance() re-fetches, so the otherwise
   silent refresh gives visible feedback (paired with a toast in core-shims.js). */
@keyframes gg-spin { to { transform: rotate(360deg); } }
.gg-spin { animation: gg-spin 0.7s linear infinite; }

/* ============================================================
   IMMERSIVE GAME DETAIL VIEW (show-details-before-launch)
   Full-screen launch screen: hero (video for wired games, else
   blurred box-art) + big title + Play (own login) and
   Get-license-&-auto-login (borrow a cafe account from the pool).
   ============================================================ */
.gg-detail-immersive { position: fixed; inset: 0; z-index: 1100; overflow: hidden; }
.gg-detail-bg { position: absolute; inset: 0; z-index: 0; }
.gg-detail-bg video,
.gg-detail-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gg-detail-bg video { filter: brightness(0.45); }
.gg-detail-bg-img { filter: blur(26px) brightness(0.34); transform: scale(1.15); }
.gg-detail-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.72) 38%, rgba(8,9,11,.30) 70%, rgba(8,9,11,.55) 100%);
}
.gg-detail-scrim-bottom {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(8,9,11,.85), transparent 42%);
}
.gg-detail-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 34px 56px; }
.gg-detail-back {
    align-self: flex-start; display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #fff; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(6px); transition: background .15s;
}
.gg-detail-back:hover { background: rgba(255,255,255,.14); }
.gg-detail-stage { flex: 1; display: flex; align-items: center; gap: 46px; min-height: 0; }
.gg-detail-poster-wrap { position: relative; flex-shrink: 0; }
.gg-detail-poster {
    width: 248px; aspect-ratio: 2/3; object-fit: cover; border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.08); display: block;
}
.gg-detail-fav-badge {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.12); font-size: 16px;
}
.gg-detail-info { max-width: 640px; min-width: 0; }
.gg-detail-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.gg-detail-chip {
    display: inline-flex; align-items: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: #cbd5e1; font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 7px;
}
.gg-detail-chip-gold {
    background: rgba(var(--gg-accent-rgb, 74,159,232), 0.16);
    border-color: rgba(var(--gg-accent-rgb, 74,159,232), 0.5);
    color: var(--gg-accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.gg-detail-title {
    font-size: 54px; line-height: 1.04; font-weight: 900; color: #fff;
    margin: 0 0 22px; letter-spacing: -1px; text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.gg-detail-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gg-detail-play {
    display: flex; align-items: center; gap: 11px;
    /* SOLID accent (with a hard fallback) — a linear-gradient + color-mix background
       can fail to parse in some CEF builds, which drops the whole declaration and
       leaves a black button + near-invisible dark text. Solid is bulletproof. */
    background: var(--gg-accent, #d4af37) !important;
    border: none; color: #14161c; border-radius: 13px; padding: 15px 40px;
    font-weight: 800; font-size: 16px; cursor: pointer;
    box-shadow: 0 8px 26px rgba(212, 175, 55, 0.35);
    transition: transform .15s, filter .15s;
}
.gg-detail-play:hover { filter: brightness(1.07); transform: translateY(-1px); }
.gg-detail-license {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    color: #fff; border-radius: 13px; padding: 10px 24px; cursor: pointer;
    backdrop-filter: blur(6px); transition: background .15s, transform .15s; text-align: left;
}
.gg-detail-license:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.gg-detail-license b { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.gg-detail-license small { font-size: 11px; color: rgba(255,255,255,.55); }
.gg-detail-close {
    display: flex; align-items: center; background: #ef4444; border: none; color: #fff;
    border-radius: 13px; padding: 15px 36px; font-weight: 700; font-size: 16px; cursor: pointer;
}

/* Detail "Get license" button greyed out when the game has no server pool account. */
.gg-detail-license.is-disabled {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}
.gg-detail-license.is-disabled:hover { background: rgba(255, 255, 255, 0.04); transform: none; }
.gg-detail-license.is-disabled small { color: rgba(255, 255, 255, 0.3); }

/* Upcoming event badge (gold, distinct from END=red / GOING=green) */
.event-status-soon { background: var(--gg-accent) !important; color: #1a1206 !important; }

/* ============================================================
   EVENTS — esports redesign (gge-* classes). Replaces the
   blue-ported event styles. Display font = Rajdhani (self-hosted),
   body inherits the theme's Inter. CEF-safe (rgba, no color-mix).
   ============================================================ */
@font-face{font-family:'Rajdhani';src:url('../webfonts/rajdhani-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../webfonts/rajdhani-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../webfonts/rajdhani-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{ --gge-disp:'Rajdhani','Rubik',sans-serif; --gge-going:#27d17c; --gge-silver:#d7dce8; --gge-bronze:#e3a36a; }

/* ---- list layout ---- */
.events-list-wrapper{ flex:1; min-height:0; overflow-y:auto; padding-bottom:90px; }   /* clear the floating dock so bottom-row Join/View buttons stay tappable */
.gge-events-grid{ display:flex; flex-wrap:wrap; gap:22px; align-content:flex-start; }

/* ---- list card ---- */
.gge-card{ position:relative; width:486px; max-width:100%; display:flex; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.075); border-radius:18px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; }
.gge-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(var(--gg-accent-rgb),0.5), transparent); }
.gge-card:hover{ transform:translateY(-4px); border-color:rgba(var(--gg-accent-rgb),0.45);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.7), 0 12px 40px -22px rgba(var(--gg-accent-rgb),0.45); }
.gge-art{ position:relative; width:150px; flex-shrink:0; background-size:cover; background-position:center; background-color:rgba(255,255,255,0.04); }
.gge-art::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(9,12,18,0) 28%, rgba(9,12,18,.55) 72%, var(--gg-bg,#0a0d13) 100%); }
.gge-art-edge{ position:absolute; top:0; bottom:0; right:0; width:2px; z-index:2;
  background:linear-gradient(rgba(var(--gg-accent-rgb),0), rgba(var(--gg-accent-rgb),.8), rgba(var(--gg-accent-rgb),0)); }
.gge-body{ flex:1; min-width:0; padding:15px 17px 14px; display:flex; flex-direction:column; }
.gge-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gge-name{ font-family:var(--gge-disp); font-weight:700; font-size:22px; line-height:1.05; letter-spacing:.3px; text-transform:uppercase; color:#fff; }
.gge-time{ margin-top:7px; font-size:12.5px; color:rgba(255,255,255,.52); display:flex; align-items:center; gap:7px; }
.gge-time i{ color:var(--gg-accent); font-size:13px; }
.gge-meta{ margin-top:9px; display:flex; flex-direction:column; gap:6px; }
.gge-row{ font-size:12.5px; color:rgba(255,255,255,.66); display:flex; align-items:center; gap:8px; min-width:0; }
.gge-row i{ color:rgba(255,255,255,.34); font-size:13px; flex-shrink:0; width:15px; text-align:center; }
.gge-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gge-foot{ margin-top:auto; padding-top:12px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }

/* badges */
.gge-badge{ font-family:var(--gge-disp); font-weight:700; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; flex-shrink:0;
  padding:4px 9px 3px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gge-badge .gge-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.gge-badge.going{ color:#48e496; background:rgba(39,209,124,.15); border:1px solid rgba(39,209,124,.4); }
.gge-badge.going .gge-dot{ animation:gge-pulse 1.8s infinite; }
.gge-badge.soon{ color:var(--gg-accent); background:rgba(var(--gg-accent-rgb),.14); border:1px solid rgba(var(--gg-accent-rgb),.42); }
.gge-badge.end{ color:#ff6b7d; background:rgba(255,107,125,.13); border:1px solid rgba(255,107,125,.36); }
@keyframes gge-pulse{ 0%{box-shadow:0 0 0 0 rgba(72,228,150,.6)} 70%{box-shadow:0 0 0 6px rgba(72,228,150,0)} 100%{box-shadow:0 0 0 0 rgba(72,228,150,0)} }

/* prize + coin */
.gge-coin{ width:19px; height:19px; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0; font-size:9px; color:#5a3c05;
  background:radial-gradient(circle at 35% 30%, #ffe79a, var(--gg-accent) 60%, #b9821a);
  box-shadow:0 0 14px rgba(var(--gg-accent-rgb),.5), inset 0 1px 1px rgba(255,255,255,.55); }
.gge-coin-sm{ width:15px; height:15px; font-size:8px; }
.gge-coin-lg{ width:30px; height:30px; font-size:14px; }
.gge-prize{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gge-prize-lbl{ font-family:var(--gge-disp); font-weight:600; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.34); }
.gge-prize-amt{ font-family:var(--gge-disp); font-weight:700; font-size:22px; line-height:1; color:var(--gg-accent); display:flex; align-items:center; gap:7px; white-space:nowrap;
  text-shadow:0 0 20px rgba(var(--gg-accent-rgb),.4); }

/* buttons */
.gge-join{ font-family:var(--gge-disp); font-weight:700; font-size:15px; letter-spacing:1.4px; text-transform:uppercase; flex-shrink:0; cursor:pointer;
  padding:8px 16px; border:none; border-radius:10px; display:inline-flex; align-items:center; gap:8px; color:#241a04;
  background:linear-gradient(160deg, #ffd566, var(--gg-accent)); box-shadow:0 8px 20px -8px rgba(var(--gg-accent-rgb),.7), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s, box-shadow .18s; }
.gge-join i{ font-size:13px; }
.gge-join:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(var(--gg-accent-rgb),.9), inset 0 1px 0 rgba(255,255,255,.55); }
.gge-join-ghost{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.gge-join-ghost:hover{ background:rgba(var(--gg-accent-rgb),.12); color:#fff; border-color:rgba(var(--gg-accent-rgb),.4); box-shadow:none; transform:translateY(-2px); }

/* ---- detail ---- */
.gge-detail{ padding:84px 34px 44px; }
.gge-hero{ position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.075);
  padding:28px 34px 24px; min-height:206px; display:flex; flex-direction:column; justify-content:flex-end; }
.gge-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.gge-hero-bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(9,12,18,.95) 16%, rgba(9,12,18,.72) 52%, rgba(9,12,18,.55) 100%),
            radial-gradient(700px 320px at 92% 130%, rgba(var(--gg-accent-rgb),.18), transparent 70%); }
.gge-hero-bg::before{ content:''; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:100% 4px; }
.gge-hero>*{ position:relative; z-index:2; }
.gge-hero-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:auto; }
.gge-back{ font-family:var(--gge-disp); font-weight:600; letter-spacing:1.3px; text-transform:uppercase; font-size:12.5px; color:rgba(255,255,255,.6); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(0,0,0,.28); }
.gge-back:hover{ color:#fff; border-color:rgba(var(--gg-accent-rgb),.4); }
.gge-hero-name{ font-family:var(--gge-disp); font-weight:700; font-size:44px; line-height:.97; text-transform:uppercase; letter-spacing:.5px; color:#fff; margin:16px 0 12px; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.gge-hero-meta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.gge-hm{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,.74); }
.gge-hm i{ color:var(--gg-accent); }
.gge-hero-prize{ margin-left:auto; text-align:right; }
.gge-hero-amt{ font-family:var(--gge-disp); font-weight:700; font-size:38px; line-height:1; color:var(--gg-accent); display:flex; align-items:center; gap:10px; justify-content:flex-end; text-shadow:0 0 30px rgba(var(--gg-accent-rgb),.5); }

.gge-detail-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; margin:20px 0; }
.gge-panel{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.075); border-radius:16px; padding:20px 22px; position:relative; overflow:hidden; }
.gge-panel-h{ font-family:var(--gge-disp); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:14px; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.gge-panel-h i{ color:var(--gg-accent); }
.gge-rules{ font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.55; min-height:90px; }

/* podium */
.gge-podium{ display:flex; align-items:flex-end; justify-content:center; gap:14px; padding-top:6px; }
.gge-pod{ display:flex; flex-direction:column; align-items:center; gap:8px; width:31%; min-width:0; }
.gge-pod-av{ position:relative; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-family:var(--gge-disp); font-weight:700; font-size:21px; color:#1a1206; }
.gge-crown{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); color:var(--gg-accent); font-size:14px; filter:drop-shadow(0 0 6px rgba(var(--gg-accent-rgb),.7)); }
.gge-pod-nm{ font-weight:700; font-size:13px; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.gge-pod-pay{ font-family:var(--gge-disp); font-weight:700; font-size:14px; display:flex; align-items:center; gap:5px; }
.gge-pod-stand{ width:100%; border-radius:9px 9px 0 0; display:grid; place-items:center; font-family:var(--gge-disp); font-weight:700; font-size:24px; border:1px solid rgba(255,255,255,.075); border-bottom:none; }
.gge-pod.p1 .gge-pod-av{ background:radial-gradient(circle at 35% 30%, #ffe79a, var(--gg-accent) 65%, #b9821a); box-shadow:0 0 22px rgba(var(--gg-accent-rgb),.55); }
.gge-pod.p1 .gge-pod-stand{ height:76px; color:var(--gg-accent); background:linear-gradient(rgba(var(--gg-accent-rgb),.22), rgba(var(--gg-accent-rgb),.05)); border-color:rgba(var(--gg-accent-rgb),.4); }
.gge-pod.p1 .gge-pod-pay{ color:var(--gg-accent); }
.gge-pod.p2 .gge-pod-av{ background:radial-gradient(circle at 35% 30%, #fff, var(--gge-silver) 65%, #8b91a3); box-shadow:0 0 16px rgba(215,220,232,.35); color:#26303f; }
.gge-pod.p2 .gge-pod-stand{ height:56px; color:var(--gge-silver); background:linear-gradient(rgba(215,220,232,.16), rgba(215,220,232,.03)); border-color:rgba(215,220,232,.3); }
.gge-pod.p2 .gge-pod-pay{ color:var(--gge-silver); }
.gge-pod.p3 .gge-pod-av{ background:radial-gradient(circle at 35% 30%, #f6cda3, var(--gge-bronze) 65%, #9c623a); box-shadow:0 0 16px rgba(227,163,106,.35); color:#3a2210; }
.gge-pod.p3 .gge-pod-stand{ height:44px; color:var(--gge-bronze); background:linear-gradient(rgba(227,163,106,.16), rgba(227,163,106,.03)); border-color:rgba(227,163,106,.3); }
.gge-pod.p3 .gge-pod-pay{ color:var(--gge-bronze); }
.gge-pod-empty{ width:100%; text-align:center; color:rgba(255,255,255,.34); font-size:13px; padding:24px 0; }

/* leaderboard */
.gge-board{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.075); border-radius:16px; overflow:hidden; }
.gge-board-h{ display:flex; align-items:center; justify-content:space-between; padding:15px 22px; border-bottom:1px solid rgba(255,255,255,0.075); }
.gge-board-t{ font-family:var(--gge-disp); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:14px; display:flex; align-items:center; gap:10px; color:#fff; }
.gge-board-t i{ color:var(--gg-accent); }
.gge-board-c{ font-family:var(--gge-disp); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.gge-board-scroll{ overflow-x:auto; }
#gge-board-table{ width:100%; border-collapse:collapse; }
#gge-board-table thead th{ font-family:var(--gge-disp); font-weight:600; letter-spacing:1.3px; text-transform:uppercase; font-size:11.5px; color:rgba(255,255,255,.5); text-align:center; padding:13px 12px; white-space:nowrap; }
#gge-board-table thead th.gge-th-left,#gge-board-table tbody td.gge-th-left{ text-align:left; }
#gge-board-table tbody td{ padding:10px 12px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.82); border-top:1px solid rgba(255,255,255,.045); white-space:nowrap; }
#gge-board-table tbody td.gge-pts{ font-family:var(--gge-disp); font-weight:700; font-size:16px; color:var(--gg-accent); }
#gge-board-table tbody td.gge-bon{ color:var(--gge-going); font-weight:600; }
#gge-board-table tbody td label{ margin:0; }
.gge-pos{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-family:var(--gge-disp); font-weight:700; font-size:16px; color:rgba(255,255,255,.55); }
.gge-player{ display:flex; align-items:center; gap:11px; }
.gge-pa{ width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.075); display:grid; place-items:center; font-family:var(--gge-disp); font-weight:700; font-size:14px; color:rgba(255,255,255,.7); flex-shrink:0; }
.gge-pn{ font-weight:700; font-size:14px; color:#fff; }
#gge-board-table tbody tr.gge-r1{ background:linear-gradient(90deg, rgba(var(--gg-accent-rgb),.10), transparent 55%); box-shadow:inset 3px 0 0 var(--gg-accent); }
#gge-board-table tbody tr.gge-r2{ background:linear-gradient(90deg, rgba(215,220,232,.07), transparent 55%); box-shadow:inset 3px 0 0 var(--gge-silver); }
#gge-board-table tbody tr.gge-r3{ background:linear-gradient(90deg, rgba(227,163,106,.07), transparent 55%); box-shadow:inset 3px 0 0 var(--gge-bronze); }
#gge-board-table tbody tr.gge-r1 .gge-pos{ background:radial-gradient(circle at 35% 30%, #ffe79a, var(--gg-accent) 65%, #b9821a); color:#3a2705; box-shadow:0 0 14px rgba(var(--gg-accent-rgb),.45); }
#gge-board-table tbody tr.gge-r2 .gge-pos{ background:radial-gradient(circle at 35% 30%, #fff, var(--gge-silver) 65%, #8b91a3); color:#26303f; }
#gge-board-table tbody tr.gge-r3 .gge-pos{ background:radial-gradient(circle at 35% 30%, #f6cda3, var(--gge-bronze) 65%, #9c623a); color:#3a2210; }
#gge-board-table tbody tr.gge-r1 .gge-pn{ color:var(--gg-accent); }
#gge-board-table tbody tr:hover{ background:rgba(var(--gg-accent-rgb),.045); }
.gge-board-empty{ text-align:center !important; color:rgba(255,255,255,.34); padding:34px 0 !important; }

/* clear the fixed header nav above the Events title + esports title styling */
.events-content-wrapper{ padding-top:78px !important; }
.events-title{ font-family:var(--gge-disp); font-weight:700; text-transform:uppercase; letter-spacing:2px; font-size:30px; }

/* Standings fills the remaining viewport and scrolls INTERNALLY (sticky header) so the
   hero/rules/winners stay put and the leaderboard owns the space when 40+ players join. */
.gge-detail{ height:var(--gg-vh, 100vh); overflow:hidden; }
.gge-board{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.gge-board-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }
#gge-board-table thead th{ position:sticky; top:0; z-index:3; background:#12151b; box-shadow:0 1px 0 rgba(255,255,255,0.06); }

/* Density pass — tighter hero + rules/winners so the standings owns more of the screen */
.gge-hero{ min-height:158px; padding:20px 30px 18px; }
.gge-hero-name{ font-size:38px; margin:12px 0 10px; }
.gge-detail-grid{ margin:14px 0; gap:16px; }
.gge-panel{ padding:15px 18px; }
.gge-panel-h{ margin-bottom:12px; }
.gge-rules{ min-height:54px; }
.gge-podium{ padding-top:2px; }
.gge-pod-av{ width:44px; height:44px; font-size:18px; }
.gge-pod-stand{ font-size:21px; }
.gge-pod.p1 .gge-pod-stand{ height:58px; }
.gge-pod.p2 .gge-pod-stand{ height:44px; }
.gge-pod.p3 .gge-pod-stand{ height:34px; }
#gge-board-table thead th{ padding:10px 12px; }
#gge-board-table tbody td{ padding:7px 12px; }
.gge-pos{ width:30px; height:30px; font-size:15px; }
.gge-pa{ width:30px; height:30px; font-size:13px; }

/* ============================================================
   ORDER LIST — refined dark+gold data table (redesign)
   ============================================================ */
.myModalOrderList .modal-dialog{ max-width:min(1000px, 95vw) !important; width:1000px; }
.modal-content-order{ max-height:90vh; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,0.08); position:relative; }
.modal-content-order .modal-header{ border:none; padding:0; min-height:0; }
.modal-content-order .close{ position:absolute; top:16px; right:18px; z-index:4; opacity:.6; color:rgba(255,255,255,.85); background:none; border:none; padding:6px; transition:opacity .2s; }
.modal-content-order .close:hover{ opacity:1; }
.order-list-header{ padding:22px 28px 16px; }
.order-list-title{ font-size:21px !important; font-weight:800 !important; letter-spacing:.3px; color:#fff; margin:0; }
.order-search-form{ margin-top:14px; max-width:440px; }
.order-search-input{ background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.1) !important; border-radius:11px !important; color:#fff !important; padding:10px 14px 10px 38px !important; width:100%; font-size:14px; }
.order-search-input::placeholder{ color:rgba(255,255,255,.4); }
.order-search-input-group .search-icon{ color:rgba(255,255,255,.45); }

.order-table-container{ max-height:60vh; overflow-y:auto; overflow-x:hidden; padding:0 28px 6px; }
.order-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.order-table thead th{ position:sticky; top:0; z-index:2; background:#12151b; color:rgba(255,255,255,.5);
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:13px 12px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09); white-space:nowrap; }
.order-table thead th.text-right{ text-align:right; }
.order-table tbody td{ padding:13px 12px; font-size:13.5px; color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; text-align:left; }
.order-table tbody tr:hover{ background:rgba(var(--gg-accent-rgb),.05); }
.order-table tbody tr:last-child td{ border-bottom:none; }
.order-table .ellipsiss{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-table th:nth-child(1), .order-table td:nth-child(1){ width:74px; color:var(--gg-accent); font-weight:700; }
.order-table th:nth-child(2), .order-table td:nth-child(2){ width:130px; white-space:nowrap; color:rgba(255,255,255,.6); }
.order-table th:nth-child(3), .order-table td:nth-child(3){ width:178px; }
.order-table th:nth-child(5), .order-table td:nth-child(5){ width:92px; text-align:right; font-weight:700; color:#fff; }
.order-table th:nth-child(6), .order-table td:nth-child(6){ width:120px; }
.order-table th:nth-child(7), .order-table td:nth-child(7){ width:78px; color:rgba(255,255,255,.6); }
.order-table td:nth-child(4){ font-weight:600; color:#fff; }

.gge-otrack{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 11px; }
.gge-otrack-steps{ display:flex; justify-content:space-between; font-size:8.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:5px; }
.gge-otrack-steps span.on{ color:#fff; }
.gge-otrack-bar{ height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.gge-otrack-fill{ height:100%; background:var(--gg-accent); border-radius:2px; transition:width .5s ease; box-shadow:0 0 8px rgba(var(--gg-accent-rgb),.45); }
.gge-otrack-fill.err{ background:#ef4444; box-shadow:none; }
.gge-otrack-label{ margin-top:6px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.3px; display:flex; align-items:center; justify-content:center; gap:5px; }
.gge-otrack-label.pending{ color:#f5b942; } .gge-otrack-label.proc{ color:#4aa3ff; } .gge-otrack-label.done{ color:#27d17c; } .gge-otrack-label.err{ color:#ef4444; }

.order-table td:nth-child(6) .btn{ background:rgba(var(--gg-accent-rgb),.16) !important; border:1px solid rgba(var(--gg-accent-rgb),.4) !important; color:var(--gg-accent) !important; border-radius:8px !important; padding:5px 10px !important; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.order-table td:nth-child(6) .btn:hover{ background:var(--gg-accent) !important; color:#1a1206 !important; }

.order-pagination{ padding:16px 24px; border-top:1px solid rgba(255,255,255,.06); }
.order-pagination .pagination{ gap:6px; margin:0; }
.order-pagination .page-link{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important; color:rgba(255,255,255,.72) !important; border-radius:9px !important; min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.order-pagination .page-link:hover{ background:rgba(var(--gg-accent-rgb),.14) !important; border-color:rgba(var(--gg-accent-rgb),.4) !important; color:#fff !important; }
.order-pagination .page-item.active .page-link{ background:var(--gg-accent) !important; border-color:var(--gg-accent) !important; color:#1a1206 !important; font-weight:700; }

/* ============================================================
   BALANCE HISTORY — same refined dark+gold table treatment
   ============================================================ */
.myModalBalanceHistory .modal-dialog{ max-width:min(1000px, 95vw) !important; width:1000px; }
.balance-history-header{ padding:22px 28px 16px; }
.balance-history-title{ font-size:21px !important; font-weight:800 !important; color:#fff; margin:0 0 14px; text-align:center; }
.balance-summary{ gap:12px !important; flex-wrap:wrap; }
.balance-summary .summary-item{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:9px 16px; }
.summary-label{ color:rgba(255,255,255,.5) !important; font-size:11px !important; margin-right:8px !important; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.summary-value{ font-size:16px !important; font-weight:800 !important; font-variant-numeric:tabular-nums; }
.summary-topup{ color:#27d17c !important; }
.summary-expenses{ color:#ff6b7d !important; }

.balance-table-container{ max-height:58vh; overflow-y:auto; overflow-x:hidden; padding:0 28px 6px; }
.balance-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.balance-table thead th{ position:sticky; top:0; z-index:2; background:#12151b; color:rgba(255,255,255,.5);
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:13px 12px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09); white-space:nowrap; }
.balance-table thead th.text-right{ text-align:right; }
.balance-table tbody td{ padding:12px 12px; font-size:13.5px; color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.balance-table tbody td.text-right{ text-align:right; font-variant-numeric:tabular-nums; }
.balance-table tbody tr:hover{ background:rgba(var(--gg-accent-rgb),.05); }
.balance-table tbody tr:last-child td{ border-bottom:none; }
.balance-table .ellipsiss{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.balance-table th:nth-child(1), .balance-table td:nth-child(1){ width:134px; white-space:nowrap; color:rgba(255,255,255,.6); }
.balance-table th:nth-child(2), .balance-table td:nth-child(2){ color:#fff; font-weight:600; }
.balance-table td.balance-bonus{ color:var(--gg-accent); font-weight:700; }

.balance-pagination{ padding:16px 24px; border-top:1px solid rgba(255,255,255,.06); }
.balance-pagination .pagination{ gap:6px; margin:0; }
.balance-pagination .page-link{ background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important; color:rgba(255,255,255,.72) !important; border-radius:9px !important; min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.balance-pagination .page-link:hover{ background:rgba(var(--gg-accent-rgb),.14) !important; border-color:rgba(var(--gg-accent-rgb),.4) !important; color:#fff !important; }
.balance-pagination .page-item.active .page-link{ background:var(--gg-accent) !important; border-color:var(--gg-accent) !important; color:#1a1206 !important; font-weight:700; }

.gge-zero{ color:rgba(255,255,255,.2) !important; font-weight:400 !important; }

/* Balance history credit (top-up) / debit (spent) coloring */
.gge-credit{ color:#27d17c !important; font-weight:600; }
.gge-debit{ color:#ff6b7d !important; font-weight:600; }


/* ── News spotlight card (CEF-light redesign: solid card, NO backdrop-filter, one-shot
   opacity+transform slide, static glows). Replaces the frosted Bootstrap carousel; driven
   by vueHome.newsActivePage (core-shims news loop) via the `on` class. ── */
#home_news_sidebar.gg-nws { position: relative; background: linear-gradient(180deg, rgba(17,22,30,0.96), rgba(12,16,22,0.97)); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 44px -22px rgba(0,0,0,0.7); flex-shrink: 0; }
.gg-nws::before { content: ''; position: absolute; top: 0; left: 0; width: 46%; height: 2px; z-index: 4; background: linear-gradient(90deg, var(--gg-accent), transparent); }
.gg-nws-stage { position: relative; }
.gg-nws-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(9px) scale(1.025); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.gg-nws-slide.on { position: relative; opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.gg-nws-art { display: block; width: 100%; }
.gg-nws-art video { display: block; width: 100%; }
.gg-nws-foot { display: flex; align-items: center; gap: 12px; padding: 11px 14px 12px; }
.gg-nws-count { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--gg-accent); white-space: nowrap; }
.gg-nws-count b { color: rgba(255,255,255,.36); font-weight: 600; }
.gg-nws-pips { display: flex; gap: 5px; flex: 1; }
.gg-nws-pip { flex: 1; height: 3px; padding: 0; border: none; border-radius: 2px; background: rgba(255,255,255,.13); cursor: pointer; transition: background .3s; }
.gg-nws-pip.on { background: var(--gg-accent); box-shadow: 0 0 8px rgba(var(--gg-accent-rgb), .55); }


/* ── Promotions card (CEF-light, matches the news spotlight: solid dark, accent edge,
   2-column tiles w/ accent price + buy button). Same vueHome.promotedItems + quick_buy. ── */
#home_promotions.gg-promo { position: relative; background: linear-gradient(180deg, rgba(17,22,30,0.96), rgba(12,16,22,0.97)); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 16px; overflow: hidden; box-shadow: 0 20px 44px -22px rgba(0,0,0,0.7); }
.gg-promo::before { content: ''; position: absolute; top: 0; left: 0; width: 46%; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--gg-accent), transparent); }
.gg-promo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.gg-promo-lbl { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; letter-spacing: 2.5px; font-size: 12px; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 9px; }
.gg-promo-lbl i { width: 16px; height: 2px; background: var(--gg-accent); box-shadow: 0 0 8px rgba(var(--gg-accent-rgb), .5); }
.gg-promo-count { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; font-size: 11px; letter-spacing: 1px; color: var(--gg-accent); background: rgba(var(--gg-accent-rgb), .12); border: 1px solid rgba(var(--gg-accent-rgb), .3); padding: 2px 9px; border-radius: 20px; }
.gg-promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gg-promo-foot { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.gg-promo-pgnum { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; font-size: 12px; letter-spacing: 1px; color: var(--gg-accent); white-space: nowrap; }
.gg-promo-pgnum b { color: rgba(255,255,255,.36); font-weight: 600; }
.gg-promo-pips { display: flex; gap: 5px; flex: 1; }
.gg-promo-pip { flex: 1; height: 3px; padding: 0; border: none; border-radius: 2px; background: rgba(255,255,255,.13); cursor: pointer; transition: background .3s; }
.gg-promo-pip.on { background: var(--gg-accent); box-shadow: 0 0 8px rgba(var(--gg-accent-rgb), .55); }
.gg-promo-tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); background: #10141b; display: flex; flex-direction: column; transition: transform .18s, border-color .18s, box-shadow .18s; }
.gg-promo-tile:hover { transform: translateY(-3px); border-color: var(--gg-accent); box-shadow: 0 0 0 2px rgba(var(--gg-accent-rgb), .9), 0 12px 26px -10px rgba(0,0,0,.7); }
/* light product stage — white-background catalog photos blend into it; dark photos read as normal thumbnails */
.gg-promo-stage { position: relative; flex: 1; min-height: 0; background: linear-gradient(160deg, #f7f8fa, #dfe3ea); overflow: hidden; }
.gg-promo-art { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .18s; }
.gg-promo-tile:hover .gg-promo-art { transform: scale(1.05); }
/* floating glass info pill — translucent dark over the image bottom; CEF-safe (rgba, no backdrop-filter) */
.gg-promo-pill { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px 6px 10px; border-radius: 10px; background: rgba(10,13,18,0.72); border: 1px solid rgba(255,255,255,0.1); }
.gg-promo-info { min-width: 0; }
.gg-promo-nm { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-promo-price { font-family: var(--gge-disp, 'Rajdhani', sans-serif); font-weight: 700; font-size: 15px; color: var(--gg-accent); line-height: 1.15; }
.gg-promo-buy { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: rgba(var(--gg-accent-rgb), .16); border: 1px solid rgba(var(--gg-accent-rgb), .42); color: var(--gg-accent); font-size: 16px; line-height: 1; flex-shrink: 0; transition: background .15s, color .15s, transform .15s; }
.gg-promo-tile:hover .gg-promo-buy { background: var(--gg-accent); color: #1a1205; transform: scale(1.06); }