@charset "UTF-8";
/* =========================================================================
   GamingAnalytics — "Cockpit" theme
   Visual skin loaded AFTER style-liberty-dark.css / style-tt.css.
   Only repaints color, surface, radius, shadow and type — no layout,
   position or JS-driven structural rules are touched, so sidebar collapse,
   dropdowns, DataTables and tooltips keep working exactly as before.
   ========================================================================= */

@import url('//fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- re-tint the template's own bootstrap variables ------------------ */
  --primary: #a78bfa;
  --secondary: #d946ef;
  --success: #2dd4bf;
  --info: #38bdf8;
  --warning: #d97706;
  --danger: #f43f5e;
  --light: #1b1533;
  --dark: #f1effa;
  --light-bg-color: #150f2b;
  --card-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 10px rgba(76, 29, 149, .18);

  /* ---- cockpit design tokens -------------------------------------------- */
  --ga-bg: #000000;
  --ga-bg-alt: #0c0a18;
  --ga-fg: #f4f2fb;
  --ga-fg-muted: #b7b0d4;
  --ga-fg-faint: #857da8;
  --ga-accent: #a78bfa;
  --ga-accent-2: #d946ef;
  --ga-teal: #2dd4bf;
  --ga-glass: rgba(18, 14, 34, .72);
  --ga-glass-strong: rgba(12, 10, 22, .88);
  --ga-glass-soft: rgba(255, 255, 255, .04);
  --ga-border: rgba(167, 139, 250, .16);
  --ga-border-hi: rgba(196, 181, 253, .34);
  --ga-radius: 12px; /* was 18px - slightly squarer cards */
  --ga-radius-sm: 12px;
  --ga-radius-pill: 999px;
  --ga-gradient: linear-gradient(135deg, #a020a0 0%, #800080 100%);
  --ga-shadow: 0 0 0 .5px rgba(255, 255, 255, .05) inset, 0 1px 0 rgba(255, 255, 255, .06) inset, 0 12px 40px rgba(0, 0, 0, .42), 0 2px 10px rgba(76, 29, 149, .16);
  --ga-shadow-lift: 0 0 0 .5px rgba(255, 255, 255, .08) inset, 0 20px 56px rgba(0, 0, 0, .5), 0 8px 24px rgba(124, 58, 237, .22);
}

/* Light theme — toggled by data-theme="light" on <html>, set by the
   appearance switch in the header and persisted in localStorage. Every
   component below is written against the --ga-* / bootstrap variables,
   so redefining them here is enough to reskin the whole site. */
:root[data-theme="light"] {
  --primary: #7c3aed;
  --secondary: #c026d3;
  --success: #0d9488;
  --light-bg-color: #efe9fb;
  --dark: #1c1533;
  --card-shadow: 0 12px 30px rgba(124, 58, 237, .12), 0 2px 8px rgba(124, 58, 237, .08);

  --ga-bg: #f7f5fc;
  --ga-bg-alt: #ffffff;
  --ga-fg: #1c1533;
  --ga-fg-muted: #55507a;
  --ga-fg-faint: #7c7699;
  --ga-glass: rgba(255, 255, 255, .78);
  --ga-glass-strong: rgba(255, 255, 255, .95);
  --ga-glass-soft: rgba(124, 58, 237, .05);
  --ga-border: rgba(124, 58, 237, .16);
  --ga-border-hi: rgba(124, 58, 237, .38);
  --ga-shadow: 0 0 0 .5px rgba(124, 58, 237, .05) inset, 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 30px rgba(76, 29, 149, .1);
  --ga-shadow-lift: 0 0 0 .5px rgba(124, 58, 237, .08) inset, 0 20px 44px rgba(76, 29, 149, .16);
}

/* ---------------------------------------------------------------------- *
 * Base
 * ---------------------------------------------------------------------- */

html, body {
  background-color: var(--ga-bg) !important;
  color: var(--ga-fg);
  font-family: "Inter", "Nunito", -apple-system, "Segoe UI", sans-serif;
}

/* style-liberty-dark.css hardcodes .container-fluid to #070a29 - this is
   the actual "gap between cards" color on every page, independent of --ga-bg */
.container-fluid { background-color: transparent !important; }

body {
  background: var(--ga-bg) !important;
  background-attachment: fixed;
}

/* page scale: 100% everywhere (page zoom 100 v2). The old desktop 90% zoom
   broke chart libraries (Chart.js/amCharts map the mouse in unzoomed px ->
   tooltips ~10% off the cursor, amCharts viewport check failing). --ga-zoom
   kept at 1 for the vh-based heights that divide by it. */
html { --ga-zoom: 1; }

::selection { background: rgba(167, 139, 250, .35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, .55); }

a { color: var(--ga-accent); }
a:hover, a:focus { color: var(--ga-accent-2); }

h1, h2, h3, h4, h5, h6 { color: var(--ga-fg); font-weight: 800; letter-spacing: -.01em; }

.text16, .text18, .text24, .text30 { color: var(--ga-accent) !important; }

/* ---------------------------------------------------------------------- *
 * Top bar / header
 * ---------------------------------------------------------------------- */

.header, .sticky-header .header {
  background: var(--ga-glass) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ga-border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.menu-right, .user-panel-top { background: transparent !important; }

/* GA brand mark + quick-access chip rail, injected at the left of the header */
.ga-topbar-wrap {
  padding-top: .35rem;
  padding-bottom: .3rem;
  padding-right: 6.5rem;
  border-bottom: 1px solid var(--ga-border);
}

.ga-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: .2rem .1rem;
}

.ga-topbar-left, .ga-topbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.ga-topbar-right { gap: .5rem; }

/* game search is moved into the main menu row by elem-header.php's script */
.ga-hmenu .ga-game-search { width: 190px; }
/* both menu-row search boxes share one exact height */
.ga-hmenu #ga-game-search-input,
.ga-hmenu #ga-menu-filter {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 12.5px !important;
  line-height: normal !important;
  padding-right: .35rem !important;
}
.ga-hmenu #ga-menu-filter { padding-left: .5rem !important; }
.ga-hmenu #ga-game-search-input { padding-left: 1.7rem !important; }
.ga-hmenu .ga-game-search__icon { left: .6rem; }

.ga-beta-notice {
  margin: 0;
  color: var(--ga-fg-faint) !important;
  font-size: 12px;
  white-space: nowrap;
}

.ga-topbar-right .user-dropdown-details,
.ga-topbar-right .profile_details,
.ga-topbar-right .profile_details > ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.ga-topbar-right .profile_details > ul { list-style: none; }
.ga-topbar-right .profile_img img { width: 32px; height: 32px; }

/* pin the account avatar to the top-right corner of the header, above
   everything else in the utility rail */
.ga-topbar-right .user-dropdown-details {
  position: absolute;
  top: .55rem;
  right: 1rem;
  z-index: 5;
}

.ga-topbar-wrap { position: relative; }

/* the profile dropdown panel — Bootstrap's own .dropdown-menu already sets
   display:block/li stacking; the rule above only targets the *trigger*
   wrapper (.profile_details > ul), never .drp-mnu, so this stays a normal
   vertical list */
.drp-mnu {
  min-width: 220px;
  padding: .5rem 0;
}

.drp-mnu li { display: block; width: 100%; }

.drp-mnu li a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  white-space: nowrap;
}

.drp-mnu .user-info {
  padding: .4rem 1rem .6rem;
  border-bottom: 1px solid var(--ga-border);
  margin-bottom: .3rem;
}

.ga-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  color: var(--ga-fg) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.ga-brand:hover { color: var(--ga-fg) !important; }

.ga-brand__logo {
  width: 128px !important;
  height: 35px !important;
  max-width: 128px !important;
  max-height: 35px !important;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  /* the SVG's navy/purple/white fills are fixed, not currentColor — the
     logo was drawn for a light backdrop (navy + purple read against
     white), so give it a permanent light chip regardless of site theme */
  background: #f5f3fb;
  border-radius: var(--ga-radius-sm);
  padding: .3rem .55rem;
  transition: transform .25s var(--ga-spring, ease);
}

.ga-brand:hover .ga-brand__logo { transform: scale(1.04); }

.ga-chip-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

/* live game search, ported from the "new" codebase's search box */
.ga-game-search {
  position: relative;
  width: 220px;
  flex: 0 0 auto;
}

.ga-game-search__icon {
  position: absolute;
  top: 50%;
  left: .9rem;
  transform: translateY(-50%);
  color: var(--ga-fg-faint);
  font-size: 12px;
  pointer-events: none;
  z-index: 1;
}

.ga-game-search input,
#ga-game-search-input {
  width: 100%;
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-pill);
  color: var(--ga-fg);
  font-size: 12.5px;
  /* the generic input[type="text"] rule under "Forms" below sets its own
     padding with !important; matched specificity meant it was winning (even
     with !important added here too) and crushing the left padding down to
     .9rem - collapsing the reserved space for .ga-game-search__icon so the
     icon sat directly on top of the placeholder text. The #id selector adds
     enough specificity to actually win regardless of !important/order. */
  padding: .42rem .9rem .42rem 2.4rem !important;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

