/* ============================================================================
   site-bar.css: the OpenSea-style top bar (Theme\SiteBar) that replaces the
   theme header on every page of cryptogames.gg. s331, owner 2026-09-26.

   Light and dark are the theme's: body[data-theme] ("dark" / "default"), so
   every colour is a token restated for each mode. The palette is the Free
   banner's blue-purple (owner: no orange buttons).

   Widths (measured on the harness, 09-26):
     ≥ 1500  search box · every section with its icon · Telegram · Submit
     1200–1499  the search box becomes an icon; section icons drop; Telegram icon-only
     < 1200  sections move into the drawer (burger), Submit icon-only
     < 600   the logo shrinks, Submit leaves the bar (it is in the drawer)
   ============================================================================ */
.cgb {
  --b-bg: rgba(25,25,25,.9); --b-s1: #212121; --b-s2: #333333; --b-s3: #3f3f3f;
  --b-line: rgba(255,255,255,.08); --b-text: #ffffff; --b-muted: #b5b5b5;
  --b-accent: #9d8cff; --b-panel: #1e1e1e;
  --b-grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  position: sticky; top: 0; z-index: 990;
  display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px;
  background: var(--b-bg); color: var(--b-text); border-bottom: 1px solid var(--b-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
body:not([data-theme="dark"]) .cgb {
  --b-bg: rgba(255,255,255,.92); --b-s1: #f4f4f6; --b-s2: #e9e9ee; --b-s3: #dedee6;
  --b-line: rgba(0,0,0,.08); --b-text: #191919; --b-muted: #6b6b6b;
  --b-accent: #4a28c4; --b-panel: #ffffff;
}
.admin-bar .cgb { top: 32px; }
@media (max-width: 782px) { .admin-bar .cgb { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cgb { top: 0; } }
/* The shell's sticky children (rail, tab navs) start below whatever is stuck on top. */
body.cg-has-bar, body.cg-has-bar.cg-layout { --cg-hd: 64px; }

.cgb *, .cgb *::before, .cgb *::after { box-sizing: border-box; }
.cgb a { color: inherit; text-decoration: none; }
.cgb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.cgb ul { list-style: none; margin: 0; padding: 0; }
.cgb .material-symbols-outlined { font-size: 20px; line-height: 1; }

/* Logo */
.cgb-logo { flex: 0 0 auto; display: flex; align-items: center; height: 64px; }
.cgb-logo img { display: block; height: 42px; width: auto; }
/* The theme's logo is a WHITE wordmark (Foxiz only ever showed it on a dark
   bar); on the light bar it is drawn as a dark silhouette so it reads. */
body:not([data-theme="dark"]) .cgb-logo img { filter: brightness(0) opacity(.86); }

/* Search */
.cgb-search { flex: 0 1 300px; min-width: 180px; display: flex; align-items: center; gap: 8px; height: 42px; margin: 0; padding: 0 12px;
  border-radius: 12px; background: var(--b-s1); border: 1px solid var(--b-line); color: var(--b-muted); }
.cgb-search:focus-within { border-color: var(--b-accent); }
.cgb-search input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  color: var(--b-text); font: inherit; }
.cgb-search input::placeholder { color: var(--b-muted); opacity: 1; }
.cgb-search input::-webkit-search-cancel-button { display: none; }
.cgb-search kbd { flex: 0 0 auto; font: 500 12px Inter, sans-serif; color: var(--b-muted); border: 1px solid var(--b-s3); border-radius: 6px; padding: 1px 7px; background: none; box-shadow: none; }

/* Sections */
.cgb-nav { flex: 0 1 auto; min-width: 0; height: 64px; }
.cgb-nav > ul { display: flex; align-items: center; gap: 2px; height: 100%; }
.cgb-item { height: 100%; display: flex; align-items: center; }
.cgb-item.has-panel:not(.cgb-games):not(.cgb-magazine) { position: relative; }
.cgb-link { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.cgb-link .cgb-ico { font-size: 19px; color: var(--b-accent); }
.cgb-link .cgb-caret { font-size: 18px; margin-left: -3px; color: var(--b-muted); transition: transform .15s; }
.cgb-item:hover > .cgb-link, .cgb-item.open > .cgb-link, .cgb-link:focus-visible { background: var(--b-s1); }
.cgb-item:hover > .cgb-link .cgb-caret, .cgb-item.open > .cgb-link .cgb-caret { transform: rotate(180deg); }

/* Panels: OpenSea's floating sheet. Mega panels hang from the bar, small ones from their item. */
.cgb-panel { display: none; position: absolute; top: 100%; z-index: 995; padding: 18px 20px; border-radius: 16px; background: var(--b-panel);
  border: 1px solid var(--b-line); box-shadow: 0 24px 60px rgba(0,0,0,.35); color: var(--b-text); }
.cgb-item:hover > .cgb-panel, .cgb-item.open > .cgb-panel, .cgb-item:focus-within > .cgb-panel { display: block; }
.cgb-item.shut > .cgb-panel { display: none; }
.cgb-mega { left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 40px)); max-height: calc(100vh - 88px); overflow: auto; }
.cgb-small { left: 0; min-width: 240px; padding: 8px; }
.cgb-small a { display: block; padding: 9px 12px; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.cgb-small a:hover { background: var(--b-s1); }
.cgb .cg-mega-columns { display: grid; gap: 8px 24px; }
.cgb .cg-mega-games { grid-template-columns: 1.5fr 3fr 3fr 1.1fr; }
.cgb .cg-mega-magazine { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cgb .cg-mega-list { column-count: 1; column-gap: 20px; }
.cgb-nav .cg-mega-games .cg-mega-col:nth-child(2) .cg-mega-list, .cgb-nav .cg-mega-games .cg-mega-col:nth-child(3) .cg-mega-list { column-count: 3; }
.cgb .cg-mega-list li { break-inside: avoid; padding: 0; }
.cgb .cg-mega-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--b-line);
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--b-text); }
.cgb .cg-mega-title .material-symbols-outlined { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px;
  background: var(--b-s1); color: var(--b-accent); font-size: 18px; }
