/* CAST Games home and sport pages (js/home.js), the owner's "box of games" design (17 Oct 2026, phone first at 390).
   Every card wears its sport's colour (--c1 hex, --sc r,g,b, --ink the text on it: cricket is yellow with dark text) */
:root { --bg: #0a0a0f; --card: #141420; --line: rgba(255, 255, 255, .08); --muted: #a2a2b8; --gut: 16px; --cw: clamp(136px, calc((100vw - 78px) / 2), 158px); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: #f0f0f0; font-family: Inter, -apple-system, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
html { text-wrap-style: pretty; }
a { color: inherit; }
.wrap { max-width: var(--cg-max, 1080px); margin: 0 auto; padding: 14px var(--gut) 28px; } /* the bar's width too (shared/cg.css) */
.cg-sec { margin-top: 26px; }
.cg-sec[hidden], .cg-hero[hidden] { display: none; }

/* Section heads: Inter Tight italic, as the design */
.cg-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.cg-h h2 { margin: 0; font: italic 900 24px/1.05 'Inter Tight', Inter, sans-serif; letter-spacing: -.2px; color: #fff; text-wrap: balance; }
.cg-h h2.is-big { font-size: 26px; }
.cg-h small { font: 700 12px/1 Inter, sans-serif; color: var(--muted); white-space: nowrap; }
.cg-arw { display: none; margin-left: auto; gap: 6px; }
.cg-arw button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2a2a38; background: #17171f; color: #fff; font: 900 18px/1 Inter, sans-serif; cursor: pointer; }
@media (hover: hover) { .cg-arw button:hover { border-color: rgba(255, 255, 255, .4); } }

/* Sideways strips (phones): full width, the next card peeking, snapping card by card */
.cg-strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none;
  margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 2px; -webkit-overflow-scrolling: touch; }
.cg-strip::-webkit-scrollbar { display: none; }
.cg-strip::after { content: ''; flex: 0 0 calc(var(--gut) - 10px); } /* the last card's right-hand gutter (Safari leaves out the padding) */
.cg-strip > * { scroll-snap-align: start; }
.cg-strip.is-cards { padding-top: 13px; margin-top: -13px; } /* a New or Coming Soon chip sits on a card's top edge */
.cg-grid { padding-top: 13px; margin-top: -13px; }

/* ---------- Hero: the banner ads (css/hero-banners.css), 110px on phones with the next slide peeking, dots under it ---------- */
.cg-hero { margin-top: 0; }
.cg-hero-track { gap: 8px; }
.cg-hero-track > .cgb { flex: 0 0 calc(100% - 18px); }
.cg-hero-track.cg-n1 > .cgb { flex-basis: 100%; }
.cgb.is-potw .cgb-h.is-long { font-size: clamp(13px, 3.7vw, 15px); } /* a long username stays on one line */
.cgb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cg-dots { display: flex; justify-content: center; gap: 6px; min-height: 6px; padding-top: 14px; }
/* More room between the banner and its dots and arrows (18 Oct 2026, the owner): the dots sit 14px under it on phones
   and 18px on computers (the arrows were touching the banner's edge), and All Games straight after takes back most of
   it, so it moves only 1px on phones and 4px on computers */
.cg-hero + .cg-games { margin-top: 18px; }
.cg-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #3a3a4c; cursor: pointer; transition: width .2s ease, background .2s ease; }
.cg-dot.is-on { width: 18px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .cg-dot { transition: none; } }
/* Previous and Next either side of the dots (18 Oct 2026, the owner: "For desktop, a left and right button you can click,
   on either side of the banner dots"): computers only (wider than 768px, or a mouse); a phone swipes. Dark and round with a
   light chevron, a white glow on hover (gold stays for CAST Pass), a clear focus ring. Their negative margins keep the
   dots row at its own height (20px on phones, 24px on computers), so nothing under it moves */
.cg-dotrow { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
.cg-harw { display: none; flex: none; place-items: center; width: 28px; height: 28px; margin: 3px 0 -11px; padding: 0 0 2px; border-radius: 50%; border: 1px solid #2e2e3e;
  background: #17171f; color: #e4e4ee; font: 800 19px/1 Inter, sans-serif; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, color .15s ease; }
@media (min-width: 769px), (pointer: fine) { .cg-harw { display: inline-grid; } }
.cg-dotrow.is-one .cg-harw { display: none; }
@media (hover: hover) { .cg-harw:hover { color: #fff; border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 14px rgba(255, 255, 255, .3); } }
.cg-harw:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cg-harw { transition: none; } }
/* A Shop item slide opens the Shop at its row, lit white for a moment (js/home.js shopAt; gold stays for CAST Pass) */
.ca-sr.cg-shop-hi { animation: cgShopHi 2.4s ease both; }
@keyframes cgShopHi { 0%, 55% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 255, 255, .28); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .ca-sr.cg-shop-hi { animation: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); } }

/* ---------- All Games: a row per sport ---------- */
.cg-games { margin-top: 22px; }
.cg-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.cg-row { min-width: 0; }
.cg-row-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 30px; }
.cg-row-h i { flex: none; width: 6px; height: 22px; border-radius: 3px; background: var(--c1); box-shadow: 0 0 0 1px rgba(var(--sc), .5), 0 0 10px rgba(var(--sc), .35); }
.cg-row-h h3 { margin: 0; font: 900 17px/1.1 Inter, sans-serif; color: #fff; white-space: nowrap; }
.cg-row-h small { font: 700 12px/1 Inter, sans-serif; color: var(--muted); white-space: nowrap; }
.cg-pill { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #17171f; border: 1px solid #2a2a38; color: #fff; text-decoration: none; font: 800 12px/1 Inter, sans-serif; white-space: nowrap; }
@media (hover: hover) { .cg-pill:hover { border-color: rgba(255, 255, 255, .4); } }

/* A game card (18 Oct 2026, the owner: "text needs to be bigger and the logo bigger for sure, and more obviously
   incorporated"): the logo is the hero, edge to edge along the top (each logo is trimmed to its own pixels by the build),
   the line big and right under it. Cards in a row all take the tallest one's height */
.cg-c { position: relative; flex: 0 0 var(--cw); min-height: 150px; display: flex; flex-direction: column; gap: 7px; padding: 8px 7px 12px; border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 90%, #fff), color-mix(in srgb, var(--c1) 74%, #000)); border: 1px solid rgba(255, 255, 255, .1); -webkit-tap-highlight-color: transparent; }
.cg-art { position: relative; flex: none; aspect-ratio: 2.15 / 1; display: grid; place-items: center; }
.cg-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cg-art.is-mark { aspect-ratio: auto; height: 56px; font: 900 32px/1 Inter, sans-serif; letter-spacing: -2px; }
.cg-nm { flex: none; font: 900 12.5px/1.15 Inter, sans-serif; letter-spacing: -.2px; white-space: nowrap; }
.cg-tags { flex: none; display: flex; flex-wrap: wrap; gap: 4px; }
.cg-tag { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); font: 800 10.5px/1.2 Inter, sans-serif; white-space: nowrap; }
.cg-ln { flex: none; display: block; padding: 0 2px; font: 700 clamp(16px, 4.4vw, 17px)/1.2 Inter, sans-serif; letter-spacing: -.2px; color: color-mix(in srgb, var(--ink) 94%, transparent); text-wrap: balance; }
.cg-ln.is-cont { font-weight: 900; color: var(--ink); }
.cg-ln.is-cont::before { content: '\25B6\FE0E\00A0'; font-size: 12px; vertical-align: 2px; }
/* A game in progress (18 Oct 2026, the owner: "It should look a bit better when you go to continue a game, otherwise it
   just looks a bit stale"): the In Progress chip on the card's top edge (where NEW sits on other cards) with a softly
   pulsing dot in the sport's colour, the art a touch shorter, the picks as pips (a slim bar for a side bigger than 13),
   the next pick in Russo One, and a white Resume pill with how long ago. The same height as the cards beside it. Comes in
   gently, still for reduced motion */
.cg-c.is-prog { gap: 6px; }
.cg-c.is-prog .cg-art { aspect-ratio: 3 / 1; }
.cg-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 7px; border-radius: 999px; background: #12121a; color: #fff; font: 800 9px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .35); }
.cg-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; color: color-mix(in srgb, var(--c1) 45%, #fff); background: currentColor; animation: cg-pulse 1.8s ease-out infinite; }
.cg-c-live { position: absolute; top: -11px; left: 10px; z-index: 1; }
.cg-prog { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; animation: cg-prog-in .5s ease-out both; }
.cg-pips { display: flex; gap: 3px; }
.cg-pips i { flex: 1 1 0; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 24%, transparent); }
.cg-pips i.on { background: var(--ink); box-shadow: 0 0 6px color-mix(in srgb, var(--ink) 40%, transparent); }
.cg-pbar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 24%, transparent); overflow: hidden; }
.cg-pbar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.cg-prog-w { display: block; font: 400 15px/1.12 'Russo One', Inter, sans-serif; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.cg-prog-s { margin-top: -3px; font: 700 12px/1.2 Inter, sans-serif; color: color-mix(in srgb, var(--ink) 84%, transparent); white-space: nowrap; }
/* the Resume row pinned to the foot of the card (18 Oct 2026, the owner: "Make sure all those resume buttons are even and in
   line"): every Resume pill in a row at the same height, whatever is above it; the time centred on the pill */
.cg-prog-go { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: auto; padding-top: 1px; }
.cg-prog-go small { font: 700 10.5px/1 Inter, sans-serif; color: color-mix(in srgb, var(--ink) 80%, transparent); white-space: nowrap; }
.cg-resume { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 8px 0 9px; border-radius: 999px; background: #fff; color: #0a0a0f; font: 900 11.5px/1 Inter, sans-serif; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .28); }
/* the play triangle drawn, not a character (narrower than the fallback font's, so Resume and the time fit a 141px card) */
.cg-resume::before { content: ''; flex: none; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
@media (hover: hover) { a.cg-c.is-prog:hover .cg-resume { background: #ececf4; } }
@keyframes cg-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes cg-prog-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cg-live i, .cg-prog, .cg-d-prog { animation: none; } }
@media (hover: hover) { a.cg-c:hover { border-color: rgba(255, 255, 255, .55); } }
/* Coming Soon: dashed in the sport's colour, no link */
.cg-c.is-soon { color: #fff; background: color-mix(in srgb, var(--c1) 15%, #0c0c12); border: 1.5px dashed color-mix(in srgb, var(--c1) 75%, transparent); }
.cg-c.is-soon .cg-ln { color: var(--muted); }
.cg-c.is-soon .cg-tag { background: rgba(255, 255, 255, .1); color: #fff; }
.cg-c.is-soon img { opacity: .75; }
.cg-new-chip { position: absolute; top: -12px; right: 10px; z-index: 1; padding: 4px 7px; border-radius: 999px; background: #fff; color: #0a0a0f; font: 900 9px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.cg-totw-chip { position: absolute; top: -11px; right: 10px; z-index: 1; padding: 4px 8px; border-radius: 999px; background: #04203a; color: #e0f2fe; font: 800 9px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, .7), 0 2px 6px rgba(0, 0, 0, .35); } /* World Cup 8-0 while a Team of the Week is on (18 Oct 2026) */
.cg-soon-chip { position: absolute; top: -12px; right: 10px; z-index: 1; padding: 4px 7px; border-radius: 999px; background: var(--c1); color: var(--ink); font: 900 9px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }

/* ---------- Leaderboards: this week's #1 on each game ---------- */
.cg-lb { flex: 0 0 230px; display: flex; flex-direction: column; padding: 12px; border-radius: 16px; color: #fff;
  background: color-mix(in srgb, var(--c1) 18%, #0c0c12); border: 1px solid color-mix(in srgb, var(--c1) 62%, transparent); }
.cg-lb-top { display: flex; flex-direction: column; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cg-lb-h { display: flex; align-items: center; height: 30px; }
.cg-lb-h img, .cg-lb-h .cg-mk { flex: none; width: 56px; height: 30px; object-fit: contain; object-position: left center; }
.cg-mk { display: grid; place-items: center; font: 900 18px/1 Inter, sans-serif; letter-spacing: -1px; }
/* the game's name under its logo, the full width of the card, so a long name breaks into even halves */
.cg-lb-g { margin-top: 8px; min-height: 30px; font: 900 13px/1.15 Inter, sans-serif; text-wrap: balance; }
.cg-lb-k { margin-top: 6px; font: 700 11px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.cg-lb-1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 26px; margin-top: 5px; }
.cg-lb-n { min-width: 0; font: 900 15px/1.2 Inter, sans-serif; overflow-wrap: anywhere; }
.cg-lb-s { flex: none; font: 900 22px/1 Inter, sans-serif; color: color-mix(in srgb, var(--c1) 55%, #fff); white-space: nowrap; }
.cg-lb-s small { font: 800 11px/1 Inter, sans-serif; color: var(--muted); }
.cg-lb-1.is-none { align-items: center; font: 700 12.5px/1.3 Inter, sans-serif; color: #cfcfdc; }
.cg-lb-1.is-wait { align-items: center; }
.cg-lb-1.is-wait i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); background-size: 200% 100%; animation: cg-shine 1.4s linear infinite; }
.cg-lb-1.is-wait i:first-child { width: 58%; } .cg-lb-1.is-wait i:last-child { width: 24%; height: 20px; }
@keyframes cg-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cg-lb-1.is-wait i { animation: none; } }
.cg-lb-top, .cg-lb-me { margin-bottom: 10px; }
.cg-lb-me { margin-top: -2px; font: 700 12px/1.25 Inter, sans-serif; color: #cfcfdc; }
/* Beat It sits at the foot of every card, so the cards line up whatever is above it */
.cg-lb-go { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: var(--c1); color: var(--ink); text-decoration: none; font: 900 12.5px/1 Inter, sans-serif; cursor: pointer; }
/* The sign-in card for guests (first in the strip): white, never gold (gold is for CAST Pass) */
.cg-lb.is-in { background: #141420; border-color: rgba(255, 255, 255, .22); gap: 6px; }
.cg-lb-ico { font-size: 24px; line-height: 1; }
.cg-lb.is-in b { font: 900 15px/1.2 Inter, sans-serif; text-wrap: balance; }
.cg-lb.is-in small { font: 600 12px/1.35 Inter, sans-serif; color: var(--muted); text-wrap: pretty; }
.cg-lb.is-in .cg-lb-go { margin-top: auto; background: #fff; color: #0a0a0f; border-color: #fff; }
.cg-strip.is-lb { align-items: stretch; }

/* ---------- Daily Challenges ---------- */
.cg-d { flex: 0 0 236px; height: 150px; display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 55%, #0a1a10), #0b0b12 92%); border: 1px solid color-mix(in srgb, var(--c1) 60%, transparent); }
.cg-d-logo { flex: none; align-self: flex-start; height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.cg-d .cg-mk { flex: none; align-self: flex-start; width: 56px; height: 40px; font-size: 22px; }
.cg-d b { font: 900 14px/1.2 Inter, sans-serif; }
.cg-d-h { font: 700 12px/1.3 Inter, sans-serif; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.cg-d-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; margin-top: auto; } /* pinned to the card's foot: every Play and Results pill on the same line */
.cg-d-r { align-self: center; min-width: 0; font: 700 11.5px/1.2 Inter, sans-serif; color: #a7f3d0; text-wrap: balance; }
.cg-d-go { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 14px; border-radius: 999px; background: #fff; color: #0a0a0f; font: 900 12px/1 Inter, sans-serif; white-space: nowrap; }
/* A Daily Challenge under way (18 Oct 2026): the live chip top right, the three goes as pips, the next go and the best so
   far; Done Today once all three are used (its dot still) */
.cg-d { position: relative; }
.cg-d-live { position: absolute; top: 12px; right: 12px; }
.cg-d.is-prog .cg-d-logo { max-width: calc(100% - 104px); } /* room for the chip beside the logo */
.cg-live.is-done i { animation: none; color: rgba(255, 255, 255, .7); }
.cg-d-prog { display: flex; align-self: center; align-items: center; gap: 7px; min-width: 0; animation: cg-prog-in .5s ease-out both; }
.cg-d-prog .cg-pips { flex: none; width: 34px; }
.cg-d .cg-pips i { background: rgba(255, 255, 255, .22); }
.cg-d .cg-pips i.on { background: #fff; box-shadow: none; }
.cg-d-prog small { font: 800 12px/1.25 Inter, sans-serif; color: #fff; white-space: nowrap; }
@media (hover: hover) { .cg-d:hover, .cg-lb:hover { border-color: color-mix(in srgb, var(--c1) 40%, #fff); } }

/* ---------- A sport's own page: its cards in a grid ---------- */
.cg-sport-page { margin-top: 8px; }
.cg-row-h.is-page { gap: 12px; margin-bottom: 14px; }
.cg-row-h.is-page i { height: 44px; }
.cg-sp-t { min-width: 0; }
.cg-sp-t h1, .cg-sp-t h2 { margin: 0; font: italic 900 28px/1.05 'Inter Tight', Inter, sans-serif; color: #fff; }
.cg-sp-t small { display: block; margin-top: 4px; font: 700 12.5px/1.2 Inter, sans-serif; color: var(--muted); }
.cg-count { margin-left: auto; flex: none; padding: 6px 10px; border-radius: 999px; background: rgba(var(--sc), .22); border: 1px solid rgba(var(--sc), .55); color: #fff; font: 900 11.5px/1 Inter, sans-serif; white-space: nowrap; }
.cg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-grid .cg-c { min-height: 150px; }
.cg-two { display: grid; gap: 10px; margin-top: 24px; }
.cg-wide { text-decoration: none; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; min-height: 76px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: #fff; text-align: left; font: inherit; cursor: pointer; }
.cg-wide span { grid-row: span 2; font-size: 26px; line-height: 1; }
.cg-wide b { font: 900 16px/1.2 Inter, sans-serif; } .cg-wide small { font: 600 12.5px/1.35 Inter, sans-serif; color: var(--muted); text-wrap: balance; }
@media (hover: hover) { .cg-wide:hover { border-color: rgba(255, 255, 255, .35); } }

/* One footer pattern on the home page and in every game (audit L4/L5, 16 Oct 2026): pill links, then the copyright */
.cg-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 20px 16px 40px; border-top: 1px solid var(--line); }
.cg-foot a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #d6d6e4; font: 800 12.5px/1 Inter, sans-serif; text-decoration: none; }
@media (hover: hover) { .cg-foot a:hover { border-color: rgba(255, 255, 255, .4); color: #fff; } }
.cg-foot small { flex-basis: 100%; margin-top: 6px; text-align: center; color: #78788e; font: 700 12px/1.4 Inter, sans-serif; }
/* Until js/home.js draws the page the footer waits unseen at its place, so it never shows at the top and jumps down (speed pass, 18 Oct 2026: a layout shift of 0.15 on every phone load) */
#cgHome:empty ~ .cg-foot { visibility: hidden; }

/* ---------- Desktop: the same order, wider. Rows and Most Popular show every card (seven across, wrapping when a
   sport has more); the hero shows one 200px slide at a time; Leaderboards stay a strip with arrows; Dailies five across ---------- */
@media (min-width: 900px) {
  .wrap { padding: 24px var(--gut) 44px; }
  .cg-sec { margin-top: 34px; }
  .cg-strip { margin: 0; padding: 0 0 2px; scroll-padding: 0; }
  .cg-strip::after { display: none; }
  .cg-hero-track { gap: 12px; }
  .cg-hero-track > .cgb { flex: 0 0 100%; } /* one slide at a time, sliding */
  .cg-dots { padding-top: 18px; } .cg-harw { margin-top: 7px; } .cg-hero + .cg-games { margin-top: 29px; }
  .cgb.is-potw .cgb-h.is-long { font-size: clamp(22px, 2.6vw, 27px); }
  .cg-strip.is-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .cg-strip.is-cards .cg-c, .cg-grid .cg-c { min-height: 156px; }
  .cg-ln { font-size: 16px; } /* seven across, each card is a phone card's width */
  .cg-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cg-strip.is-daily { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .cg-d { height: 156px; }
  .cg-arw { display: inline-flex; align-self: center; }
  .cg-h h2 { font-size: 28px; } .cg-h h2.is-big { font-size: 30px; }
  .cg-two { grid-template-columns: 1fr 1fr; }
}