.ga-game-search input::placeholder { color: var(--ga-fg-faint); }
.ga-game-search input:focus { border-color: var(--ga-border-hi); background: rgba(167, 139, 250, .1); }

.ga-game-search .ga-search-results {
  width: min(720px, 92vw);
  max-height: 75vh;
  padding: .6rem;
}

.ga-game-search .ga-search-result { padding: .55rem .7rem; }
.ga-game-search .ga-search-result__img { width: 64px; height: 36px; border-radius: 8px; }
.ga-game-search .ga-search-result__name { font-size: 13.5px; }

.ga-search-results div.ga-search-result {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: var(--ga-radius-sm);
  color: var(--ga-fg-muted) !important;
  -webkit-tap-highlight-color: transparent;
}

.ga-search-results div.ga-search-result:hover {
  background: rgba(167, 139, 250, .16) !important;
}

.ga-search-result__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit !important;
  text-decoration: none !important;
}

.ga-search-result__name:hover { color: #fff !important; }

.ga-search-result__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ga-radius-sm);
  color: var(--ga-fg-muted) !important;
  text-decoration: none !important;
}

.ga-search-result__icon:hover {
  background: rgba(167, 139, 250, .25) !important;
  color: #fff !important;
}

.ga-search-result__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ga-glass-soft);
  color: var(--ga-fg-faint);
  font-size: 14px;
}

.ga-search-result__img img {
  width: 100%;
  height: 100%;
  /* Steam capsule art is a wide rectangle - contain (not cover) so the
     whole image shows instead of being cropped/zoomed into a square */
  object-fit: contain;
  display: block;
}

.ga-search-result__name {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ga-game-search { width: 160px; }
}

.ga-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .8rem;
  border-radius: var(--ga-radius-pill);
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  color: var(--ga-fg-muted) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all .18s ease;
}

.ga-chip {
  -webkit-tap-highlight-color: transparent;
}

.ga-chip:hover,
.ga-chip:focus,
.ga-chip:active,
.ga-chip:visited {
  color: #fff !important;
  border-color: var(--ga-border-hi);
  background: rgba(124, 58, 237, .55);
  transform: translateY(-1px);
  outline: none;
}

.ga-chip .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .18);
}

.ga-utility-rail {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.ga-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  color: var(--ga-fg-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all .18s ease;
}

.ga-theme-toggle:hover {
  color: #fff;
  border-color: var(--ga-border-hi);
  background: rgba(167, 139, 250, .16);
}

.ga-lang-switch .dropdown-menu {
  min-width: 150px;
}

.ga-lang-switch .dropdown-menu a.active {
  color: #fff !important;
  background: rgba(167, 139, 250, .16);
}

.ga-banner-btn .btn,
.menu-right .btn-primary,
.menu-right .btn-danger {
  border-radius: var(--ga-radius-pill) !important;
  border: 1px solid var(--ga-border-hi) !important;
  background: var(--ga-gradient) !important;
  padding: .4rem 1rem !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .3) !important;
}

.menu-right .btn a { color: #fff !important; text-decoration: none !important; }

.menu-right .text14 { color: var(--ga-fg-faint) !important; font-size: 12px; }

/* user dropdown */
.profile_img img { border: 2px solid var(--ga-border-hi); }
.user-active { background: var(--ga-teal) !important; }
.user-anon { background: var(--ga-fg-faint) !important; }

.dropdown-menu, .drp-mnu {
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-sm) !important;
  box-shadow: var(--ga-shadow-lift) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.dropdown-menu .user-info .user-name { color: var(--ga-fg) !important; }
.dropdown-menu li a, .drp-mnu li a { color: var(--ga-fg-muted) !important; }
.dropdown-menu li a:hover, .drp-mnu li a:hover {
  background: rgba(167, 139, 250, .14) !important;
  color: #fff !important;
}

/* Bootstrap tooltips (data-toggle="tooltip") - style-liberty-dark.css leaves
   these hardcoded to a white background regardless of theme */
.tooltip-inner {
  background-color: var(--ga-glass-strong) !important;
  color: var(--ga-fg) !important;
  border: 1px solid var(--ga-border-hi) !important;
  box-shadow: var(--ga-shadow-lift);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--ga-border-hi); }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--ga-border-hi); }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--ga-border-hi); }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--ga-border-hi); }

/* per-row "..." actions menu (gb_last_template.php's image column) */
.ga-row-actions-wrap { position: relative; }

.ga-row-actions {
  position: absolute;
  top: -4px;
  right: -4px;
  opacity: 0;
  transition: opacity .15s ease;
}

tr:hover .ga-row-actions, .ga-row-actions:focus-within { opacity: 1; }

.ga-row-actions__toggle {
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-fg) !important;
  border-radius: 50% !important;
  width: 22px;
  height: 22px;
  line-height: 1;
  padding: 0 !important;
  font-weight: 800;
}

.ga-row-actions .dropdown-menu {
  left: 40px !important;
  border: 1px solid #fff !important;
}

.ga-row-actions .dropdown-item {
  color: var(--ga-fg-muted) !important;
  font-size: 12.5px;
  padding: .4rem .8rem;
  white-space: nowrap;
}

.ga-row-actions .dropdown-item:hover {
  background: rgba(167, 139, 250, .14) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------- *
 * Layout — the old fixed left sidebar is gone; elem-sidebar-menu.php now
 * renders a horizontal mega-menu bar (.ga-hmenu) stacked on top of the
 * header bar. Both are fixed; the template's own left-offset rules
 * (written for the 250px/60px sidebar) are neutralised here.
 * ---------------------------------------------------------------------- */

.main-content {
  margin-left: 0 !important;
}

.header.sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  /* must stay above .ga-hmenu (2060) - the game-search results dropdown
     (.ga-search-results) lives inside this header and extends down over the
     .ga-hmenu bar beneath it; when .ga-hmenu was raised above this header's
     old 1035, the hmenu bar started painting over that dropdown instead of
     the other way around, hiding search results behind it. */
  z-index: 2070;
}

.content-top-gap {
  margin-top: 0 !important;
  /* was "- 20px", which tucked the first card under the header once the menu
     moved inline - start just below the measured header/menu stack instead */
  padding-top: calc(var(--ga-stack-height, 148px) + 4px) !important;
  padding-left: .5rem !important;
}

/* ---------------------------------------------------------------------- *
 * Horizontal mega-menu (replaces the old vertical sidebar)
 * ---------------------------------------------------------------------- */

.ga-hmenu {
  position: fixed;
  top: var(--ga-header-height, 60px);
  left: 0;
  right: 0;
  /* must stay above .ga-menu-backdrop (2050) - .ga-mega dropdown panels are
     descendants of this element with no z-index of their own, so they
     inherit whatever stacking context .ga-hmenu establishes here. When the
     backdrop was raised to sit above page widgets like DataTables' Buttons
     toolbar, it ended up sitting above the open mega-menu too, so the
     backdrop (not the menu) caught hover/clicks - Bootstrap's dropdown then
     saw focus/hover "leave" immediately and auto-closed it (the "shows and
     disappears" symptom). */
  z-index: 2060;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  min-height: 42px;
  padding: .2rem 1rem;
  background: var(--ga-glass-strong);
  border-bottom: 1px solid var(--ga-border);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  /* deliberately NOT overflow:auto/hidden here — .ga-mega dropdown panels
     are positioned relative to this element and need to hang below it;
     any overflow other than visible on this box would clip them */
}

.ga-menu-search {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  margin: 0;
}

.ga-menu-search input {
  width: 100%;
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-pill);
  color: var(--ga-fg);
  font-size: 12.5px;
  padding: .4rem .9rem;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}

/* narrow "Search menu..." box (v5) - original height, width 133px -30% */
.ga-menu-search { width: 93px !important; }

.ga-menu-search input::placeholder { color: var(--ga-fg-faint); }
.ga-menu-search input:focus { border-color: var(--ga-border-hi); background: rgba(167, 139, 250, .1); }

.ga-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--ga-glass-strong);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-sm);
  box-shadow: var(--ga-shadow-lift);
  padding: .4rem;
  z-index: 1040;
  white-space: normal;
}

.ga-search-results a {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem .6rem;
  border-radius: var(--ga-radius-sm);
  color: var(--ga-fg-muted) !important;
  font-size: 12.5px;
  text-decoration: none !important;
}