.cgb .cg-mega-title a { display: flex; align-items: center; gap: 8px; }
.cgb .cg-mega-count { color: var(--b-muted); font-weight: 500; }
.cgb .cg-mega-list a { display: block; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; color: var(--b-muted); font-size: 14px; font-weight: 500; }
.cgb .cg-mega-list a:hover { background: var(--b-s1); color: var(--b-text); }
.cgb .cg-mega-list .cg-mega-all a { color: var(--b-accent); font-weight: 600; }
.cgb .cg-mega-card { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px;
  background: linear-gradient(135deg, rgba(6,112,127,.22), rgba(74,40,196,.26)); }
.cgb .cg-mega-card b { color: var(--b-text); }
.cgb .cg-mega-card span { color: var(--b-muted); }

/* Right side */
.cgb-right { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cgb-tg, .cgb-submit { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; font-weight: 700; white-space: nowrap; }
.cgb-tg { background: var(--b-s1); }
.cgb-tg:hover { background: var(--b-s2); }
.cgb-tg svg { width: 18px; height: 18px; color: #229ed9; }
.cgb-submit { background: var(--b-grad); color: #fff !important; box-shadow: 0 6px 20px rgba(74,40,196,.35); }
.cgb-submit:hover { filter: brightness(1.08); }
.cgb-submit .material-symbols-outlined { font-size: 19px; }
.cgb-icon, .cgb-burger, .cgb-sbtn { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: var(--b-s1); }
.cgb-icon:hover, .cgb-burger:hover, .cgb-sbtn:hover { background: var(--b-s2); }
.cgb-icon .material-symbols-outlined, .cgb-burger .material-symbols-outlined, .cgb-sbtn .material-symbols-outlined { font-size: 22px; }
/* Foxiz styles .dark-mode-toggle as its slider; ours is a plain icon button. */
.cgb .dark-mode-toggle { position: static; width: 42px; height: 42px; margin: 0; }
.cgb-theme .cgb-light { display: none; }
body[data-theme="dark"] .cgb-theme .cgb-dark { display: none; }
body[data-theme="dark"] .cgb-theme .cgb-light { display: inline; }
.cgb-burger, .cgb-sbtn { display: none; }

/* Drawer (below 1200px) */
.cgb-drawer { display: none; }
/* ⚠️ absolute, not fixed: the bar's backdrop-filter makes IT the containing
   block of fixed children, so `fixed; bottom: 0` collapsed to the bar. */
.cgb.open .cgb-drawer { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 64px); height: calc(100dvh - 64px); z-index: 994;
  overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 40px; background: var(--b-panel); border-top: 1px solid var(--b-line); }
.cgb-drawer .cgb-search { display: flex; width: 100%; max-width: none; margin-bottom: 12px; }
.cgb-drawer .cgb-search kbd { display: none; }
.cgb-mlist > li { position: relative; border-bottom: 1px solid var(--b-line); }
.cgb-mlist > li > a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-right: 52px; font-size: 16px; font-weight: 600; }
.cgb-mlist .cgb-ico { color: var(--b-accent); font-size: 22px; }
.cgb-mlist details > summary { position: absolute; right: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; list-style: none; cursor: pointer; color: var(--b-muted); }
.cgb-mlist details > summary::-webkit-details-marker { display: none; }
.cgb-mlist details[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.cgb-mlist details > .cg-mega-columns, .cgb-mlist details > .cg-mega-list { padding: 4px 0 14px 34px; }
.cgb-mlist .cg-mega-columns { grid-template-columns: 1fr 1fr; }
.cgb-mlist .cg-mega-list { column-count: 1; }
.cgb-mlist .cg-mega-card { display: none; }
.cgb-mbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cgb-mbtns .cgb-tg, .cgb-mbtns .cgb-submit { display: inline-flex; flex: 1 1 200px; justify-content: center; }
.cgb-mbtns .cgb-tg span, .cgb-mbtns .cgb-submit span { display: inline; }
html.cgb-lock, html.cgb-lock body { overflow: hidden; }

@media (max-width: 1499px) {
  .cgb > .cgb-search { display: none; }
  .cgb-sbtn { display: grid; }
  .cgb-link .cgb-ico { display: none; }
  .cgb-right > .cgb-tg { width: 42px; padding: 0; justify-content: center; }
  .cgb-right > .cgb-tg span:not(.material-symbols-outlined) { display: none; }
  .cgb.searching > .cgb-search { display: flex; position: absolute; left: 20px; right: 20px; top: 11px; max-width: none; z-index: 996; background: var(--b-panel); }
}
@media (max-width: 1199px) {
  .cgb-nav { display: none; }
  .cgb-burger { display: grid; }
  .cgb { gap: 10px; padding: 0 16px; }
  .cgb-right > .cgb-submit { width: 42px; padding: 0; justify-content: center; }
  .cgb-right > .cgb-submit span:not(.material-symbols-outlined) { display: none; }
  .cgb.searching > .cgb-search { left: 16px; right: 16px; }
}
@media (min-width: 1200px) {
  .cgb.open .cgb-drawer { display: none; }
}
@media (max-width: 600px) {
  .cgb { padding: 0 12px; gap: 8px; }
  .cgb-logo img { height: 34px; }
  .cgb-right { gap: 6px; }
  .cgb-right > .cgb-submit, .cgb-right > .cgb-tg { display: none; }
  .cgb-icon, .cgb-burger, .cgb-sbtn { width: 38px; height: 38px; flex-basis: 38px; }
  .cgb .dark-mode-toggle { width: 38px; height: 38px; }
  .cgb-mlist .cg-mega-columns { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .cgb-account { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cgb-link .cgb-caret { transition: none; } }