/* Eldritch Clockwork — Games Page
   build: 2025-09-23
   Styles for ga-* markup used by 003-games.xjs
-------------------------------------------------- */

/* Helpers */
.hidden { display: none !important; }

/* Scope anchors */
#ec-games.ec-games,
#popular-games-panel.ec-games { margin-top: 6px; }

/* Category strip */
#ec-games .ga-cats-box { margin:8px 0 10px; }
#ec-games .ga-cats { display:flex; flex-wrap:wrap; gap:8px; }

/* Category chip + “Load more” */
#ec-games .ga-cat {
  -webkit-appearance:none; appearance:none;
  background:#2b3238; color:#e6e6e6; border:1px solid #3b424a;
  border-radius:6px; padding:6px 10px; font-size: 0.75rem; line-height:1.1; cursor:pointer;
}
#ec-games .ga-cat:hover,
#ec-games .ga-cat:focus { background:#343b42; border-color:#48505a; color:#fff; outline:none; }
#ec-games .ga-cat.is-active { background:#3b424a; border-color:#596270; color:#fff; }
#ec-games .ga-actions { text-align:right; margin-top:10px; }

/* Grid & cards */
#ec-games .ga-grid,
#popular-games-panel .ga-grid {
  display:grid; gap:10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px) {
  #ec-games .ga-grid,
  #popular-games-panel .ga-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  #ec-games .ga-grid,
  #popular-games-panel .ga-grid { grid-template-columns: 1fr; }
}
#popular-games-panel .ga-grid { grid-template-columns: 1fr; }

#ec-games .ga-card,
#popular-games-panel .ga-card {
  display:flex; align-items:flex-start; cursor:pointer;
  background: var(--panel2, #242424);
  border: 1px solid var(--line, #2c2c2c);
  border-radius: 10px; padding: 10px; overflow:hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#ec-games .ga-card:hover,
#popular-games-panel .ga-card:hover {
  border-color:#3a4148; box-shadow:0 2px 10px rgba(0,0,0,.25);
}

#ec-games .ga-thumb,
#popular-games-panel .ga-thumb {
  width:92px; height:64px; flex:0 0 auto; margin-right:8px;
  background:#0a0a0a; border:1px solid var(--line,#2c2c2c); border-radius:6px; overflow:hidden;
}
#ec-games .ga-thumb img,
#popular-games-panel .ga-thumb img {
  width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(100%); opacity:.85;
}

#ec-games .ga-meta,
#popular-games-panel .ga-meta { min-width:0; }

#ec-games .ga-title,
#popular-games-panel .ga-title {
  margin:0 0 2px; font-weight:700; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#ec-games .ga-sublabel,
#popular-games-panel .ga-sublabel { font-size: 0.75rem; opacity:.8; margin:0 0 6px; }

/* NEW: ratings */
#ec-games .ga-rating,
#popular-games-panel .ga-rating{
  font-size: 0.75rem; line-height:1.1; opacity:.95; margin:0 0 6px;
  white-space:nowrap; font-variant-numeric: tabular-nums;
}

#ec-games .ga-plays,
#popular-games-panel .ga-plays { font-size: 0.75rem; opacity:.9; }

#ec-games .ga-empty,
#popular-games-panel .ga-empty { opacity:.8; font-size:.95em; padding:8px 2px; }

/* “Pill row” tint */
#ec-games.ec-games .ga-card,
#popular-games-panel.ec-games .ga-card {
  background: var(--ec-row-bg, rgba(255,255,255,.06));
  border-color: var(--ec-row-bdr, rgba(255,255,255,.12));
}
#ec-games.ec-games .ga-card:hover,
#popular-games-panel.ec-games .ga-card:hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#ec-games.ec-games .ga-thumb,
#popular-games-panel.ec-games .ga-thumb { background: rgba(255,255,255,.08); }

/* Games tools row: search + count on one line */
.ec-gametools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
}

/* Override Bootstrap's full-width form-control inside this row */
.ec-gametools .form-control {
  width: auto;
  flex: 1 1 260px;   /* grow to fill, but can shrink */
}

/* Count pinned to the right, stays on same row */
.ec-gamecount {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}