.ga-search-results a .fa { font-size: 10px; color: var(--ga-fg-faint); flex: 0 0 auto; margin-top: .25em; }
.ga-search-results a:hover { background: rgba(167, 139, 250, .16); color: #fff !important; }
.ga-search-results a:hover .fa { color: #fff; }
.ga-search-empty { padding: .5rem .6rem; color: var(--ga-fg-faint); font-size: 12.5px; }

.ga-search-result-heading {
  padding: .5rem .6rem .2rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ga-accent);
}
/* "Search menu..." results - larger text, matching the bigger mega-menu links */
.ga-menu-search .ga-search-results { width: 420px; }
.ga-menu-search .ga-search-results a { font-size: 15.5px; }
.ga-menu-search .ga-search-results a .fa { font-size: 12px; }
.ga-menu-search .ga-search-result-heading { font-size: 13px; }
.ga-menu-search .ga-search-empty { font-size: 14px; }

.ga-search-result-heading:not(:first-child) { margin-top: .3rem; border-top: 1px solid var(--ga-border); padding-top: .5rem; }

.ga-hmenu-list {
  display: flex;
  align-items: center;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ga-hmenu-item { position: static; }

.ga-hmenu-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .85rem;
  border-radius: var(--ga-radius-pill);
  color: var(--ga-fg-muted) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  background: transparent;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.ga-hmenu-link .fa { font-size: 12px; color: var(--ga-accent); opacity: .9; }

.ga-hmenu-link:hover, .ga-hmenu-item.show .ga-hmenu-link {
  color: #fff !important;
  background: rgba(167, 139, 250, .16);
  border-color: var(--ga-border-hi);
}

.ga-menu-backdrop {
  position: fixed;
  inset: 0;
  /* well above any individual page's own widgets - DataTables' Buttons
     extension in particular defaults its column-visibility/export toolbar
     to z-index ~2002+ (by design, so it floats above everything on its own
     page), which was poking through above the old 1025 backdrop on
     data-table-heavy pages like strank_popupcoming - only part of the
     screen was actually blurred/dimmed. */
  z-index: 2050;
  background: rgba(5, 3, 12, .75);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ga-menu-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.ga-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 1.1rem 1.4rem;
  border: none;
  border-top: 1px solid var(--ga-border);
  border-radius: 0 0 var(--ga-radius) var(--ga-radius);
  background: var(--ga-glass-strong) !important;
  box-shadow: var(--ga-shadow-lift) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  column-count: 4;
  column-gap: 1.75rem;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

@media (max-width: 1100px) { .ga-mega { column-count: 3; } }
@media (max-width: 820px) { .ga-mega { column-count: 2; } }
@media (max-width: 560px) { .ga-mega { column-count: 1; left: 0; right: 0; } }

.ga-mega-group {
  break-inside: avoid;
  margin: 0 0 1.1rem;
}

.ga-mega-heading {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: 16px; /* was 12px */
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ga-fg);
  margin-bottom: .35rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ga-border);
}

.ga-mega-heading .fa { color: var(--ga-accent); }

.ga-mega-subhead {
  display: block;
  margin: .5rem 0 .15rem;
  font-size: 12.5px; /* was 10.5px */
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ga-fg-faint);
}

.ga-mega-link {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .3rem .4rem;
  border-radius: var(--ga-radius-sm);
  color: var(--ga-fg-muted) !important;
  font-size: 16.5px; /* was 12.5px */
  line-height: 1.35;
  text-decoration: none !important;
  white-space: normal;
}

.ga-mega-link .fa { font-size: 10px; color: var(--ga-fg-faint); flex: 0 0 auto; margin-top: .25em; }

.ga-mega-link:hover {
  background: rgba(167, 139, 250, .16);
  color: #fff !important;
}

.ga-mega-link:hover .fa { color: #fff; }

@media (max-width: 768px) {
  .ga-menu-search { width: 140px; }
}

/* desktop: elem-header.php moves #ga-hmenu into the header row, right of the
   logo, and adds this class - one bar instead of header + separate menu bar.
   Strips the standalone-bar chrome; the header supplies the background. */
.ga-topbar { align-items: flex-start; }

.ga-hmenu.ga-hmenu--inline {
  position: static;
  z-index: auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin-top: .1rem;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ga-hmenu--inline .ga-hmenu-list { flex-wrap: wrap; }

/* wide screens (>=1000px): logo | searches | menu | old-site + Discord + user
   always on ONE row (header single row v2). Instead of wrapping, the menu
   items shrink with the viewport (font/padding clamp), icons drop below
   1400px, the "Search menu.." box + logo size drop below 1100px. Below
   1000px the hamburger menu takes over (see max-width: 999.98px below and
   the matching innerWidth check in elem-header.php). */
@media (min-width: 1000px) {
  .ga-topbar { flex-wrap: nowrap; align-items: center; }
  .ga-topbar-left, .ga-topbar-right { flex-wrap: nowrap; flex-shrink: 0; }
  .ga-hmenu.ga-hmenu--inline { flex-wrap: nowrap; gap: .45rem; margin-top: 0; }
  .ga-hmenu--inline .ga-hmenu-list { flex-wrap: nowrap; gap: 0; min-width: 0; }
  .ga-hmenu--inline .ga-hmenu-link { padding: .4rem clamp(.25rem, .6vw, .85rem); font-size: clamp(10.5px, .9vw, 13px); gap: .3rem; }
  .ga-hmenu--inline .ga-game-search { width: clamp(100px, 11vw, 190px); flex: 0 1 auto; }
}
/* medium-wide: Discord chip shrinks to its icon to leave room for the menu */
@media (min-width: 1000px) and (max-width: 1499.98px) {
  .ga-topbar-right .ga-chip-discord-label { display: none; }
}
@media (min-width: 1000px) and (max-width: 1399.98px) {
  .ga-hmenu--inline .ga-hmenu-link > .fa, .ga-hmenu--inline .ga-hmenu-link > img { display: none; }
}
@media (min-width: 1000px) and (max-width: 1099.98px) {
  .ga-hmenu--inline .ga-menu-search { display: none; }
  .ga-brand__logo { width: 104px !important; height: auto !important; }
}

/* dropdown panels still span the full header width and hang just below it
   (fixed inside the header = relative to the header, via its backdrop-filter) */
/* !important: Bootstrap's Popper writes inline position/transform/left on an
   opened dropdown, which shifted the panel sideways out of the viewport */
.ga-hmenu--inline .ga-mega {
  position: fixed !important;
  top: var(--ga-header-height, 60px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Mobile nav toggle button - hidden entirely above the collapse breakpoint
   below, so it never affects laptop/desktop (.ga-hmenu stays exactly as it
   was: a horizontal bar with every item visible). */
.ga-hmenu-mobile-toggle {
  display: none;
}

/* Below this width a horizontal strip of ~8 pill links plus dropdowns simply
   doesn't fit - the old fallback (flex-wrap:nowrap + overflow-x:auto) turned
   it into a horizontally-scrolling strip, which meant hunting sideways
   through unlabeled-until-tapped pills to find a section, on top of a
   separate horizontal scroll for the page itself. Replaced with a standard
   mobile pattern: a hamburger button reveals #ga-main-nav as a full-width
   vertical list (see #ga-hmenu-mobile-toggle's click handler in
   elem-sidebar-menu.php); each item's own dropdown-toggle still works
   exactly as before (Bootstrap's dropdown plugin), just restyled below to
   expand its section inline instead of as an absolutely-positioned panel. */
@media (max-width: 999.98px) {
  .ga-menu-search { display: none; }

  .ga-hmenu {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .ga-hmenu-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--ga-radius-sm);
    border: 1px solid var(--ga-border);
    background: var(--ga-glass-soft);
    color: var(--ga-fg);
    font-size: 16px;
  }

  .ga-hmenu-list {
    display: none;
  }

  .ga-hmenu.ga-mobile-nav-open .ga-hmenu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    position: fixed;
    top: var(--ga-stack-height, 100px);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--ga-stack-height, 100px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ga-glass-strong);
    border-bottom: 1px solid var(--ga-border);
    padding: .5rem;
    margin: 0;
    z-index: 2060; /* above .ga-menu-backdrop's 2050 - it needs to stay visible/tappable above the now-stronger backdrop */
  }

  .ga-hmenu.ga-mobile-nav-open .ga-hmenu-link {
    width: 100%;
    justify-content: flex-start;
    font-size: 19px;
    padding: .7rem .85rem;
  }

  /* the mega-panel's own type scale (12/12.5/10.5px) was tuned for a compact
     desktop dropdown - bump it up now that it's the actual mobile menu text */
  .ga-hmenu.ga-mobile-nav-open .ga-mega-heading { font-size: 16px; }
  .ga-hmenu.ga-mobile-nav-open .ga-mega-subhead { font-size: 13px; }
  .ga-hmenu.ga-mobile-nav-open .ga-mega-link { font-size: 17px; padding: .5rem .4rem; }

  /* belt-and-braces for the list's own overflow-y:auto (declared above) -
     iOS Safari in particular can refuse to scroll a fixed-position element
     if the body behind it is still scrollable, since a touch there can get
     interpreted as scrolling the body instead of this panel. Toggled via JS
     (see elem-sidebar-menu.php) rather than :has() for broader support. */
  body.ga-mobile-nav-locked {
    overflow: hidden;
  }

  /* each section's mega-panel, inline instead of an absolutely-positioned
     overlay - there's no room to hang a 4-column panel off a pill in a
     280px-wide vertical list */
  .ga-hmenu.ga-mobile-nav-open .ga-mega {
    /* Bootstrap's dropdown plugin positions .dropdown-menu via Popper.js,
       which sets its own inline position/transform on the element - an
       inline style beats a plain (non-!important) rule here regardless of
       source order, so both need !important to actually win and keep the
       panel inline in the vertical list instead of floating near the toggle. */
    position: static !important;
    transform: none !important;
    inset: auto !important;
    display: block !important;
    column-count: 1;
    max-height: none;
    padding: .3rem .5rem .6rem 1.5rem;
    margin: 0;
    border: none;
    border-top: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Bootstrap's dropdown plugin toggles .show and sets display via its own
     JS/CSS; since panels are no longer absolutely positioned here there's
     nothing to visually hide until opened, so hide by the .show class
     ourselves instead. */
  .ga-hmenu.ga-mobile-nav-open .ga-mega:not(.show) {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------- *
 * bootstrap-select "filters" widgets (combobox/search panels used across
 * the report pages). Their own bootstrap-select.css is linked inline,
 * late in the page, so every rule here needs !important to win regardless
 * of load order.
 * ---------------------------------------------------------------------- */

.bootstrap-select .dropdown-toggle,
.bootstrap-select > .btn,
.bootstrap-select .btn-light,
.bootstrap-select .btn-default {
  background: var(--ga-glass-soft) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-fg) !important;
  border-radius: var(--ga-radius-sm) !important;
  box-shadow: none !important;
  padding: .6rem 1rem !important;
}

.bootstrap-select .dropdown-toggle:hover,
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select.open .dropdown-toggle {
  border-color: var(--ga-border-hi) !important;
  background: rgba(167, 139, 250, .14) !important;
  color: #fff !important;
}

/* bootstrap's stock .btn-light:focus box-shadow is a light gray/white glow -
   renders as a stark white ring against this dark theme; and on keyboard
   focus specifically (:focus-visible, not plain :focus/click) Chrome/Firefox
   also draw their own native focus ring on top regardless of box-shadow,
   which is the actual white ring reported here. Replace both with the same
   violet glow used on .form-control:focus. */
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle.focus,
.bootstrap-select .dropdown-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .16) !important;
}

.bootstrap-select .dropdown-toggle .filter-option,
.bootstrap-select .dropdown-toggle .filter-option-inner-inner,
.bootstrap-select .dropdown-toggle .caret {
  color: inherit !important;
}

.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu.inner {
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-sm) !important;
  box-shadow: var(--ga-shadow-lift) !important;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .no-results {
  color: var(--ga-fg-muted) !important;
  background: transparent !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
  background: rgba(167, 139, 250, .22) !important;
  color: #fff !important;
}

.bootstrap-select .bs-searchbox {
  padding: 4px 2px !important;
}

.bootstrap-select .bs-searchbox .form-control,
.bootstrap-select .bs-searchbox input {
  background: var(--ga-glass-soft) !important;
  color: var(--ga-fg) !important;
  border: 1px solid var(--ga-border) !important;
  width: 100% !important;
  box-sizing: border-box;
}

.bs-searchbox, .bs-actionsbox, .bs-donebutton, .bs-caret {
  background: transparent !important;
}

/* mirrored scrollbar above wide tables, synced with .table-responsive's own
   bottom scrollbar via assets/js/scripts.js - see ga_add_top_scrollbars() */
.ga-table-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  /* tight - was .6rem each, left a big empty band above the table buttons */
  margin-top: .2rem;
  margin-bottom: .15rem;
}
.ga-table-top-scroll > div {
  height: 1px;
}

