/* ============================================================================
   home-os.css — the OpenSea-layout homepage (s330, owner 2026-09-26).
   Scoped under .cg-hos; only /  loads it (Homepage\HomeV2 → tpl/home/home-os.php).

   ⭐ LIGHT AND DARK ARE THE THEME'S. Foxiz stamps body[data-theme] ("dark" or
   "default") and its toggle — and the rail's — flips it; every colour below is
   a token restated for each, so no rule carries a dark literal of its own.
   The palette is the Free banner's blue-purple (owner: "no orange buttons").

   ⚠️ Generated from the approved draft (scratchpad css_port.py): the selectors
   are the draft's, prefixed. Edit here, not there, from now on.
   ============================================================================ */
.cg-hos {
  --bg: #191919; --s1: #212121; --s2: #333333; --s3: #3f3f3f;
  --line: rgba(255,255,255,.08); --text: #ffffff; --muted: #b5b5b5;
  --accent: #9d8cff; --blue: #7fb0e6; --up: #35b477; --down: #d65a52;
  --grad: linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%);
  --grad-soft: rgba(106,80,255,.16);
  --shade: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.82) 100%);
  background: var(--bg); color: var(--text);
  font: 14px/1.45 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
body:not([data-theme="dark"]) .cg-hos {
  --bg: #ffffff; --s1: #f4f4f6; --s2: #e9e9ee; --s3: #dedee6;
  --line: rgba(0,0,0,.08); --text: #191919; --muted: #6b6b6b;
  --accent: #4a28c4; --blue: #568fce; --up: #2f9e68; --down: #c9463e;
}
.cg-home-os .cg-main { background: var(--bg, #191919); }
body:not([data-theme="dark"]).cg-home-os .cg-main { background: #ffffff; }
.cg-hos a { color: inherit; text-decoration: none; }
.cg-hos img { display: block; max-width: none; }
.cg-hos button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.cg-hos small { color: var(--muted); font-size: 12px; }
.cg-hos h1, .cg-hos h2, .cg-hos h3, .cg-hos h4 { color: inherit; font-family: Inter, system-ui, sans-serif; }

/* Layout (s331): the chips row, then .hos-cols (the main column beside the
   sticky rankings), then the full-width magazine. The rankings are sticky
   INSIDE .hos-cols, so they stop where the main column stops instead of
   riding over the magazine (a sticky item's box is its parent: when that
   parent was the whole page grid, it stuck over row 3). Full width: no
   max-width, the page is as wide as the window (owner, 09-26). */
.cg-hos .hos-grid { padding: 16px 24px 48px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cg-hos .hos-cols { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 24px; align-items: start; }
.cg-hos .hos-main { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.cg-hos .hos-side { position: sticky; top: calc(var(--cg-hd, 64px) + 16px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1800px) {
  .cg-hos .hos-cols { grid-template-columns: minmax(0,1fr) 400px; }
}
.cg-hos .chip[hidden], .cg-hos .gcard[hidden], .cg-hos .rrow[hidden] { display: none; }
.cg-hos .chainsel { position: relative; }
.cg-hos .chainmenu { display: none; position: absolute; right: 0; top: 46px; z-index: 30; width: 220px; max-height: 360px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.cg-hos .chainsel.open .chainmenu { display: block; }
.cg-hos .chainmenu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; font-weight: 600; }
.cg-hos .chainmenu button:hover, .cg-hos .chainmenu button.on { background: var(--s2); }
.cg-hos .filter-note { display: none; margin: -4px 0 12px; font-weight: 600; color: var(--muted); }
.cg-hos .filter-note.on { display: block; }
.cg-hos .filter-note a { color: var(--accent); }
.cg-hos .empty-filter { display: none; padding: 18px; border-radius: 14px; background: var(--s1); color: var(--muted); }
.cg-hos .empty-filter.on { display: block; }
.cg-hos .hos-foot { margin-top: 24px; }

@media (max-width: 1180px) {
  .cg-hos .hos-cols { grid-template-columns: minmax(0,1fr); }
  .cg-hos .hos-side { position: static; }
}
@media (max-width: 760px) {
  .cg-hos .hos-grid { padding: 12px 16px 40px; }
}
.cg-hos .ms { font-family: 'Material Symbols Outlined'; font-size: 22px; line-height: 1; font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.cg-hos .up { color: var(--up); }
.cg-hos .down { color: var(--down); }
.cg-hos .flat, .cg-hos .muted { color: var(--muted); }
.cg-hos b, .cg-hos .tprice, .cg-hos .rval { font-variant-numeric: tabular-nums; }
.cg-hos .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 600; background: var(--s2); white-space: nowrap; }
.cg-hos .btn:hover { background: var(--s3); }
.cg-hos .btn.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 20px rgba(74,40,196,.35); }
.cg-hos .btn.primary:hover { filter: brightness(1.08); }
.cg-hos .btn.ghost { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px); }
.cg-hos .btn.ghost:hover { background: rgba(255,255,255,.2); }
.cg-hos .btn.small { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.cg-hos .chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cg-hos .chip { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--s1); color: var(--text); font-weight: 600; white-space: nowrap; }
.cg-hos .chip:hover { background: var(--s2); }
.cg-hos .chip.on { background: var(--text); color: var(--bg); }
.cg-hos .chainsel { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--s1); font-weight: 600; }
.cg-hos .chainsel .ms { font-size: 18px; color: var(--muted); }
.cg-hos .hero { position: relative; height: 440px; border-radius: 16px; overflow: hidden; background: var(--s1); }
.cg-hos .hslide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.cg-hos .hslide.on { opacity: 1; z-index: 1; }
.cg-hos .hslide > img { width: 100%; height: 100%; object-fit: cover; }
.cg-hos .hshade { position: absolute; inset: 0; background: var(--shade); }
.cg-hos .hslide .hshade { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%), var(--shade); }
.cg-hos .hbody { position: absolute; left: 28px; right: 360px; bottom: 26px; color: #fff; }
.cg-hos .hkick { display: flex; gap: 8px; margin-bottom: 12px; }
.cg-hos .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.14); color: inherit; backdrop-filter: blur(6px); white-space: nowrap; }
.cg-hos .pill.accent { background: var(--grad); color: #fff; }
.cg-hos .pill.live { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.cg-hos .hbody .h1 { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.8px; display: flex; align-items: center; gap: 10px; }
.cg-hos .verified { color: var(--blue); font-size: 22px; font-variation-settings: 'FILL' 1; }
.cg-hos .hbody .h1 .verified { font-size: 28px; }
.cg-hos .hbody p { margin: 10px 0 16px; color: rgba(255,255,255,.82); max-width: 560px; }
.cg-hos .hstats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cg-hos .hstat { padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08); }
.cg-hos .hstat span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.62); }
.cg-hos .hstat b { font-size: 15px; }
.cg-hos .hcta { display: flex; gap: 8px; }
.cg-hos .sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cg-hos .sec-h h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.cg-hos .sec-h .sub { color: var(--muted); font-size: 13px; }
.cg-hos .sec-h .more { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; }
.cg-hos .sec-h .more:hover { color: var(--text); }
.cg-hos .arrows { display: flex; gap: 6px; }
.cg-hos .arrows button { width: 32px; height: 32px; border-radius: 8px; background: var(--s1); display: grid; place-items: center; }
.cg-hos .arrows button:hover { background: var(--s2); }
.cg-hos .row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.cg-hos .row > * { scroll-snap-align: start; }
.cg-hos .news-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.cg-hos .nlead { position: relative; border-radius: 16px; overflow: hidden; min-height: 340px; background: var(--s1); }
.cg-hos .nlead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cg-hos .nlead:hover img { transform: scale(1.03); }
.cg-hos .nlbody { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.cg-hos .nlbody h3 { margin: 10px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.cg-hos .nlbody small { color: rgba(255,255,255,.7); }
.cg-hos .nside-wrap { display: flex; flex-direction: column; gap: 8px; }
.cg-hos .nside { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; }
.cg-hos .nside:hover { background: var(--s1); }
.cg-hos .nside img { width: 132px; height: 88px; object-fit: cover; border-radius: 10px; }
.cg-hos .nside h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .gcard { border-radius: 14px; overflow: hidden; background: var(--s1); transition: transform .15s, background .15s; }
.cg-hos .gcard:hover { transform: translateY(-3px); background: var(--s2); }
.cg-hos .gimg { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cg-hos .gimg.sq { aspect-ratio: 1 / 1; }
.cg-hos .gimg img { width: 100%; height: 100%; object-fit: cover; }
.cg-hos .gimg .rank { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.cg-hos .gbody { padding: 12px 14px 14px; }
.cg-hos .gbody h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .gbody h4 .verified { font-size: 17px; }
.cg-hos .gstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cg-hos .gstat span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.cg-hos .gstat b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cg-hos .row.tokens { grid-auto-columns: calc((100% - 5 * 12px) / 6); gap: 12px; }
/* s335 (owner): trending games in small cards, eight across. */
.cg-hos .row.games { grid-auto-columns: calc((100% - 7 * 12px) / 8); gap: 12px; }
.cg-hos .row.games .gimg { aspect-ratio: 16 / 10; }
.cg-hos .row.games .gimg .rank { left: 6px; top: 6px; padding: 2px 6px; font-size: 11px; }
.cg-hos .row.games .gbody { padding: 8px 10px 10px; }
.cg-hos .row.games .gbody h4 { margin-bottom: 6px; font-size: 13px; }
.cg-hos .row.games .gstats { gap: 4px; }
.cg-hos .row.games .gstat span { font-size: 10px; }
.cg-hos .row.games .gstat b { font-size: 12px; }
.cg-hos .tcard { position: relative; padding: 14px; border-radius: 14px; background: var(--s1); overflow: hidden; min-height: 150px; }
.cg-hos .tcard:hover { background: var(--s2); }
.cg-hos .thead { display: flex; gap: 10px; align-items: center; }
.cg-hos .thead img { width: 32px; height: 32px; border-radius: 50%; }
.cg-hos .thead b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.cg-hos .tprice { font-size: 18px; font-weight: 700; margin: 14px 0 2px; }
.cg-hos .tfoot { font-weight: 600; font-size: 13px; }
.cg-hos .tcap { display: block; margin-top: 2px; }
.cg-hos .spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; opacity: .55; }
.cg-hos .spark polyline { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cg-hos .spark.up polyline { stroke: var(--up); }
.cg-hos .spark.down polyline { stroke: var(--down); }
.cg-hos .tabs { display: flex; gap: 4px; padding: 4px; background: var(--s1); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.cg-hos .tab { height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; }
.cg-hos .tab:hover { color: var(--text); }
.cg-hos .tab.on { background: var(--s2); color: var(--text); }
.cg-hos .npane { display: none; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 14px; }
.cg-hos .npane.on { display: grid; }
.cg-hos .ncard .nimg { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--s1); margin-bottom: 10px; }
.cg-hos .ncard img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cg-hos .ncard:hover img { transform: scale(1.04); }
.cg-hos .ncard h4 { margin: 0 0 6px; font-size: 14px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .row.free { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
.cg-hos .fcard { border-radius: 14px; overflow: hidden; background: var(--s1); }
.cg-hos .fcard:hover { background: var(--s2); }
.cg-hos .fimg { position: relative; aspect-ratio: 46 / 21; }
.cg-hos .fimg img { width: 100%; height: 100%; object-fit: cover; }
.cg-hos .store, .cg-hos .ends { position: absolute; top: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; backdrop-filter: blur(6px); }
.cg-hos .store { left: 8px; background: rgba(0,0,0,.6); color: #fff; }
.cg-hos .ends { right: 8px; background: var(--grad); color: #fff; display: flex; gap: 4px; align-items: center; }
.cg-hos .ends .ms { font-size: 14px; }
.cg-hos .fbody { padding: 12px 14px 14px; }
.cg-hos .fbody h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .frow { display: flex; justify-content: space-between; align-items: center; }
.cg-hos .was { color: var(--up); font-weight: 600; font-size: 13px; }
.cg-hos .row.events { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
.cg-hos .ecard { display: grid; grid-template-columns: 60px 1fr; gap: 14px; padding: 14px; border-radius: 14px; background: var(--s1); }
.cg-hos .ecard:hover { background: var(--s2); }
.cg-hos .edate { height: 64px; border-radius: 10px; background: var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cg-hos .ecard:hover .edate { background: var(--s3); }
.cg-hos .edate b { font-size: 22px; line-height: 1; }
.cg-hos .edate small { text-transform: uppercase; font-weight: 700; color: var(--accent); margin-top: 3px; }
.cg-hos .etop { display: flex; gap: 6px; margin-bottom: 8px; }
.cg-hos .etop .pill:not(.live) { background: var(--s2); }
.cg-hos .ebody h4 { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cg-hos .panel { background: var(--s1); border-radius: 16px; padding: 16px 12px 10px; }
.cg-hos .panel .sec-h { padding: 0 8px; margin-bottom: 6px; }
.cg-hos .panel .sec-h h2 { font-size: 17px; }
.cg-hos .alist { flex: 1 1 auto; min-height: 0; }
.cg-hos .rpanel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; background: var(--s1); border-radius: 16px; overflow: hidden; }
.cg-hos .follow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--s1); flex: 0 0 auto; }
.cg-hos .ftitle { font-weight: 700; font-size: 13px; white-space: nowrap; }
.cg-hos .fbtns { display: flex; gap: 6px; }
.cg-hos .fbtns a { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; transition: transform .15s, filter .15s; }
.cg-hos .fbtns a:hover { transform: translateY(-2px); filter: brightness(1.15); }
.cg-hos .fbtns svg { width: 18px; height: 18px; }
.cg-hos .fbtns .ms { font-size: 19px; }
.cg-hos .sx { background: #000; border: 1px solid rgba(255,255,255,.18); }
.cg-hos .stg { background: #229ed9; }
.cg-hos .sfb { background: #1877f2; font-family: Arial, sans-serif; font-size: 19px !important; }
.cg-hos .stt { background: #111; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; }
.cg-hos .syt { background: #ff0033; }
.cg-hos .tgban { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; align-items: center; padding: 14px; border-radius: 16px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(34,158,217,.55), transparent 55%), linear-gradient(135deg, #0b1020 0%, #1b1450 60%, #3a1780 100%); border: 1px solid rgba(34,158,217,.35); }
.cg-hos .tgban:hover { filter: brightness(1.08); }
.cg-hos .tgicon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #5fd4ff; background: rgba(34,158,217,.12); box-shadow: 0 0 24px rgba(34,158,217,.55), inset 0 0 12px rgba(34,158,217,.35); }
.cg-hos .tgicon svg { width: 32px; height: 32px; filter: drop-shadow(0 0 6px #22c3ff); }
.cg-hos .tgtext b { display: block; font-size: 15px; line-height: 1.25; }
.cg-hos .tgtext small { display: block; margin-top: 3px; color: rgba(255,255,255,.72); }
.cg-hos .tgbtn { grid-column: 1 / -1; margin-top: 4px; text-align: center; padding: 8px; border-radius: 11px; font-weight: 700; background: linear-gradient(135deg, #229ed9, #4a28c4); box-shadow: 0 6px 20px rgba(34,158,217,.35); }
.cg-hos .ahead { padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.cg-hos .ahead .row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cg-hos .ahead h3 { margin: 0; font-size: 16px; font-weight: 700; }
.cg-hos .tf { display: flex; gap: 2px; }
.cg-hos .tf button { height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cg-hos .tf button.on { background: var(--s2); color: var(--text); }
.cg-hos aside .tabs { background: var(--bg); }
.cg-hos .cols { display: flex; justify-content: space-between; padding: 8px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.cg-hos .alist { padding: 0 6px 6px; }
.cg-hos .apane { display: none; }
.cg-hos .apane.on { display: block; }
.cg-hos .rrow { display: grid; grid-template-columns: 22px 36px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.cg-hos .rrow:hover { background: var(--s2); }
.cg-hos .rn { color: var(--muted); font-weight: 600; font-size: 13px; text-align: center; }
.cg-hos .ri { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--s2); }
.cg-hos .ri.sq { border-radius: 9px; }
.cg-hos .rname { min-width: 0; }
.cg-hos .rname b, .cg-hos .rname small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .rname b { font-size: 14px; }
.cg-hos .rval { text-align: right; font-weight: 600; font-size: 13px; }
.cg-hos .rval small { display: block; font-weight: 600; }
.cg-hos .afoot { padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.cg-hos .afoot .btn { width: 100%; justify-content: center; height: 40px; }
.cg-hos .news3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cg-hos .ncol-h { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cg-hos .ncol-h .ms { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--s1); color: var(--accent); font-size: 19px; }
.cg-hos .ncol-h h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cg-hos .ncol-h .more { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; }
.cg-hos .nlead2 { display: block; margin-bottom: 8px; }
.cg-hos .nlead2 .nimg, .cg-hos .ncard .nimg { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--s1); margin-bottom: 10px; }
.cg-hos .nlead2 .nimg img, .cg-hos .ncard .nimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cg-hos .nlead2:hover img, .cg-hos .ncard:hover img { transform: scale(1.04); }
.cg-hos .nimg .pill { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.6); color: #fff; }
.cg-hos .nlead2 h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.cg-hos .nlead2 p { margin: 0 0 6px; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .nrow { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 10px; }
.cg-hos .nrow:hover { background: var(--s1); }
.cg-hos .nrow img { width: 84px; height: 56px; object-fit: cover; border-radius: 8px; }
.cg-hos .nrow h4 { margin: 0 0 3px; font-size: 13.5px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .news3 { gap: 20px; }
.cg-hos .sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cg-hos .scard { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--s1); transition: background .15s, transform .15s; }
.cg-hos .scard:hover { background: var(--s2); transform: translateY(-2px); }
.cg-hos .simg { aspect-ratio: 16 / 9; overflow: hidden; }
.cg-hos .simg img { width: 100%; height: 100%; object-fit: cover; }
.cg-hos .sbody { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cg-hos .sbody h4 { margin: 0; font-size: 12.5px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .sbody small { margin-top: auto; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .ncol { min-width: 0; }
.cg-hos .nhs { position: relative; height: 32px; flex: 1; min-width: 0; }
.cg-hos .nh { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.cg-hos .nh.on { opacity: 1; pointer-events: auto; }
.cg-hos .nh h2 { margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; }
.cg-hos .nh .ms { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--s1); color: var(--accent); font-size: 19px; }
.cg-hos .ncol-h > .ms { display: none; }
.cg-hos .ndots { display: flex; gap: 4px; margin-left: auto; }
.cg-hos .nd { width: 22px; height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; padding: 0; }
.cg-hos .nd i { display: block; height: 100%; width: 0; background: var(--grad); }
.cg-hos .nd.on i { animation: cg-hos-fill 10s linear forwards; }
.cg-hos .ncol-h .more { margin-left: 10px; }
.cg-hos .nwin { overflow: hidden; }
.cg-hos .ntrack { display: grid; }
.cg-hos .ntrack > .sgrid { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.cg-hos .ntrack > .sgrid.on { opacity: 1; visibility: visible; }
@keyframes cg-hos-fill { from { width: 0; } to { width: 100%; } }
.cg-hos .hslide > img.hbg { width: 100%; height: 100%; object-fit: cover; }
/* ⛔ s331 fix (owner's screenshot, 09-26): on the live site the image
   optimizer wraps every <img> in <picture> (AVIF/WebP sources) and rewrites
   its class, so `.hslide > img` and `img.hbg` matched nothing there and the
   slide image stayed at its natural 1024px, leaving a gap on wide screens.
   The harness never showed it (no optimizer). Style the slot, not the class:
   the wrapper fills the slide, the image inside covers it. */
.cg-hos .hslide > picture { position: absolute; inset: 0; display: block; }
.cg-hos .hslide > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-hos .bfeat > picture, .cg-hos .nlead > picture { position: absolute; inset: 0; display: block; }

.cg-hos .hnav { position: absolute; right: 20px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.cg-hos .harr { width: 28px; height: 28px; border-radius: 8px; color: #fff; font-size: 20px; display: grid; place-items: center; }
.cg-hos .harr:hover { background: rgba(255,255,255,.14); }
.cg-hos .hbars { display: flex; gap: 4px; }
.cg-hos .hbar { width: 18px; height: 4px; padding: 0; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.cg-hos .hbar i { display: block; height: 100%; width: 0; background: #fff; }
.cg-hos .hbar.done i { width: 100%; }
.cg-hos .hbar.on i { animation: cg-hos-fill 7s linear forwards; }
.cg-hos .hero.paused .hbar.on i { animation-play-state: paused; }
.cg-hos .hbody .h1.news { font-size: 32px; line-height: 1.15; max-width: 640px; }
.cg-hos .hkick .pill .ms { font-size: 15px; margin-right: 4px; }
.cg-hos .hpromo { position: absolute; inset: 0; }
.cg-hos .p-rank { background: radial-gradient(60% 90% at 78% 40%, rgba(74,40,196,.55), transparent 70%), linear-gradient(120deg, #151525 0%, #1d1440 100%); }
.cg-hos .p-tok { background: radial-gradient(60% 90% at 78% 45%, rgba(127,176,230,.35), transparent 70%), linear-gradient(120deg, #191919 0%, #10192a 100%); }
.cg-hos .p-free { background: linear-gradient(150deg, #06707f 0%, #4a28c4 58%, #b3175a 100%); }
.cg-hos .p-ev { background: radial-gradient(60% 90% at 78% 40%, rgba(53,180,119,.32), transparent 70%), linear-gradient(120deg, #191919 0%, #0f2119 100%); }
.cg-hos .p-nft { background: radial-gradient(60% 90% at 78% 40%, rgba(160,90,255,.35), transparent 70%), linear-gradient(120deg, #191919 0%, #1b1230 100%); }
.cg-hos .hbody.promo { right: 50%; bottom: auto; top: 50%; transform: translateY(-50%); }
.cg-hos .hbody.promo .h1 { font-size: 44px; line-height: 1.05; display: block; }
.cg-hos .hvis { position: absolute; top: 0; bottom: 70px; right: 0; width: 50%; overflow: hidden; }
.cg-hos .hvis img { display: block; }
.cg-hos .vpanel { position: absolute; right: 60px; top: 24px; width: 330px; padding: 12px; border-radius: 16px; background: rgba(25,25,25,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.5); z-index: 2; color: #fff; }
.cg-hos .vph { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-weight: 700; }
.cg-hos .vph span { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.cg-hos .vrow { display: grid; grid-template-columns: 18px 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.cg-hos .vrow:nth-child(2) { background: var(--grad-soft); }
.cg-hos .vrow .rn { grid-row: span 2; }
.cg-hos .vrow img { grid-row: span 2; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.cg-hos .vrow b { font-size: 14px; }
.cg-hos .vrow small { color: rgba(255,255,255,.6); }
.cg-hos .vtile { position: absolute; width: 150px; height: 100px; border-radius: 12px; object-fit: cover; opacity: .55; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.cg-hos .vtile.t0 { right: 330px; top: 30px; transform: rotate(-6deg); width: 120px; height: 80px; }
.cg-hos .vtile.t1 { right: 340px; top: 150px; transform: rotate(4deg); width: 110px; height: 74px; }
.cg-hos .vtile.t2 { right: 10px; top: 20px; transform: rotate(5deg); width: 110px; height: 74px; }
.cg-hos .vtile.t3 { right: 330px; top: 260px; transform: rotate(-3deg); width: 120px; height: 80px; }
.cg-hos .vtok { position: absolute; width: 230px; padding: 16px; border-radius: 16px; background: rgba(25,25,25,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.5); color: #fff; overflow: hidden; min-height: 150px; }
.cg-hos .vtok .spark { height: 44px; opacity: .8; }
.cg-hos .vtok.v0 { right: 230px; top: 30px; transform: rotate(-4deg); }
.cg-hos .vtok.v1 { right: 30px; top: 70px; transform: rotate(3deg); z-index: 2; }
.cg-hos .vtok.v2 { right: 170px; top: 190px; transform: rotate(-1deg); z-index: 3; }
.cg-hos .vfree { position: absolute; width: 250px; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.55); box-shadow: 0 30px 60px rgba(0,0,0,.45); color: #fff; }
.cg-hos .vfree img { width: 100%; aspect-ratio: 46 / 21; object-fit: cover; }
.cg-hos .vfree b { display: block; padding: 10px 12px; font-size: 14px; }
.cg-hos .vfree .ends { top: 8px; right: 8px; }
.cg-hos .vfree.f0 { right: 210px; top: 26px; transform: rotate(-5deg); }
.cg-hos .vfree.f1 { right: 20px; top: 70px; transform: rotate(4deg); z-index: 2; }
.cg-hos .vfree.f2 { right: 120px; top: 190px; transform: rotate(-1deg); z-index: 3; }
.cg-hos .vev { position: absolute; display: grid; grid-template-columns: 60px 1fr; gap: 12px; width: 320px; padding: 12px; border-radius: 14px; background: rgba(25,25,25,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.5); color: #fff; }
.cg-hos .vev .edate { background: #333; }
.cg-hos .vev b { display: block; margin: 6px 0 2px; font-size: 14px; line-height: 1.3; }
.cg-hos .vev.e0 { right: 120px; top: 24px; transform: rotate(-3deg); }
.cg-hos .vev.e1 { right: 24px; top: 130px; transform: rotate(2deg); z-index: 2; }
.cg-hos .vev.e2 { right: 110px; top: 236px; z-index: 3; }
.cg-hos .vnft { position: absolute; width: 150px; padding: 8px; border-radius: 14px; background: rgba(25,25,25,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.5); color: #fff; }
.cg-hos .vnft img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.cg-hos .vnft b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .vnft small { color: rgba(255,255,255,.6); }
.cg-hos .vnft.n0 { right: 320px; top: 50px; transform: rotate(-6deg); }
.cg-hos .vnft.n1 { right: 175px; top: 20px; transform: rotate(2deg); z-index: 2; }
.cg-hos .vnft.n2 { right: 24px; top: 60px; transform: rotate(6deg); }
.cg-hos .vnft.n3 { right: 250px; top: 170px; transform: rotate(-1deg); z-index: 3; }
.cg-hos .p-tok { background: radial-gradient(60% 90% at 78% 45%, rgba(40,110,230,.5), transparent 70%), linear-gradient(120deg, #121826 0%, #0f1d3a 100%); }
.cg-hos .p-ev { background: radial-gradient(60% 90% at 78% 40%, rgba(6,112,127,.6), transparent 70%), linear-gradient(120deg, #111a1f 0%, #0b2a33 100%); }
.cg-hos .p-nft { background: radial-gradient(60% 90% at 78% 40%, rgba(123,47,192,.55), transparent 70%), linear-gradient(120deg, #17131f 0%, #26123a 100%); }
.cg-hos .p-apps { background: linear-gradient(150deg, #0b5f8a 0%, #3b2fc4 60%, #6a2bb8 100%); }
.cg-hos .p-submit { background: radial-gradient(60% 90% at 78% 40%, rgba(90,80,255,.5), transparent 70%), linear-gradient(120deg, #141428 0%, #1a1f48 100%); }
.cg-hos .p-guild { background: radial-gradient(60% 90% at 78% 40%, rgba(6,140,160,.5), transparent 70%), linear-gradient(120deg, #121c22 0%, #13283a 100%); }
.cg-hos .p-inv { background: radial-gradient(60% 90% at 78% 40%, rgba(100,60,220,.5), transparent 70%), linear-gradient(120deg, #15131f 0%, #221a3e 100%); }
.cg-hos .vfree .store { top: 8px; left: 8px; }
.cg-hos .vform { position: absolute; right: 150px; top: 26px; width: 300px; padding: 14px; border-radius: 16px; background: rgba(25,25,25,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.5); color: #fff; transform: rotate(-2deg); }
.cg-hos .vform.small { right: 24px; top: 210px; width: 240px; transform: rotate(3deg); z-index: 2; }
.cg-hos .vform label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.cg-hos .vform label i { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #2a2a2a; font-style: normal; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.45); }
.cg-hos .vbtn { display: block; margin-top: 10px; padding: 9px; border-radius: 9px; text-align: center; font-weight: 700; background: var(--grad); }
.cg-hos .evgame { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.cg-hos .evgame img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.cg-hos .vev .evgame { color: rgba(255,255,255,.7); margin: 0; }
.cg-hos .vev b { margin: 4px 0 6px; }
.cg-hos .evmeta { display: flex; gap: 6px; align-items: center; }
.cg-hos .ebody .etop { margin: 8px 0 0; }
.cg-hos .ntrend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cg-hos .ntr { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--s1); }
.cg-hos .ntr:hover { background: var(--s2); }
.cg-hos .ntr img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.cg-hos .ntr .rname b { font-size: 13px; }
.cg-hos .ntr .rval { font-size: 12px; }
@media (max-width: 1180px) {
  .cg-hos .ntrend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-hos .freeband { padding: 22px; border-radius: 20px; background:
  linear-gradient(150deg, color-mix(in srgb, #06707f 30%, var(--bg)) 0%, color-mix(in srgb, #4a28c4 30%, var(--bg)) 58%, color-mix(in srgb, #b3175a 26%, var(--bg)) 100%);
  border: 1px solid color-mix(in srgb, #4a28c4 40%, transparent); }
.cg-hos .freeband .sec-h h2 { line-height: 1.2; }
.cg-hos .freeband .sub { display: block; color: color-mix(in srgb, var(--text) 75%, transparent); }
.cg-hos .fb-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, #06707f, #4a28c4 58%, #b3175a); color: #fff; }
.cg-hos .freeband .more { color: var(--text); }
.cg-hos .freeband .arrows button { background: rgba(0,0,0,.25); color: #fff; }
.cg-hos .freeband .fcard { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
.cg-hos .freeband .fcard:hover { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.cg-hos .blog { margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.cg-hos .blog .sec-h h2 { font-size: 24px; }
.cg-hos .blog .tabs { margin-bottom: 18px; display: inline-flex; max-width: 100%; }
.cg-hos .bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.cg-hos .bfeat { grid-column: span 2; grid-row: span 2; position: relative; border-radius: 16px; overflow: hidden; min-height: 460px; }
.cg-hos .bfeat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-hos .bfeat .nlbody p { color: rgba(255,255,255,.8); margin: 0 0 6px; }
.cg-hos .nlbody { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.cg-hos .nlbody h3 { margin: 10px 0 6px; font-size: 26px; line-height: 1.2; font-weight: 800; }
.cg-hos .nlbody small { color: rgba(255,255,255,.7); }
.cg-hos .bmore { display: flex; justify-content: center; margin-top: 28px; }
.cg-hos .bmore .btn { padding: 0 32px; }
/* s335 (owner): the magazine — a section per category going down, small cards. */
.cg-hos .msec { margin-bottom: 32px; }
.cg-hos .msec:last-child { margin-bottom: 0; }
.cg-hos .msec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cg-hos .msec-h .ms { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--grad, linear-gradient(135deg, #06707f 0%, #4a28c4 62%, #7b2fc0 100%)); }
.cg-hos .msec-h h3 { margin: 0; font-size: 18px; font-weight: 800; }
.cg-hos .msec-h h3 a:hover { color: var(--accent); }
.cg-hos .msec-h .more { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.cg-hos .msec-h .more:hover { color: var(--accent); }
.cg-hos .mcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cg-hos .mcard { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--s1); transition: transform .15s, background .15s; }
.cg-hos .mcard:hover { transform: translateY(-3px); background: var(--s2); }
.cg-hos .mcard .mimg { aspect-ratio: 16 / 9; overflow: hidden; background: var(--s2); }
.cg-hos .mcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cg-hos .mcard:hover img { transform: scale(1.04); }
.cg-hos .mbody { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.cg-hos .mkick { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .mcard h4 { margin: 4px 0 8px; font-size: 13.5px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-hos .mcard small { margin-top: auto; color: var(--muted); font-size: 12px; }
@media (max-width: 1180px) {
  .cg-hos .mcards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 14px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cg-hos .mcard { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .cg-hos .mcards { grid-auto-columns: 46%; gap: 12px; }
}
@media (max-width: 1180px) {
  .cg-hos .news3 { grid-template-columns: 1fr; }
  .cg-hos .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-hos footer { margin-left: 64px; border-top: 1px solid var(--line); padding: 40px 24px 24px; display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 28px; color: var(--muted); }
.cg-hos .fl img { width: 128px; height: 128px; object-fit: contain; margin: -8px 0 6px -6px; }
.cg-hos .fbrand p { margin: 0 0 14px; font-size: 13px; max-width: 320px; }
.cg-hos .social { display: flex; gap: 6px; margin-bottom: 20px; }
.cg-hos .social a { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: var(--s1); color: var(--text); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.cg-hos .social a:hover { background: var(--s2); }
.cg-hos .social .ms { font-size: 19px; }
.cg-hos footer h5.gap { margin-top: 18px; }
.cg-hos .fbottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; }
.cg-hos footer h5 { margin: 0 0 10px; color: var(--text); font-size: 13px; }
.cg-hos footer a { display: block; padding: 3px 0; font-size: 13px; }
.cg-hos footer a:hover { color: var(--text); }
.cg-hos .nl { display: flex; gap: 8px; margin-top: 14px; }
.cg-hos .nl input { flex: 1; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit; }
.cg-hos .nl .btn { height: 40px; }
@media (max-width: 1180px) {
  .cg-hos .hbody { right: 28px; bottom: 100px; }
  .cg-hos .row { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .cg-hos .row.tokens, .cg-hos .row.games { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
}
@media (max-width: 760px) {
  .cg-hos footer { margin-left: 0; }
  .cg-hos .hero { height: 520px; }
  .cg-hos .hbody { left: 16px; right: 16px; bottom: 96px; }
  .cg-hos .hbody .h1 { font-size: 30px; }
  .cg-hos .news-top, .cg-hos .duo { grid-template-columns: 1fr; }
  .cg-hos .row, .cg-hos .row.free, .cg-hos .row.events { grid-auto-columns: 78%; }
  .cg-hos .row.tokens, .cg-hos .row.games { grid-auto-columns: 46%; }
  .cg-hos .npane { grid-template-columns: 1fr 1fr; }
  .cg-hos footer { grid-template-columns: 1fr 1fr; }
}
/* Chips row: the chips scroll, the chain menu sits outside them so it is not clipped. */
.cg-hos .chiprow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cg-hos .chiprow .chips { flex: 1 1 auto; min-width: 0; }
.cg-hos .chiprow .chainsel { margin-left: 0; }
.cg-hos .hos-side .rpanel { max-height: none; }
.cg-hos footer.hos-footer { margin-left: 0; }
.cg-hos .hbody .h1 { color: #fff; }
.cg-hos .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cg-hos .sec-h .hos-h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }

/* ============================================================================
   s331: every width, down to 360px (owner, 09-26: "responsive σε όλα τα
   μεγέθη και στο κινητό"). Measured on the harness at 1920/1440/1280/1024/
   768/390/360 before shipping.
   ============================================================================ */
.cg-hos { overflow-x: clip; }
/* The rankings list never shows a scrollbar: ten rows fit, and if a short
   window still makes the list scroll, the bar stays hidden. */
.cg-hos .alist { overflow: visible; scrollbar-width: none; }
.cg-hos .alist::-webkit-scrollbar { display: none; }
.cg-hos .follow { flex-wrap: wrap; }
@media (max-width: 1180px) {
  .cg-hos footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-hos footer .fbrand { grid-column: 1 / -1; }
}
/* Below 900px the promo visuals (absolutely placed cards) would cover the
   text, so the slide is text only. */
@media (max-width: 900px) {
  .cg-hos .hvis { display: none; }
  .cg-hos .hbody.promo { left: 20px; right: 20px; top: auto; bottom: 84px; transform: none; }
  .cg-hos .hbody { right: 20px; left: 20px; bottom: 84px; }
  .cg-hos .hbody.promo .h1 { font-size: 34px; }
}
@media (max-width: 760px) {
  .cg-hos .hero { height: 480px; }
  .cg-hos .hbody.promo .h1, .cg-hos .hbody .h1 { font-size: 28px; }
  .cg-hos .hbody .h1.news { font-size: 24px; }
  .cg-hos .hbody p { font-size: 13px; margin: 8px 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cg-hos .hstat { padding: 6px 10px; }
  .cg-hos .hnav { left: 16px; right: 16px; bottom: 16px; justify-content: space-between; }
  .cg-hos .hbars { flex: 1; justify-content: center; flex-wrap: wrap; }
  .cg-hos .hbar { width: 14px; }
  .cg-hos .hbody, .cg-hos .hbody.promo { left: 16px; right: 16px; bottom: 70px; }
  .cg-hos .sec-h { flex-wrap: wrap; row-gap: 4px; }
  .cg-hos .sec-h .sub, .cg-hos .arrows { display: none; }
  .cg-hos .freeband { padding: 16px; border-radius: 16px; }
  .cg-hos .bfeat { min-height: 340px; }
  .cg-hos .nlbody h3 { font-size: 20px; }
  .cg-hos .ntrend { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cg-hos .bgrid { grid-template-columns: minmax(0, 1fr); }
  .cg-hos .bfeat { grid-column: auto; grid-row: auto; }
  .cg-hos .row, .cg-hos .row.free, .cg-hos .row.events { grid-auto-columns: 84%; }
  .cg-hos .row.tokens { grid-auto-columns: 62%; }
  .cg-hos .row.games { grid-auto-columns: 44%; }
  .cg-hos .sgrid { gap: 8px; }
  .cg-hos .chip { height: 36px; padding: 0 12px; }
  .cg-hos .chainsel { height: 36px; }
  .cg-hos .chainlabel { display: none; }
}
@media (max-width: 420px) {
  .cg-hos .hos-grid { padding: 12px 12px 32px; }
  .cg-hos footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 32px 16px 20px; }
  .cg-hos .hstats .hstat:nth-child(n+3) { display: none; }
}
/* 1181–1500: three news columns beside the rankings are ~280px each, too
   narrow for two cards a row, so each story is a row: thumbnail, title. */
@media (min-width: 1181px) and (max-width: 1500px) {
  .cg-hos .sgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cg-hos .scard { flex-direction: row; align-items: center; }
  .cg-hos .simg { flex: 0 0 104px; aspect-ratio: 16 / 10; }
  .cg-hos .sbody { padding: 6px 10px; }
  .cg-hos .sbody h4 { font-size: 13px; -webkit-line-clamp: 2; }
}
/* Wide screens: the slide image zooms to cover (owner: "ή απλά να ζουμάρει").
   The hero grows a little with the window so a 16:9 cover is cropped less,
   and the crop keeps the upper part, where faces and logos usually are. */
@media (min-width: 901px) {
  .cg-hos .hero { height: clamp(440px, 25vw, 560px); }
}
.cg-hos .hslide > img, .cg-hos .hslide > picture > img { object-position: center 30%; }

/* ============================================================================
   s336 (owner, 09-27) — mockup 7LBtHfcwSUKTrDDdroZXNU, layout A.
   1. The slider at 45% and the top ten games as cards beside it. The main
      column decides (container query): under 1300px of column the cards sit
      under the slider, 5 × 2; on phones they are one swipe row.
   2. The Rankings panel opens on Tokens (template).
   3. Free band: smaller cards, more of them, apps among them.
   4. The middle news column gets a tint, so the three do not read as one.
   ============================================================================ */
.cg-hos .hos-main { container: hosmain / inline-size; }
.cg-hos .htop { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cg-hos .t10 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cg-hos .t10-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cg-hos .t10-h h1, .cg-hos .t10-h h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.cg-hos .t10-h .sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-hos .t10-h .more { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }
.cg-hos .t10-h .more:hover { color: var(--text); }
.cg-hos .t10-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
/* The card (owner, 09-27 second pass: "a bit of gradient… a cover photo on top, the icon
   in front of the cover and the text"): a picture band, the icon overlapping its lower
   edge, then the text on a card that carries a faint brand gradient. */
.cg-hos .t10c { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, color-mix(in srgb, #4a28c4 22%, var(--s1)) 0%, var(--s1) 52%, color-mix(in srgb, #06707f 14%, var(--s1)) 100%);
  border: 1px solid color-mix(in srgb, #9d8cff 20%, transparent); transition: transform .18s, border-color .18s, box-shadow .18s; }
.cg-hos .t10c:hover { transform: translateY(-3px); border-color: color-mix(in srgb, #9d8cff 55%, transparent); box-shadow: 0 14px 34px rgba(74, 40, 196, .28); }
.cg-hos .t10cv { position: relative; display: block; flex: 1 1 96px; min-height: 60px; overflow: hidden; background: var(--grad); }
.cg-hos .t10cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cg-hos .t10c:hover .t10cv img { transform: scale(1.06); }
.cg-hos .t10cv--blur img { inset: -20%; width: 140%; height: 140%; filter: blur(22px) saturate(1.5); opacity: .75; }
.cg-hos .t10c:hover .t10cv--blur img { transform: none; }
.cg-hos .t10cv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 100%); }
.cg-hos .t10b { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 12px 12px; }
.cg-hos .t10c img.t10i { width: 48px; height: 48px; margin: -26px 0 8px; border-radius: 13px; object-fit: cover; background: var(--s2);
  border: 3px solid color-mix(in srgb, #4a28c4 14%, var(--s1)); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.cg-hos .t10r { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.3); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cg-hos .t10r.r1 { background: #e8b93c; color: #1d1600; }
.cg-hos .t10r.r2 { background: #b9c2cf; color: #10151c; }
.cg-hos .t10r.r3 { background: #c98552; color: #1d0f04; }
.cg-hos .t10p { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; font-size: 13px; }
.cg-hos .t10v { font-weight: 800; font-variant-numeric: tabular-nums; }
.cg-hos .t10v.muted { color: var(--muted); font-weight: 600; }
.cg-hos .t10d { display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px; border-radius: 7px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); background: var(--s2); }
.cg-hos .t10d em { font-style: normal; font-weight: 600; opacity: .7; margin-left: 3px; }
.cg-hos .t10d.up { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.cg-hos .t10d.down { color: var(--down); background: color-mix(in srgb, var(--down) 13%, transparent); }
@container hosmain (min-width: 1300px) {
  .cg-hos .htop:not(.htop--solo) { display: grid; grid-template-columns: 45% minmax(0, 1fr); align-items: stretch; }
  .cg-hos .htop:not(.htop--solo) .t10-grid { flex: 1 1 auto; grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
@container hosmain (max-width: 1500px) {
  .cg-hos .htop:not(.htop--solo) .t10-h .sub { display: none; }
}
/* Owner 09-27, 1920x1080: the slider stopped at its fixed height while the two
   card rows ran on, leaving a hole under it; it now takes the cards' height
   (its slides are absolute, so the row sets it). And a 1920 column squeezed
   ten cards to 137px: until the column is 1800px wide (2K and up) it shows
   the top EIGHT, four a row. The heading's "10" is drawn as 8 there; the
   text stays "Top 10" for the page's H1. */
@container hosmain (min-width: 1300px) {
  .cg-hos .htop:not(.htop--solo) .hero { height: auto; min-height: 440px; }
}
@container hosmain (min-width: 1300px) and (max-width: 1799px) {
  .cg-hos .htop:not(.htop--solo) .t10-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cg-hos .htop:not(.htop--solo) .t10c:nth-child(n+9) { display: none; }
  .cg-hos .htop:not(.htop--solo) .t10-n { font-size: 0; }
  .cg-hos .htop:not(.htop--solo) .t10-n::after { content: "8"; font-size: 18px; }
}
/* A narrow slider keeps only its text: the promo visuals are placed for 800px+. */
.cg-hos .hero { container: hoshero / inline-size; }
@container hoshero (max-width: 860px) {
  .cg-hos .hvis { display: none; }
  .cg-hos .hbody, .cg-hos .hbody.promo { right: 28px; }
  .cg-hos .hbody.promo .h1 { font-size: 36px; }
  .cg-hos .hbody .h1.news { font-size: 28px; }
}
@media (max-width: 760px) {
  .cg-hos .t10-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cg-hos .t10-grid::-webkit-scrollbar { display: none; }
  .cg-hos .t10c { scroll-snap-align: start; }
  .cg-hos .t10-h .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-hos .t10c, .cg-hos .t10cv img { transition: none; }
  .cg-hos .t10c:hover, .cg-hos .t10c:hover .t10cv img { transform: none; }
}

/* 3. Free band: seven cards a row instead of four. */
.cg-hos .row.free { grid-auto-columns: calc((100% - 6 * 12px) / 7); gap: 12px; }
.cg-hos .freeband .fcard { border-radius: 12px; }
.cg-hos .freeband .fbody { padding: 8px 10px 10px; }
.cg-hos .freeband .fbody h4 { margin: 0 0 6px; font-size: 13px; }
.cg-hos .freeband .was { font-size: 11.5px; }
.cg-hos .freeband .btn.small { height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; }
.cg-hos .freeband .store, .cg-hos .freeband .ends { top: 6px; padding: 2px 6px; font-size: 10px; }
.cg-hos .freeband .store { left: 6px; }
.cg-hos .freeband .ends { right: 6px; }
.cg-hos .freeband .ends .ms { font-size: 12px; }
.cg-hos .freeband .fapp .store { background: var(--grad); }
.cg-hos .freeband .more2 { margin-left: 4px; }
@media (max-width: 1180px) {
  .cg-hos .row.free { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
}
@media (max-width: 760px) {
  .cg-hos .row.free { grid-auto-columns: 44%; }
}
@media (max-width: 560px) {
  .cg-hos .row.free { grid-auto-columns: 58%; }
}

/* 4. The middle news column, tinted (three columns only exist above 1180px). */
@media (min-width: 1181px) {
  .cg-hos .news3 > .ncol:nth-child(2) { margin: -14px -12px; padding: 14px 12px; border-radius: 18px;
    background: linear-gradient(160deg, color-mix(in srgb, #4a28c4 20%, var(--bg)) 0%, color-mix(in srgb, #06707f 12%, var(--bg)) 100%);
    border: 1px solid color-mix(in srgb, #4a28c4 28%, transparent); }
  .cg-hos .news3 > .ncol:nth-child(2) .ncol-h { border-bottom-color: color-mix(in srgb, #9d8cff 25%, transparent); }
}

/* s336: every second magazine section wears the middle news column's tint (owner 09-27). */
.cg-hos .msec--tint { padding: 16px 16px 18px; margin-left: -16px; margin-right: -16px; border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, #4a28c4 20%, var(--bg)) 0%, color-mix(in srgb, #06707f 12%, var(--bg)) 100%);
  border: 1px solid color-mix(in srgb, #4a28c4 28%, transparent); }
.cg-hos .msec--tint .msec-h { border-bottom-color: color-mix(in srgb, #9d8cff 25%, transparent); }
@media (max-width: 760px) {
  .cg-hos .msec--tint { margin-left: -8px; margin-right: -8px; padding: 12px 8px 14px; }
}