/* ============================================================
   Game Browser — provider sidebar + compact game grid
   Used ONLY by the game-browsing section of index.php and
   user/games.php. All selectors are namespaced under the
   .game-browser component so nothing outside these two pages
   is affected. Matches the project's dark/gold token theme.
   ============================================================ */

.game-browser {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* ---------- Left provider sidebar ---------- */
.game-provider-sidebar {
  flex: 0 0 112px;
  width: 112px;
  position: sticky;
  top: 68px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 5px;
  z-index: 30;
  scrollbar-width: thin;
}
@media (min-width: 992px) {
  .game-provider-sidebar { flex: 0 0 128px; width: 128px; padding: 8px 6px; }
}

.gps-list { display: flex; flex-direction: column; gap: 3px; }

/* Provider item: two-line row — [ico] [name
                                         count] */
.game-provider-item {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 5px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-provider-item:hover { color: var(--text); background: rgba(255,255,255,.06); }
.game-provider-item.active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(255,213,74,.16), rgba(255,143,0,.07));
  border-color: rgba(255,213,74,.42);
  font-weight: 700;
}

.gpi-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  font-size: .56rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  overflow: hidden;
}
@media (min-width: 992px) {
  .gpi-ico { width: 30px; height: 30px; flex-basis: 30px; font-size: .62rem; border-radius: 8px; }
}
.game-provider-item.active .gpi-ico {
  color: #241a02;
  background: var(--grad-gold);
  border-color: transparent;
}

.gpi-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gpi-name {
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gpi-count {
  font-size: .52rem;
  opacity: .8;
  line-height: 1.2;
}

/* ---------- Right game area ---------- */
.game-browser-content { flex: 1; min-width: 0; }
.game-browser-board { min-height: 160px; }

.gb-loading {
  min-height: 200px;
  display: grid;
  place-items: center;
}

/* Provider view heading */
.gb-provider-view { min-height: 80px; }

/* ---------- Compact game grid ---------- */
/* Default: 3 columns (mobile-first — covers 320–767px exactly as required). */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
/* Narrow mobile (< 576px): tighter gap for maximum use of space */
@media (max-width: 575px) {
  .game-grid { gap: 6px; }
}
/* Tablet+ (768px): auto-fill cards ~128px — allows 4-5 cols as width permits */
@media (min-width: 768px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}
/* Desktop (1200px): slightly larger cards */
@media (min-width: 1200px) {
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

/* Bootstrap .col wrappers inside the CSS grid become plain blocks */
.game-grid > .col { padding: 0; width: 100%; }

/* Compact card styling scoped to the game browser */
.game-browser .game-card { --radius: 0; display: flex; flex-direction: column; border: 0; background: none; }
.game-browser .game-card img {
  aspect-ratio: 3/4;
  border: 0;
  background: none;
}
.game-browser .game-card .gc-cover {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  border: 0;
  background: none;
  overflow: hidden;
}
.game-browser .game-card .gc-provider {
  position: static !important;
  order: 1;
  margin: 4px 2px 0;
  padding: 0 !important;
  font-size: .6rem;
  line-height: 1.2;
  color: var(--text-dim);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-browser .game-card .gc-title {
  order: 2;
  position: static;
  margin: 2px 2px 0;
  min-height: 2.4em;
  font-weight: 600;
  font-size: .68rem;
  line-height: 1.2;
  color: var(--text);
  text-shadow: none;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.game-browser .game-card .gc-overlay {
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  bottom: calc(2.352rem + 6px);
}
.game-browser .game-card .gc-overlay .btn {
  padding: .12rem .5rem;
  font-size: .68rem;
  line-height: 1.3;
  border-radius: 8px;
}
.game-browser .game-card .gc-cover i { font-size: 1.4rem; }

/* Prompt6 — premium shine sweep across each thumbnail.
   Pure CSS: one ::after light beam per thumbnail, GPU transform-driven,
   clipped by the rounded .gc-cover (overflow:hidden). No JS, no extra DOM,
   no image animation. */
.game-browser .game-card .gc-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.13) 42%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.13) 58%, transparent);
  transform: translateX(-170%) skewX(-16deg);
  will-change: transform;
  animation: gb-shine 3.4s ease-in-out infinite;
}
@keyframes gb-shine {
  0%        { transform: translateX(-170%) skewX(-16deg); }
  58%, 100% { transform: translateX(340%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .game-browser .game-card .gc-cover::after {
    animation: none;
    display: none;
  }
}

/* Keep the compact grids tight on the mobile lobby too */
.game-browser .mob-cat-item.active { border-color: rgba(255,213,74,.55); }