.bootstrap-select .glyphicon, .bootstrap-select .bs-caret .caret {
  color: var(--ga-fg-muted) !important;
}

/* bootstrap-select copies the original <select class="... form-control">'s
   form-control class onto its own generated wrapper div, so the generic
   .form-control rule below (border/background/padding) was landing on BOTH
   that wrapper AND the inner .dropdown-toggle button it wraps - a border
   drawn around a border, one step in from the wrapper's own. Strip the
   wrapper's own styling; the toggle button already renders the widget. */
.bootstrap-select.form-control {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* filter-panel labels + reset buttons sit inside plain <p>/<div>, force contrast */
#filters label { color: var(--ga-fg-muted) !important; font-size: 12px; }
/* group titles ("Select genre", etc.) match the Stock exchange / Country headings */
#filters p { color: var(--ga-fg) !important; font-weight: bold !important; font-size: .82rem !important; margin-bottom: .3rem !important; }
#filters .form-control { background: var(--ga-glass-soft) !important; color: var(--ga-fg) !important; }

/* compact mode: smaller type + tighter padding throughout the filter panel */
#filters .bootstrap-select .dropdown-toggle {
  padding: .4rem .7rem !important;
  font-size: 12.5px !important;
}
#filters .btn { padding: .35rem .7rem; font-size: 12px; }
#filters .dropdown-menu li a, #filters .dropdown-menu .dropdown-item { font-size: 12.5px; }
#filters input[type="date"] { font-size: 12px; padding: .35rem .6rem !important; }

/* Each filter card has an inline style="padding:0!important" - inline
   !important beats any external !important regardless of specificity, so
   padding can't be added to the card itself. Pad the children instead:
   the label wrapper (first child div) and the select+reset row (.row). */
#filters .card.card_border > div:first-child {
  padding: .45rem .65rem 0 !important;
}

#filters .card.card_border > .row,
#filters .card.card_border > div > .row {
  padding: 0 .65rem .45rem !important;
  margin: 0 !important;
}

/* the two radio-button filters (Stock exchange, Country) use a plain flex
   div instead of class_gui.php's .row, but need the exact same padding so
   their card frame lines up with every other filter card. */
#filters .card.card_border > .ga-filter-radio-group {
  padding: 0 .65rem .45rem !important;
}

/* class_gui.php hardcodes margin-left:13px inline on both the select column
   and the Reset column - that extra, uncompensated margin on top of the
   row's own padding breaks the grid's width math and makes the toggle
   button/border look shifted/misaligned inside the card. */
#filters .card.card_border > .row > [class*="col-"],
#filters .card.card_border > div > .row > [class*="col-"] {
  margin-left: 0 !important;
}

/* without a gap, adjacent filter cards' rounded borders touch directly and
   read as one broken/merged frame instead of separate cards. Width/box-sizing
   forced explicitly too - the bootstrap-select widget inside resizes its own
   wrapper on init/refresh, which was making each card a slightly different
   width instead of all sharing #filters' full width. */
#filters > .card.card_border {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 .4rem !important;
}

#filters .bootstrap-select {
  width: 100% !important;
}

/* "filters" toggle: jQuery UI's slide effect isn't loaded on this site, so
   $("#filters").toggle("slide") only ever did an instant show/hide. Replaced
   site-wide with .toggleClass("ga-filters-hidden") for a real sideways
   slide + collapse; #tablemain transitions too so the table smoothly
   reclaims the freed grid space instead of snapping to width. */
/* #filters and its sibling table column are both Bootstrap cols with inline
   padding-left/right:0 (this site zeroes every grid gutter deliberately)
   sitting inside a plain .row, which still carries Bootstrap's default
   margin:0 -15px. With no gutter padding on either column to absorb it, the
   row renders 30px wider than its container (15px bleeding past each edge) -
   cancelling the margin on #filters alone just shifted that overflow onto
   the table column instead of removing it, so it stopped fitting alongside
   the filters. Neutralize it on the row itself so both columns share the
   container's actual width again. */
.row:has(> #filters) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#filters {
  transition: transform .32s ease, opacity .28s ease, max-width .32s ease, flex-basis .32s ease, padding .32s ease;
}

#filters.ga-filters-hidden {
  transform: translateX(-24px);
  opacity: 0;
  max-width: 0 !important;
  /* collapsed panel must not keep its full height either - the flex row
     stretched the table column to it, leaving a tall empty band under the
     table on load */
  max-height: 0 !important;
  flex: 0 0 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

#tablemain {
  transition: max-width .32s ease, flex-basis .32s ease;
}

/* filters column scrolls on its own (filters scroll v1): on desktop, where
   it sits beside the table, it sticks under the fixed header and is capped
   at the viewport height - a long filter list scrolls inside the panel
   instead of dragging the whole page (and the main table) with it.
   overscroll-behavior stops the page from taking over at the panel's ends. */
@media (min-width: 992px) {
  #filters:not(.ga-filters-hidden) {
    position: sticky;
    top: calc(var(--ga-stack-height, 60px) + var(--ga-hero-height, 0px) + 8px);
    align-self: flex-start;
    max-height: calc(100vh - var(--ga-stack-height, 60px) - var(--ga-hero-height, 0px) - 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* no scrollbar-width/scrollbar-color here: in Chrome either one switches
       off the site's ::-webkit-scrollbar styling (plain grey bar instead) */
  }
}

/* DataTables Buttons extension (column visibility, export) — used on ~30
   report pages via its own buttons.dataTables.min.css, hardcoded per-page
   inline <style> blocks for the active/inactive states. Neutralise both. */
.dt-buttons .btn,
.dt-button,
.buttons-columnVisibility,
.buttons-html5,
.buttons-collection,
.buttons-colvis {
  background: var(--ga-glass-soft) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-fg) !important;
  border-radius: var(--ga-radius-sm) !important;
  box-shadow: none !important;
}

.dt-buttons .btn:hover,
.dt-button:hover,
.buttons-columnVisibility:hover {
  border-color: var(--ga-border-hi) !important;
  background: rgba(167, 139, 250, .14) !important;
  color: #fff !important;
}

