/* ============================================================================
   games-bar.css: Theme\GamesBar, the row of game links above the homepage hero
   and on top of /games/ (s334, owner 2026-09-27). cryptogames.gg only.

   The homepage's palette (home-os.css), restated here because the bar also
   sits on /games/, which does not load home-os.css. Light tokens follow the
   theme's body[data-theme] the way home-os does.
   ============================================================================ */
.cg-gbar {
  --gb-s1: #212121; --gb-s2: #333333; --gb-s3: #3f3f3f;
  --gb-text: #ffffff; --gb-muted: #b5b5b5;
  --gb-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  display: flex; align-items: center; gap: 8px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  font: 600 14px/1 Inter, system-ui, sans-serif;
}
body:not([data-theme="dark"]) .cg-gbar {
  --gb-s1: #f4f4f6; --gb-s2: #e9e9ee; --gb-s3: #dedee6;
  --gb-text: #191919; --gb-muted: #6b6b6b;
}
.cg-gbar::-webkit-scrollbar { display: none; }
.cg-gbar a { text-decoration: none; }
.cg-gbar .material-symbols-outlined { font-size: 18px; line-height: 1; font-weight: 400; }

.cg-gbar-all,
.cg-gbar-chip {
  flex: 0 0 auto; height: 40px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; border-radius: 12px; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.cg-gbar-all { padding-left: 10px; background: var(--gb-grad); color: #fff; font-weight: 700; box-shadow: 0 6px 20px rgba(74, 40, 196, .3); }
.cg-gbar-all:hover { color: #fff; filter: brightness(1.08); }
.cg-gbar-chip { background: var(--gb-s1); color: var(--gb-text); }
.cg-gbar-chip:hover { background: var(--gb-s2); color: var(--gb-text); }
.cg-gbar-chip .material-symbols-outlined { color: var(--gb-muted); }
.cg-gbar-sep { flex: 0 0 1px; height: 24px; margin: 0 4px; background: var(--gb-s3); }

/* Chain logos (Catalog\ChainMarks): its svg, or a lettered disc. */
.cg-gbar svg.cg-cmark { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
.cg-gbar .cg-cmark-letter,
.cg-gbar .cg-cmark-other {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cg-cmark-bg, #4a5658); color: #0d0f0f; font-size: 10px; font-weight: 800;
}
.cg-gbar .cg-cmark-other .material-symbols-outlined { font-size: 14px; color: #0d0f0f; }

.cg-gbar a:focus-visible { outline: 2px solid #9d8cff; outline-offset: 2px; }

@media (max-width: 760px) {
  .cg-gbar-all, .cg-gbar-chip { height: 36px; padding: 0 12px; }
}

/* The curated page being served (Theme\CuratedOs): its own chip, lit. */
.cg-gbar-chip.is-on { background: rgba(106, 80, 255, .22); color: var(--gb-text); box-shadow: inset 0 0 0 1px rgba(157, 140, 255, .55); }
.cg-gbar-chip.is-on .material-symbols-outlined { color: #9d8cff; }