.dt-buttons .btn.active,
.dt-button.active,
.buttons-columnVisibility.active {
  background: var(--ga-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

div.dt-button-collection .dropdown-item,
div.dt-button-collection a.dt-button {
  color: var(--ga-fg-muted) !important;
  background: transparent !important;
}

div.dt-button-collection .dropdown-item:hover,
div.dt-button-collection a.dt-button:hover {
  background: rgba(167, 139, 250, .18) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------- *
 * Main content / cards
 * ---------------------------------------------------------------------- */

.main-content { background: transparent !important; }

.card, .card_border, .card_H {
  background: var(--ga-glass) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius) !important;
  box-shadow: var(--ga-shadow) !important;
  color: var(--ga-fg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--ga-border) !important;
  padding: .4rem .6rem !important; /* was 1rem 1.3rem - compact v2 */
}

/* style-tt.css squeezes the bootstrap .p-4/.p-2 utilities down to ~0.3rem
   site-wide for density. Fine elsewhere, but many templates nest
   <div class="card card_border p-4"> directly (no .card-body wrapper) for
   the title/description block, so the squeeze applies straight to the
   card and text sits flush against the border. */
.card.p-4, .card_border.p-4, .card.p-2, .card_border.p-2 {
  padding: .35rem .55rem !important; /* was .65rem 1rem - compact v2 */
}

/* page title card (h3 + description + "Updated:" line) - keep it compact.
   .ga-appinfo-hero h1 matches the same rule - appinfo.php's hero title is an
   h1 (see the comment by .ga-appinfo-hero__body h1 above), scoped so this
   doesn't change h1 styling anywhere else on the site. */
.chart-grid__header h3, .ga-appinfo-hero h1 { margin: 0 0 .2rem !important; font-size: 1.25rem !important; }
.chart-grid__header p { margin: 0 0 .15rem !important; line-height: 1.35; }

/* style-tt.css squeezes .p-4/.p-2 down to ~0.3rem site-wide for density —
   reasonable for the old compact table chrome, but it makes the new glass
   cards feel cramped. Give card content some breathing room back. */
.card-body {
  padding: .4rem .55rem !important; /* was 1.1rem 1.3rem - compact v2 */
}

/* "limited data / demo view - subscribe" notice, reused across ~30 pages.
   Was a bare inline background-color on a <p> sitting inside a padded,
   rounded .card.p-4 (padding .65rem 1rem, see above) - the flat color only
   covered the <p>'s own box, leaving the card's padding as a visible dark
   gap all around it instead of one solid rounded banner. The wrapping card's
   padding is zeroed (via :has below) so the red fills the whole card, kept
   compact (single slim line), and trades the flat
   #8b0000 for a softer, translucent red so it reads as a notice rather than
   an error. */
.ga-limited-data-notice {
  display: block;
  margin: 0 !important; /* beats .chart-grid__header p margin */
  padding: .3rem 1rem;
  line-height: 1.3;
  border-radius: var(--ga-radius);
  background: rgba(185, 48, 48, .55) !important;
  color: var(--ga-fg);
}

/* compact button inside the notice so it doesn't set the banner height */
.ga-limited-data-notice .btn {
  padding: .1rem .6rem;
  font-size: 12px;
  line-height: 1.4;
  margin-left: .4rem;
}

/* collapse the wrapping card's padding so the red fills the whole rounded
   card instead of leaving a dark ring around the notice */
.card:has(> .ga-limited-data-notice) {
  padding: 0 !important;
  border-radius: var(--ga-radius);
  overflow: hidden;
}

/* same softer red, no fill/negative-margin - for the couple of spots where
   this notice sits inline inside other content instead of alone in its own
   padded card (google_play.php's chart placeholder, login.php's disabled-
   login notice). */
.ga-notice-red {
  display: block;
  padding: .6rem 1rem;
  border-radius: var(--ga-radius-sm);
  background: rgba(185, 48, 48, .55) !important;
  color: var(--ga-fg);
}

#filters .card.card_border,
#filters .card-body {
  padding: .85rem 1rem !important;
}

/* "filters" show/hide toggle button - same brand gradient as every other button */
.btn.btn-red {
  background: var(--ga-gradient) !important;
  border: 1px solid var(--ga-border-hi) !important;
  color: #fff !important;
}

.btn.btn-red:hover { filter: brightness(1.1); }

.chart-grid__header, .chart-grid__footer { color: var(--ga-fg-muted); }
.chart-grid__footer { font-size: 11px; }

/* ---------------------------------------------------------------------- *
 * Buttons
 * ---------------------------------------------------------------------- */

.btn { border-radius: var(--ga-radius-sm); font-weight: 700; }

.btn-primary {
  background: var(--ga-gradient) !important;
  border: 1px solid var(--ga-border-hi) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .32);
}

.btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); }

.btn-danger {
  background: linear-gradient(135deg, #f43f5e, #d946ef) !important;
  border: none !important;
}

.btn-outline-primary, .btn-outline-secondary {
  color: var(--ga-accent) !important;
  border-color: var(--ga-border-hi) !important;
  background: transparent !important;
}

/* ---------------------------------------------------------------------- *
 * Forms
 * ---------------------------------------------------------------------- */

.form-control, select, input[type="text"], input[type="email"], input[type="password"], textarea {
  background: var(--ga-glass-soft) !important;
  border: 1px solid var(--ga-border) !important;
  color: var(--ga-fg) !important;
  border-radius: var(--ga-radius-sm) !important;
  padding: .55rem .9rem !important;
}

.form-control:focus { border-color: var(--ga-border-hi) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, .16) !important; }

.login-dark form {
  background-color: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius);
  box-shadow: var(--ga-shadow-lift);
}

.login-dark form .btn-primary { background: var(--ga-gradient) !important; }

.login-dark form .forgot {
  color: var(--ga-accent) !important;
  opacity: 1 !important;
  margin-top: .6rem;
  display: block;
}

.login-dark form .forgot:hover { color: var(--ga-accent-2) !important; text-decoration: underline; }

/* ---------------------------------------------------------------------- *
 * Tables / DataTables
 * ---------------------------------------------------------------------- */

.table, table.dataTable {
  color: var(--ga-fg) !important;
  background: transparent !important;
}

/* numeric columns (marked .dt-right site-wide via DataTables columnDefs) -
   Inter's default digits are proportionally spaced, so values in the same
   column don't line up vertically. Switch just the digits to tabular
   (fixed-width) figures - same font, numbers just stop jittering left/right
   row to row. */
table.dataTable td.dt-right, table.dataTable th.dt-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* game/company thumbnails in ranking tables: pop up big on hover.
   table.dataTable rows live inside a .table-responsive wrapper, which needs
   overflow-x:auto to scroll — but that silently forces overflow-y:auto too,
   so an in-place CSS transform:scale() gets clipped top/bottom by the row.
   A JS-driven preview appended straight to <body> escapes that clipping
   entirely (see .ga-img-preview + the hover script in elem-sidebar-menu.php). */
table.dataTable td img,
.table td img {
  cursor: zoom-in;
  border-radius: 4px;
}

.ga-img-preview {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  display: none;
  max-width: 260px;
  max-height: 260px;
  border-radius: var(--ga-radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 2px var(--ga-border-hi);
}

.table thead th, table.dataTable thead th, table.dataTable thead td {
  color: var(--ga-fg-faint) !important;
  border-color: var(--ga-border) !important;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.table td, .table th, table.dataTable tbody th, table.dataTable tbody td {
  border-color: var(--ga-border) !important;
}

/* Row data (game names, company names, etc.) for most ranking tables is
   rendered server-side with its own inline color="" meant for the old
   light/white-ish cell backgrounds — that reads as near-invisible on the
   new dark surface. !important beats a plain (non-important) inline style
   regardless of where it came from, so force these back to readable. */
.table td a, .table th a,
table.dataTable tbody td a, table.dataTable tbody th a {
  color: var(--ga-accent) !important;
}

.table td a:hover, .table th a:hover,
table.dataTable tbody td a:hover, table.dataTable tbody th a:hover {
  color: var(--ga-accent-2) !important;
}

table.dataTable tbody tr { background: transparent !important; }

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
  background-color: rgba(167, 139, 250, .05) !important;
}

/* the .odd stripe rule above and this hover rule have equal specificity;
   without pairing tr.odd:hover explicitly, whichever rule loads later wins
   ties on ALL rows including odd ones - which made hover only visibly work
   on even rows (no competing .odd background to tie against). */
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.hover tbody tr:hover,
table#games_list.dataTable tbody tr:hover {
  background-color: rgba(167, 139, 250, .16) !important;
}

/* style-liberty-dark.css paints the actively-sorted column with a flat,
   fairly light #595959 - fine on that theme's own dark gray backdrop, but a
   harsh, aggressive-looking box against this cockpit theme's near-black
   surface. Tone it down to the same subtle violet tint used for hover/odd
   rows instead. */
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.display tbody tr.odd > .sorting_3 {
  background-color: rgba(167, 139, 250, .07) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  color: var(--ga-fg);
  border-radius: var(--ga-radius-sm);
}

.dataTables_wrapper .dataTables_filter input {
  width: 180px;
  max-width: 100%;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--ga-fg-muted) !important; }

/* style-liberty-dark.css's stock "Processing..." indicator is a full-width
   (width:100%), background-less bar of dark text - built to sit on its
   white gradient (recolored above already), it reads as plain text floating
   over the table rows rather than a contained overlay. Turn it into an
   actual small centered box: override the base rule's sizing/positioning
   (width/height/margin) instead of just its color, and add a border/shadow
   so it visibly sits above the table. */
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  padding: .7rem 1.6rem;
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-sm);
  box-shadow: var(--ga-shadow-lift);
  color: var(--ga-fg) !important;
  font-weight: 600;
  font-size: 1rem;
  z-index: 5;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ga-fg-muted) !important;
  border-radius: var(--ga-radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ga-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

div.dt-button-collection {
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-sm) !important;
}

/* ---------------------------------------------------------------------- *
 * Badges / breadcrumb / pagination / misc
 * ---------------------------------------------------------------------- */

.badge-primary { background: var(--ga-gradient) !important; }
.badge-pill { border-radius: var(--ga-radius-pill) !important; }

.breadcrumb, .my-breadcrumb {
  background: var(--ga-glass-soft) !important;
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-sm) !important;
}

.breadcrumb-item a { color: var(--ga-accent) !important; }
.breadcrumb-item.active { color: var(--ga-fg-muted) !important; }

.page-link {
  background: var(--ga-glass-soft) !important;
  border-color: var(--ga-border) !important;
  color: var(--ga-fg-muted) !important;
}

.page-item.active .page-link {
  background: var(--ga-gradient) !important;
  border-color: transparent !important;
}

.modal-content {
  background: var(--ga-glass-strong) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius) !important;
}

.modal-header, .modal-footer { border-color: var(--ga-border) !important; }

/* the stock bootstrap dim (opacity .5 on a plain black backdrop) reads as
   barely-there against this theme's own dark backgrounds, and the sticky
   header/hmenu bar sat visually "in front of" it - so the whole page behind
   a modal looked untouched. Force a real dim + blur, above both bars.
   Both this and .modal itself need to clear the header (2070)/hmenu (2060)
   stack above - those were raised past Bootstrap's default modal z-index
   (1050) to get .ga-menu-backdrop above page widgets like DataTables'
   Buttons toolbar, which would otherwise leave modals opened while the nav
   is present rendering underneath it. */
.modal {
  z-index: 2090 !important;
}
.modal-backdrop {
  z-index: 2080 !important;
  background-color: rgba(8, 6, 18, .72) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
.modal-backdrop.fade { opacity: 1 !important; }
.modal-backdrop.show { opacity: 1 !important; }

/* move-to-top button */
#movetop {
  background: var(--ga-gradient) !important;
  box-shadow: 0 10px 26px rgba(124, 58, 237, .4) !important;
  border-radius: 50% !important;
}

/* footer */
footer, footer.dashboard {
  background: transparent !important;
  border-top: 1px solid var(--ga-border);
}

/* ---------------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 768px) {
  .ga-chip-rail { display: none; }
}

/* ---------------------------------------------------------------------- *
 * appinfo.php - game detail page
 * ---------------------------------------------------------------------- */

.ga-appinfo-hero__inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.ga-appinfo-hero__img {
  width: 230px;
  max-width: 100%;
  height: auto;
  border-radius: var(--ga-radius-sm);
  border: 1px solid var(--ga-border);
  flex-shrink: 0;
}

.ga-appinfo-hero__body { flex: 1 1 260px; min-width: 0; }
/* hero title is an <h1> for SEO (one clear "this page is about X" signal per
   page) - styled identically to the site's usual .chart-grid__header h3
   treatment below rather than the browser's much larger default h1 size, so
   this is a pure semantics change, not a visual one */
.ga-appinfo-hero__body h1 { word-break: break-word; }

/* shared page-title header (elem-page-hero.php): title + "Updated..." line on
   one row instead of two, with tighter padding so the whole header is shorter.
   Wraps back to two lines only when the row doesn't fit (mobile). */
.ga-page-hero.card { padding-top: .45rem !important; padding-bottom: .45rem !important; }
.ga-page-hero .ga-appinfo-hero__inner { gap: .75rem; flex-wrap: nowrap; }
.ga-page-hero .ga-appinfo-hero__body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .9rem;
  row-gap: .1rem;
}
/* optional right-side block (e.g. limited-data notice) opposite the title */
.ga-page-hero .ga-appinfo-hero__body { flex: 1 1 auto; }
.ga-page-hero__aside {
  flex: 0 1 520px;
  margin-left: auto;
  min-width: 0;
}
.ga-limited-data-notice.ga-limited-data-notice--aside {
  font-size: 11.5px;
  padding: .3rem .75rem;
}
@media (max-width: 900px) {
  /* not enough room beside the title - drop under it, full width */
  .ga-page-hero .ga-appinfo-hero__inner { flex-wrap: wrap; }
  .ga-page-hero__aside { flex-basis: 100%; }
}

.ga-page-hero .ga-appinfo-hero__body h3,
.ga-page-hero .ga-appinfo-hero__body p { margin: 0 !important; }

.ga-appinfo-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .5rem 0 .8rem;
}

.ga-appinfo-hero__chips .ga-chip {
  font-weight: 600;
  font-size: 11px;
  padding: .22rem .55rem;
}

/* quick stat tiles under the hero title */
.ga-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .9rem;
}

.ga-stat-tile {
  flex: 1 1 160px;
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-sm);
  padding: .7rem .9rem;
}

.ga-stat-tile__label {
  color: var(--ga-fg-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ga-stat-tile__value {
  color: var(--ga-fg);
  font-size: .95rem;
  font-weight: 800;
  margin-top: .1rem;
}

/* tab navigation, themed to match the rest of the cockpit chrome */
.nav-tabs {
  border-bottom: 1px solid var(--ga-border) !important;
  gap: .3rem;
  flex-wrap: wrap;
}

.nav-tabs .nav-item { margin-bottom: -1px; }

.nav-tabs .nav-link {
  color: var(--ga-fg-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--ga-radius-sm) var(--ga-radius-sm) 0 0 !important;
  font-weight: 600;
  padding: .55rem 1rem !important;
}

.nav-tabs .nav-link:hover {
  color: var(--ga-fg) !important;
  border-color: var(--ga-border) !important;
}

.nav-tabs .nav-link.active {
  color: var(--ga-fg) !important;
  background: var(--ga-glass-soft) !important;
  border-color: var(--ga-border) !important;
  border-bottom-color: transparent !important;
}

/* appinfo.php - vertical jump-nav sidebar, left of the dashboard */
.ga-appinfo-navcol { padding-left: 0; padding-right: .6rem; }

.ga-vertical-tabs.nav-tabs {
  border-bottom: none !important;
  flex-direction: column;
  gap: .3rem;
  position: sticky;
  /* + pinned page title (--ga-hero-height, 0 when there's none) */
  top: calc(var(--ga-stack-height, 148px) + var(--ga-hero-height, 0px) + 10px);
}

.ga-vertical-tabs.nav-tabs .nav-item { margin-bottom: 0; width: 100%; }

.ga-vertical-tabs.nav-tabs .nav-link {
  border-radius: var(--ga-radius-sm) !important;
  border-left: 2px solid transparent !important;
  width: 100%;
  text-align: left;
}

.ga-vertical-tabs.nav-tabs .nav-link:hover { border-left-color: var(--ga-border-hi) !important; }

.ga-vertical-tabs.nav-tabs .nav-link.active {
  border-left-color: var(--ga-accent) !important;
  border-bottom-color: var(--ga-border) !important;
}

@media (max-width: 991px) {
  .ga-vertical-tabs.nav-tabs { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* Main info / Add. info - key/value grid replacing the old plain <table> */
.ga-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .6rem;
}

.ga-info-tile {
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  border-radius: var(--ga-radius-sm);
  padding: .55rem .8rem;
}

.ga-info-tile__label {
  color: var(--ga-fg-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .15rem;
}

.ga-info-tile__value {
  color: var(--ga-fg);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ga-info-tile .ga-chip {
  font-size: 11px;
  padding: .28rem .6rem;
}

/* bar-chart cards used by drawtable_bar() */
.ga-chart-card canvas { max-width: 100%; }

/* drawpiechart()/drawtable_bar() rendered with $standalone=false - several
   charts sharing one outer .ga-chart-card instead of each getting its own
   bordered box (eg. appinfo.php's Reviews Statistics section) */
.ga-chart-card-inner {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: .5rem;
}
.ga-chart-card-inner .card-body { flex: 1 1 auto; }

/* Bootstrap's .row is flex with align-items:stretch, so a .col-lg-* next to
   a taller sibling already gets stretched to match it - but the .card
   inside only sizes to its own content, leaving the extra stretched column
   height as dead space below a short card instead of the card filling it.
   Make the card itself a column flexbox that fills its stretched column,
   and let the body/chart viewport grow into whatever space that leaves. */
/* flex items default to min-width:auto (their intrinsic content size), which
   lets a wide table/canvas inside force the card past its Bootstrap column's
   actual width instead of respecting it - same class of bug as the pricing
   cards earlier. min-width:0 lets the column win and .table-responsive
   handle any real overflow with its own internal scrollbar instead. */
.ga-chart-card {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ga-chart-card .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* chart canvases render at a height proportional to their row count (eg. 20
   countries vs. 3 subscription types) - fixed to one height so every chart
   card in the grid matches, and tall ones scroll internally instead.
   NOTE: this must stay a fixed height, not flex-grow. Chart.js sizes a
   maintainAspectRatio:false canvas to fill its container via a
   ResizeObserver; making that container's height flow from a flex chain
   whose own size depends on the card's content creates a circular sizing
   dependency - canvas resizes, container recalculates, canvas resizes
   again - an infinite loop that reads as the chart continuously growing/
   sliding down the page (seen live in the Reviews section's pie/bar
   charts, immediately on load, no interaction needed). */
.ga-chart-scroll {
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------- *
 * ga_premium_subscription.php - pricing page
 * ---------------------------------------------------------------------- */

.ga-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.ga-pricing-card {
  background: var(--ga-glass) !important;
  border: 1px solid var(--ga-border) !important;
  border-radius: var(--ga-radius) !important;
  box-shadow: var(--ga-shadow);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  /* grid items default to min-width:auto, which lets their content's
     intrinsic (min-content) width force the 1fr track wider than the
     minmax() ceiling implies - this opts back out so the card can shrink
     to fit narrow/mobile viewports instead of causing horizontal overflow. */
  min-width: 0;
  overflow-wrap: break-word;
}

.ga-pricing-card__title {
  color: var(--ga-accent) !important;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: .5rem;
}

.ga-pricing-card__desc { color: var(--ga-fg-muted); margin-bottom: 1.1rem; }

.ga-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  flex: 1;
}

.ga-pricing-card__features li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .75rem;
  color: var(--ga-fg);
  line-height: 1.45;
}

.ga-pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ga-teal);
  font-weight: 800;
}

.ga-pricing-card__cta { align-self: flex-start; text-decoration: none !important; }

.ga-pricing-steps li { color: var(--ga-fg); margin-bottom: .6rem; line-height: 1.5; }

/* dashboard section headings, replacing the old inline font-size:250% <p> tags */
.ga-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ga-fg);
  margin: 0 0 .8rem;
  padding-top: .4rem;
}

/* the jump-nav anchors (#rev_stats etc.) target this div, not the <h4> inside
   it - scroll-margin-top has to sit here so the sticky header doesn't cover
   the section's top when the browser scrolls to it. */
.ga-dashboard-section { scroll-margin-top: calc(var(--ga-stack-height, 148px) + var(--ga-hero-height, 0px) + 10px); }

.ga-dashboard-section + .ga-dashboard-section { border-top: 1px solid var(--ga-border); margin-top: .6rem; padding-top: .6rem; }

/* compact mode for Reviews/Owners/Wishlist/Followers/Chart Histories - these
   sections ran much taller than the hero/estimates content above them */
.ga-dashboard-section .ga-section-title { font-size: .78rem; font-weight: 700; color: var(--ga-fg-muted); margin-bottom: .4rem; padding-top: 0; }
.ga-dashboard-section .ga-chart-scroll { height: 160px !important; }
/* pie charts (drawpiechart()) put their legend beside the slices, up to 10
   rows tall - the compact 160px above (tuned for legend-less bar charts)
   cuts most of that legend off with a scrollbar instead of showing it. */
.ga-dashboard-section .ga-chart-scroll.ga-chart-scroll--pie { height: 240px !important; } /* was 320px - smaller charts v1 */
.ga-dashboard-section .ga-chart-card-inner,
.ga-dashboard-section .ga-chart-card .card-body { padding: .35rem !important; }
.ga-dashboard-section .card.p-4 { padding: .6rem !important; }
/* card-header.chart-grid__header intentionally left at its default (unscoped)
   size here - this used to shrink it to .78rem, which is exactly why
   sections inside .ga-dashboard-section had smaller titles than the rest of
   the page (eg. "Recent Trailers & Gameplay Videos", outside this scope) */
.ga-dashboard-section .text18 { font-size: 13px !important; }

/* explore_games.php - body text default (var(--ga-fg)) reads as stark white
   against the dark surface at this row density; tone it down to muted/normal
   weight so numbers and names don't compete with headings for attention. */
#games_list.dataTable tbody td { color: var(--ga-fg-muted) !important; font-weight: 400; }
#games_list.dataTable tbody td a { font-weight: 600; }

/* trial period watermark (include/ga_trial_config.php "watermark") - faint
   large text centred behind the header bar; absolutely positioned so it never
   changes the single-row header layout, and click-through (ga-trial wm v1) */
.ga-trial-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-size: clamp(18px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ga-accent);
  opacity: .18;
}
#ga_header > .menu-right { position: relative; z-index: 1; }

/* =========================================================================
   "Slate" theme - data-theme="slate" on <html> (ga-theme-slate v1)
   Flat slate-blue surfaces instead of the glass/purple cockpit look:
   solid #0d0f19 page / #151827 cards, lavender #aeabff primary, orange
   #fd6c39 call-to-action, uppercase 500-weight buttons with 8px corners
   (font stays the site's Inter), 12px gap between all cards. Picked from the theme switch in
   the user menu (elem-header.php), stored in localStorage "ga_theme".
   ========================================================================= */
:root[data-theme="slate"] {
  --primary: #aeabff;
  --secondary: #fd6c39;
  --success: #87efa8;
  --danger: #f72347;
  --light: #151827;
  --dark: #ffffff;
  --light-bg-color: #151827;
  --card-shadow: 0 1.6px 5px rgba(0, 0, 0, .12);

  --ga-bg: #0d0f19;
  --ga-bg-alt: #151827;
  --ga-fg: rgba(255, 255, 255, .87);
  --ga-fg-muted: rgba(255, 255, 255, .6);
  --ga-fg-faint: rgba(255, 255, 255, .38);
  --ga-accent: #aeabff;
  --ga-accent-2: #fd6c39;
  --ga-teal: #87efa8;
  --ga-glass: #151827;
  --ga-glass-strong: #151827;
  --ga-glass-soft: #1f2235;
  --ga-border: #1f2235;
  --ga-border-hi: #3b3f5c;
  --ga-radius: 8px;
  --ga-radius-sm: 8px;
  --ga-radius-pill: 8px;
  --ga-gradient: #aeabff;
  --ga-shadow: 0 1.6px 5px rgba(0, 0, 0, .12);
  --ga-shadow-lift: 0 4px 16px rgba(0, 0, 0, .28);
  --ga-slate-02: #1f2235;
  --ga-slate-03: #2a2d44;
  --ga-slate-cta: #fd6c39;
}

/* flat surfaces - no glass blur */
:root[data-theme="slate"] body { background: var(--ga-bg) !important; }
:root[data-theme="slate"] .card,
:root[data-theme="slate"] .card_border,
:root[data-theme="slate"] .card_H,
:root[data-theme="slate"] .header,
:root[data-theme="slate"] .ga-hmenu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* space between all cards: 12px below each card, 12px between columns
   (6px each side - templates set padding:0 inline on their columns, hence
   !important); the row's own negative margins are neutralised to match */
:root[data-theme="slate"] .card,
:root[data-theme="slate"] .card_border,
:root[data-theme="slate"] .card_H {
  margin-bottom: 12px !important;
}
:root[data-theme="slate"] .content-top-gap .row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}
:root[data-theme="slate"] .content-top-gap .row > [class*="col-"],
:root[data-theme="slate"] .content-top-gap .row > .col {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
/* cards nested in a card's own body keep their tighter layout */
:root[data-theme="slate"] .card .card { margin-bottom: 8px !important; }

/* buttons: uppercase, medium weight, a bit more rounded (8px) */
:root[data-theme="slate"] .btn {
  border-radius: 8px !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
}
:root[data-theme="slate"] .btn-primary,
:root[data-theme="slate"] .login-dark form .btn-primary {
  background: #aeabff !important;
  border: 1.6px solid #aeabff !important;
  color: rgba(0, 0, 0, .87) !important;
  box-shadow: none !important;
}
:root[data-theme="slate"] .btn-primary:hover,
:root[data-theme="slate"] .btn-primary:focus { background: #c4c2ff !important; border-color: #c4c2ff !important; filter: none; }
/* call-to-action (Subscribe, filters toggle) */
:root[data-theme="slate"] .btn.btn-red {
  background: var(--ga-slate-cta) !important;
  border: 1.6px solid var(--ga-slate-cta) !important;
  color: rgba(0, 0, 0, .87) !important;
}
:root[data-theme="slate"] .btn.btn-red:hover { filter: brightness(1.08); }
:root[data-theme="slate"] .btn-outline-primary,
:root[data-theme="slate"] .btn-outline-secondary,
:root[data-theme="slate"] .btn-dark {
  background: transparent !important;
  border: 1.6px solid #aeabff !important;
  color: #aeabff !important;
}
:root[data-theme="slate"] .btn-outline-primary:hover,
:root[data-theme="slate"] .btn-outline-secondary:hover,
:root[data-theme="slate"] .btn-dark:hover,
:root[data-theme="slate"] .btn-outline-primary.active { background: rgba(174, 171, 255, .12) !important; }
:root[data-theme="slate"] .btn-danger { background: var(--danger) !important; }
:root[data-theme="slate"] .ga-chip { border-radius: 8px; background: var(--ga-slate-02); border-color: var(--ga-slate-02); }
:root[data-theme="slate"] .ga-hmenu-link { border-radius: 8px; font-weight: 500; }
:root[data-theme="slate"] .ga-hmenu-link:hover,
:root[data-theme="slate"] .ga-hmenu-item.show .ga-hmenu-link { background: var(--ga-slate-02); }

/* tables */
:root[data-theme="slate"] table.dataTable thead th { background: var(--ga-slate-02) !important; }
:root[data-theme="slate"] ::selection { background: rgba(174, 171, 255, .35); }
:root[data-theme="slate"] ::-webkit-scrollbar-thumb { background: var(--ga-border-hi); }
:root[data-theme="slate"] .dt-button, :root[data-theme="slate"] .paginate_button { border-radius: 8px !important; }
.ga-theme-switch a.active { color: var(--ga-accent) !important; font-weight: 700; }
/* DataTables toolbar (Choose custom columns / Main information / Copy / CSV
   / Excel ...) - compact in this theme: 16px uppercase was ~39px tall */
:root[data-theme="slate"] .dt-buttons .btn,
:root[data-theme="slate"] .dt-buttons .dt-button {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  padding: 4px 10px !important;
  letter-spacing: .04em;
}
/* filters show/hide toggle shares .btn-red with Subscribe, but isn't a
   call-to-action - lavender primary instead of orange in this theme */
:root[data-theme="slate"] #bfilterslide.btn-red,
:root[data-theme="slate"] #bfilterslidebanner.btn-red,
:root[data-theme="slate"] #bfilterslidefilters.btn-red,
:root[data-theme="slate"] #gafilterslidebanner.btn-red {
  background: #aeabff !important;
  border-color: #aeabff !important;
  color: rgba(0, 0, 0, .87) !important;
}

/* light theme (Theme 3 in the user menu): style-liberty-dark.css hardcodes
   white on a few generic elements - bold text (page titles are <h3><b>) and
   form labels ("Filter results:") - which vanished on the light cards */
:root[data-theme="light"] b,
:root[data-theme="light"] strong { color: inherit; }
:root[data-theme="light"] label,
:root[data-theme="light"] .dataTables_filter label,
:root[data-theme="light"] .dataTables_length label,
:root[data-theme="light"] .dataTables_info { color: var(--ga-fg-muted); }
/* the rest of style-liberty-dark.css's hardcoded white/near-white text on
   generic elements - readable only on the dark themes */
:root[data-theme="light"] p,
:root[data-theme="light"] .para__style,
:root[data-theme="light"] caption,
:root[data-theme="light"] .table,
:root[data-theme="light"] pre,
:root[data-theme="light"] .form-control-plaintext,
:root[data-theme="light"] .dropdown-menu,
:root[data-theme="light"] .dropdown-item,
:root[data-theme="light"] .dropdown-item-text,
:root[data-theme="light"] ul.dropdown-menu.drp-mnu li a,
:root[data-theme="light"] h5.user-name,
:root[data-theme="light"] .popover-body,
:root[data-theme="light"] .content-details h3,
:root[data-theme="light"] .content-details p,
:root[data-theme="light"] .nav-tabs .nav-link.active,
:root[data-theme="light"] .nav-tabs .nav-item.show .nav-link,
:root[data-theme="light"] .dataTables_wrapper .dataTables_length,
:root[data-theme="light"] .dataTables_wrapper .dataTables_filter,
:root[data-theme="light"] .dataTables_wrapper .dataTables_info,
:root[data-theme="light"] .dataTables_wrapper .dataTables_processing,
:root[data-theme="light"] .dataTables_wrapper .dataTables_paginate {
  color: var(--ga-fg);
}
:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .blockquote-footer,
:root[data-theme="light"] .figure-caption,
:root[data-theme="light"] .breadcrumb-item.active,
:root[data-theme="light"] .page-item.disabled .page-link,
:root[data-theme="light"] .dropdown-header,
:root[data-theme="light"] .toast-header,
:root[data-theme="light"] .nav-link.disabled,
:root[data-theme="light"] .chart-grid__header,
:root[data-theme="light"] .chart-grid__footer,
:root[data-theme="light"] .statistics-grid .fa,
:root[data-theme="light"] .statistics-grid .lnr,
:root[data-theme="light"] .card__grid1 span.fa {
  color: var(--ga-fg-muted) !important; /* .text-muted is !important in liberty-dark */
}

/* Firefox has no ::-webkit-scrollbar - same thumb/track colours via the
   standard properties, only where the webkit pseudo isn't supported (setting
   scrollbar-color in Chrome would override the styled webkit bars) */
@supports not selector(::-webkit-scrollbar) {
  :root[data-theme="slate"], :root[data-theme="slate"] * { scrollbar-color: var(--ga-border-hi) var(--ga-bg); }
}

/* page title row (elem-page-hero.php) glued under the fixed menu while the
   page scrolls (hero sticky v1). Desktop only - on phones the menu already
   takes two bars and a sticky title would eat too much of the screen.
   Opaque page-colour band (incl. the small gap above) so content scrolling
   underneath doesn't show through the semi-transparent card; z-index under
   the header/menu (2060+) and its dropdowns, above page content. The row's
   own bottom margin becomes padding so the band covers it too; --ga-hero-
   height (set by elem-header.php) moves the sticky filters panel below. */
@media (min-width: 1000px) {
  .ga-page-hero-row {
    position: sticky;
    top: var(--ga-stack-height, 60px);
    z-index: 1030;
    background: var(--ga-bg);
    box-shadow: 0 -8px 0 var(--ga-bg);
    padding-bottom: 8px;
  }
  /* minimal gap under the menu (4px, same scrolled or not): pull the row up
     by the content area's own extra 4px and drop the wrapper's top padding */
  .ga-page-hero-row { margin-top: -4px; }
  .ga-page-hero-row .card-header.chart-grid__header { padding-top: 0 !important; }
  .ga-page-hero-row > [class*="col-"] { margin-bottom: 0 !important; }
  .ga-page-hero-row .card { margin-bottom: 0 !important; }
}

/* full page view for chart cards (assets/js/ga-chart-fullpage.js) - the
   card is moved to <body> while open, so plain position:fixed works */
.ga-chart-fp-btn {
  float: right;
  margin-left: .5rem;
  padding: .15rem .45rem;
  line-height: 1.1;
  font-size: 14px;
  font-weight: 700;
  color: var(--ga-fg-muted);
  background: var(--ga-glass-soft);
  border: 1px solid var(--ga-border);
  border-radius: 6px;
  cursor: pointer;
}
.ga-chart-fp-btn:hover { color: var(--ga-fg); border-color: var(--ga-border-hi); }
.ga-chart-fullpage {
  position: fixed !important;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  z-index: 2100; /* above the fixed header (2070) */
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  overflow: auto;
  background: var(--ga-bg-alt) !important;
  border: 1px solid var(--ga-border-hi) !important;
  border-radius: var(--ga-radius) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ga-chart-fullpage .ga-chart-fp-btn { font-size: 16px; }
.ga-chart-fullpage .ga-chart-scroll { height: auto !important; overflow: visible !important; }
/* chart area fills the window; a chart naturally taller than that (long bar
   lists) keeps its own height and the overlay scrolls */
.ga-chart-fullpage [data-ga-chart-host] { height: max(var(--ga-host-h, 300px), calc(100vh - 150px)) !important; }
body.ga-chart-fullpage-open { overflow: hidden; }

/* appinfo.php hero (appinfo hero grid v1): image fills a rectangle on the
   left spanning the name/buttons row and the developer/publisher/release
   tiles; genres and tags run the whole width underneath */
.ga-appinfo-hero__inner.ga-appinfo-hero--grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "img  head"
    "img  meta"
    "wide wide";
  gap: .6rem .9rem;
  align-items: stretch;
}
.ga-appinfo-hero--grid .ga-hero-img-cell {
  grid-area: img;
  min-height: 110px;
  overflow: hidden;
  border-radius: var(--ga-radius-sm);
  border: 1px solid var(--ga-border);
}
.ga-appinfo-hero--grid .ga-hero-img-cell .ga-appinfo-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}
.ga-appinfo-hero--grid .ga-hero-head { grid-area: head; min-width: 0; }
.ga-appinfo-hero--grid .ga-hero-head h1 { margin-bottom: .4rem !important; }
.ga-appinfo-hero--grid .ga-hero-meta {
  grid-area: meta;
  margin: 0;
  /* developer / publisher / release date always side by side in one row
     (equal shares, long names wrap inside their tile) - never stacked */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-content: end;
}
.ga-appinfo-hero--grid .ga-hero-meta .ga-info-tile__value { overflow-wrap: anywhere; }
.ga-appinfo-hero--grid .ga-hero-wide { grid-area: wide; display: grid; gap: .6rem; }
@media (max-width: 767.98px) {
  .ga-appinfo-hero__inner.ga-appinfo-hero--grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "img" "head" "meta" "wide";
  }
  .ga-appinfo-hero--grid .ga-hero-img-cell { aspect-ratio: 460 / 215; min-height: 0; }
}