/* CAST Games bar and game switcher (shared/cg.js): the same on the home page and in every game. Even sizes everywhere
   (the owner: "all even and consistent"): a 56px top line and 52px tabs on phones, one 64px line on desktop */
.cg-bar { position: sticky; top: 0; z-index: 9000; background: #0a0a0f; /* solid: page text never shows through (16 Oct 2026) */ border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: Inter, -apple-system, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.cg-in { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "logo game sp acct" "tabs tabs tabs tabs"; align-items: center; column-gap: 10px; max-width: var(--cg-max, 1080px); margin: 0 auto; padding: 0 12px; } /* one width with the home page (css/home.css .wrap), audit L10 16 Oct 2026 */
.cg-logo { grid-area: logo; display: flex; align-items: center; height: 56px; }
.cg-logo img { height: 34px; width: auto; display: block; }
.cg-game { grid-area: game; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #141420; color: #fff; font: 900 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.cg-game i { font-style: normal; font-size: 11px; color: #a2a2b8; }
.cg-sp { grid-area: sp; }
/* the right of the bar: New Game (mid-game, always, 17 Oct 2026: it sat inside the account area, which a game with its
   accounts not launched hides for guests) and the account buttons */
.cg-right { grid-area: acct; display: flex; align-items: center; gap: 8px; }
.cg-acct { display: flex; align-items: center; gap: 8px; }
.cg-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 -12px; }
.cg-tab { display: grid; justify-items: center; align-content: center; gap: 3px; height: 52px; border: 0; border-bottom: 3px solid transparent; background: none; color: #8a8aa2; font: 800 11.5px/1 Inter, sans-serif; cursor: pointer; }
.cg-tab i { font-style: normal; font-size: 18px; line-height: 1; }
.cg-tab.is-on { color: #fff; border-bottom-color: #fff; }
@media (hover: hover) { .cg-tab:hover { color: #fff; } .cg-game:hover { border-color: rgba(255, 255, 255, .4); } }
@media (min-width: 900px) {
  .cg-in { grid-template-columns: auto auto auto 1fr auto; grid-template-areas: "logo game tabs sp acct"; column-gap: 16px; padding: 0 16px; }
  .cg-logo { height: 64px; } .cg-logo img { height: 38px; }
  .cg-tabs { display: flex; margin: 0; gap: 2px; }
  .cg-tab { grid-auto-flow: column; gap: 7px; height: 64px; padding: 0 14px; font-size: 14px; }
}
/* Inside a game: its own header goes (the bar does its job). Each game names its header in CG_GAME_HIDE (tools/build.py) */
html.cg-in-game .cg-hide { display: none !important; }

/* The switcher: a sheet from the bottom on phones, a box near the top on desktop */
html.cg-sheet-open, html.cg-sheet-open body { overflow: hidden; }
.cg-sheet { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 5, 10, .82); font-family: Inter, sans-serif; }
.cg-sheet[hidden] { display: none; }
.cg-sheet-box { position: relative; width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; box-sizing: border-box; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #0f0f18; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; }
@media (min-width: 900px) { .cg-sheet { align-items: flex-start; padding-top: 80px; } .cg-sheet-box { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); } }
.cg-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; cursor: pointer; }
.cg-home-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font: 900 13px/1 Inter, sans-serif; text-decoration: none; }
.cg-sw-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 5px; margin: 16px 0 4px; } /* wraps, never scrolls sideways */
.cg-sw-chip { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 8px 2px 7px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #d6d6e4; cursor: pointer; font-family: inherit; }
.cg-sw-chip span { font-size: 20px; line-height: 1; }
.cg-sw-chip b { font: 800 11.5px/1.1 Inter, sans-serif; white-space: nowrap; letter-spacing: -.1px; }
.cg-sw-chip.is-on { border-color: #fff; background: rgba(var(--sc), .35); color: #fff; }
@media (hover: hover) { .cg-sw-chip:not(.is-on):hover { border-color: rgba(255, 255, 255, .4); } }
.cg-sp-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; padding-left: 10px; border-left: 4px solid rgb(var(--sc)); }
.cg-sp-h b { font: 900 17px/1 Inter, sans-serif; }
.cg-sp-h small { font: 700 12px/1 Inter, sans-serif; color: #a2a2b8; }
.cg-sp-list { display: grid; gap: 8px; }
.cg-soon { margin: 0 0 4px; font: 700 12.5px/1.3 Inter, sans-serif; color: #7a7a92; }
/* Friends is a tab already: the account's own Friends button stays out of the bar */
.cg-acct [data-cast-friends] { display: none !important; }
/* Shop is a tab too (the owner, 15 Oct 2026: no double Shop): the account's own Shop button stays out of the bar */
.cg-acct [data-cast-shop] { display: none !important; }

/* A note under the bar (16 Oct 2026): a game's tabs before its accounts open */
.cg-note { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9500; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; padding: 10px 14px; border-radius: 12px; background: #1b1b2c; border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: 700 13px/1.35 Inter, sans-serif; text-align: center; text-wrap: balance; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.cg-note[hidden], .cg-acct[hidden] { display: none; }

/* A game's sticky scoreboard and desktop offer panel stick under the CAST Games bar, not behind it (16 Oct 2026, the
   owner's screenshot: 300 / 700 showed through the tabs). --cg-bar-h comes from cg.js */
html.cg-in-game .scoreboard { top: var(--cg-bar-h, 112px); }
@media (min-width: 900px) { html.cg-in-game .offer-panel { top: calc(var(--cg-bar-h, 64px) + 92px); } }

/* Sign In on the CAST Games bar is white: gold is kept for CAST Pass (the owner's rule; quality gate 16 Oct 2026) */
.cg-acct .ca-btn-head:not(.ca-btn-shop):not(.ca-btn-friends):not(.ca-btn-admin) { background: #fff; border-color: #fff; color: #0a0a0f; box-shadow: none; }
@media (hover: hover) { .cg-acct .ca-btn-head:not(.ca-btn-shop):not(.ca-btn-friends):not(.ca-btn-admin):hover { background: #e9e9f2; border-color: #e9e9f2; } }
/* 27-0's screens are fixed full-page boxes: inside CAST Games they start under the bar, so the strength bar and the draft
   header are never hidden behind it (quality gate, 16 Oct 2026) */
html.cg-in-game .screen.active { top: calc(var(--cg-bar-h, 112px) + env(safe-area-inset-top, 0px)); }
/* The switcher keeps one height whatever the sport (16 Oct 2026, the owner: it jumped as sports with more or fewer games
   were picked): the chips stay put and the games scroll underneath */
.cg-sheet-box.is-sw { height: min(80vh, 640px); height: min(80dvh, 640px); max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.cg-sheet-box.is-sw .cg-sw-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
/* Shop and Admin live in the CAST Games bar: a game's own copies (27-0's screen headers) never show a second time
   (16 Oct 2026, the owner) */
html.cg-in-game [data-cast-shop]:not(.cg-bar *), html.cg-in-game [data-cast-admin]:not(.cg-bar *) { display: none !important; }
/* On a phone 27-0's draft header has nothing left to show inside CAST Games: no empty strip above Team Strength */
@media (max-width: 899px) { html.cg-in-game #draft > .header { display: none !important; } }

/* The owner's HDMI monitor flickered round Admin (17 Oct 2026): on a mouse or trackpad screen the pop-up's surround and
   Admin's panel are solid colours, so there's nothing for the monitor to dither (cast-account.css has the same) */
@media (hover: hover) and (pointer: fine) {
  html.cg-on .ca-backdrop, html.cg-on .cp-confirm-backdrop { background: #07070c; }
  html.cg-on .ca-panel:has(.ca-admin) { background: #121119; }
}

/* Mid-game New Game, top right next to the profile: ⚙️ New Game (17 Oct 2026, the owner; not Reroll's 🔄). Phones stack
   the icon over its label, like the games' own tabs, so the longest game name still fits */
.cg-new { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: #141420; color: #fff; font: 900 13px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.cg-new[hidden] { display: none; }
.cg-new i { font-style: normal; font-size: 15px; }
@media (hover: hover) { .cg-new:hover { border-color: rgba(255, 255, 255, .4); } }
@media (max-width: 899px) { .cg-new { flex-direction: column; gap: 3px; height: auto; padding: 2px 4px; border: 0; background: none; font: 800 10px/1 Inter, sans-serif; color: #d6d6e4; } .cg-new i { font-size: 18px; line-height: 20px; } }

/* Phones: the game button and gaps a touch tighter, so the longest name (G1 WINNER SPINNER) fits beside New Game and the
   profile without pushing the logo off (17 Oct 2026) */
@media (max-width: 430px) {
  .cg-in { column-gap: 8px; }
  .cg-game { padding: 0 10px; gap: 5px; font-size: 12px; }
  .cg-right, .cg-acct { gap: 6px; }
}
@media (max-width: 400px) { .cg-logo img { height: 30px; } }

/* The sport's colour as a 3px line under the bar on its game pages and sport page (17 Oct 2026, the owner: one colour per
   sport, everywhere) */
html.cg-has-sport .cg-bar { border-bottom: 3px solid var(--cg-sport); }

/* A page for one mode that couldn't start by itself (cg.js bootIdle): the mode's card, Play and All Games, under the bar */
.cg-idle { position: fixed; left: 0; right: 0; bottom: 0; top: var(--cg-bar-h, 112px); z-index: 50; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px; box-sizing: border-box;
  background: radial-gradient(80% 55% at 50% 20%, rgba(var(--cg-sport-rgb, 255, 255, 255), .28), transparent 70%), #0a0a0f; color: #fff; font-family: Inter, -apple-system, system-ui, sans-serif; }
.cg-idle[hidden] { display: none; }
.cg-idle-box { width: 100%; max-width: 420px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.cg-idle-art { display: grid; place-items: center; width: 220px; height: 130px; border-radius: 22px; background: var(--c1, #141420); color: var(--ink, #fff); border: 1px solid rgba(255, 255, 255, .14); }
.cg-idle-art img { width: 190px; height: 110px; object-fit: contain; }
.cg-idle-art .cg-mark { font: 900 44px/1 Inter, sans-serif; }
.cg-idle-k { margin-top: 4px; font: 900 11px/1 Inter, sans-serif; letter-spacing: 1.3px; text-transform: uppercase; color: #a2a2b8; }
.cg-idle h1, .cg-idle h2 { margin: 0; font: 900 26px/1.15 Inter, sans-serif; text-wrap: balance; }
.cg-idle p { margin: 0; color: #c9c9d8; font: 600 15px/1.45 Inter, sans-serif; text-wrap: balance; }
.cg-idle-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 8px; border: 0; border-radius: 999px; background: #fff; color: #0a0a0f; font: 900 15px/1 Inter, sans-serif; cursor: pointer; }
.cg-idle-soon { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 18px; border-radius: 999px; border: 1.5px dashed rgba(255, 255, 255, .35); color: #fff; font: 900 13px/1 Inter, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.cg-idle-alt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; font: 800 13px/1 Inter, sans-serif; text-decoration: none; }
@media (hover: hover) { .cg-idle-btn:hover { background: #e9e9f2; } .cg-idle-alt:hover { border-color: rgba(255, 255, 255, .4); } }

/* The bar's first line always fits a phone (17 Oct 2026: on 360px the longest game names, New Game and Sign In pushed it
   wider than the screen and squeezed the logo): the logo keeps its size, New Game is its icon alone and Sign In is a size
   smaller; long names have a short bar name in shared/cg.js (pill) */
.cg-logo img { max-width: none; }
.cg-game { min-width: 0; }
@media (max-width: 430px) {
  .cg-new span { display: none; }
  .cg-new { padding: 0 2px; }
  .cg-new i { font-size: 22px; line-height: 34px; }
  .cg-acct .ca-btn-head:not(.ca-btn-shop):not(.ca-btn-friends):not(.ca-btn-admin) { padding-left: 10px; padding-right: 10px; font-size: 11px; }
}

/* The switcher grouped by game (18 Oct 2026, the owner: "I like groups but this looks too weird"): a plain label per game
   (its app icon and name, no card), then its modes as rows all the same size: the art on a tile in the game's colour, the
   name and its line. No tree lines, no indents, no coloured edges. The World Cup games last, labelled in World Cup blue */
.cg-sp-list { display: grid; gap: 16px; }
.cg-swg { display: grid; gap: 6px; }
.cg-swg-h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 800 12px/1.2 Inter, sans-serif; letter-spacing: .7px; text-transform: uppercase; color: #c3c3d2; }
.cg-swg-h img { flex: none; width: 22px; height: 22px; border-radius: 6px; }
.cg-swg-h span[aria-hidden] { font-size: 18px; line-height: 1; letter-spacing: 0; }
.cg-swg.is-wc .cg-swg-h { color: #38bdf8; }
.cg-swr { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 64px; padding: 6px 12px 6px 6px; border-radius: 14px;
  background: #15151e; border: 1px solid rgba(255, 255, 255, .07); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cg-swr.is-on { border-color: rgba(255, 255, 255, .55); background: #1c1c27; }
.cg-swr-art { position: relative; display: grid; place-items: center; height: 52px; border-radius: 10px; background: var(--c1, #1f1f2b); color: var(--ink, #fff); overflow: hidden; }
.cg-swr-art img { position: absolute; inset: 4px 5px; width: calc(100% - 10px); height: calc(100% - 8px); object-fit: contain; }
.cg-swr-art .cg-mark { font: 900 20px/1 Inter, sans-serif; }
.cg-swr-t { min-width: 0; display: grid; gap: 3px; }
.cg-swr-t b { font: 800 15px/1.2 Inter, sans-serif; color: #fff; text-wrap: balance; }
.cg-swr-t small { font: 600 12.5px/1.3 Inter, sans-serif; color: #a2a2b8; text-wrap: balance; }
@media (hover: hover) { .cg-swr:not(.is-on):hover { border-color: rgba(255, 255, 255, .3); } }
/* A game in progress in the switcher (18 Oct 2026): the live dot in the game's colour, the next pick and how long ago, and
   a small white Resume pill on the right */
.cg-swr.is-prog { grid-template-columns: 96px minmax(0, 1fr) auto; }
.cg-swr-live { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #fff !important; font-weight: 800 !important; }
.cg-swr-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; color: color-mix(in srgb, var(--c1) 55%, #fff); background: currentColor; animation: cg-swr-pulse 1.8s ease-out infinite; }
.cg-swr-live span { color: #a2a2b8; font-weight: 600; }
.cg-swr-go { flex: none; justify-self: end; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: #fff; color: #0a0a0f; font: 900 12px/1 Inter, sans-serif; white-space: nowrap; }
@keyframes cg-swr-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; } }
@media (prefers-reduced-motion: reduce) { .cg-swr-live i { animation: none; } }

/* The bar's own icons (17 Oct 2026, the owner's "Bold Gradient Glyphs"): in their own colours the whole time (18 Oct 2026,
   the owner: "it's gotta be colour, not grey"), the selected one lit with a soft glow on a white pill with a white label;
   the others in colour too, labels a touch softer than white. No dimming, no grey */
.cg-ti { position: relative; display: block; width: 26px; height: 26px; }
.cg-ti img { position: absolute; inset: 0; width: 26px; height: 26px; display: block; }
.cg-ti .is-on { opacity: 0; }
.cg-tab.is-on .cg-ti .is-on, .cg-new:hover .cg-ti .is-on { opacity: 1; }
.cg-tab.is-on .cg-ti .is-off, .cg-new:hover .cg-ti .is-off { opacity: 0; }
@media (hover: hover) { .cg-tab:hover .cg-ti .is-on { opacity: 1; } .cg-tab:hover .cg-ti .is-off { opacity: 0; } }
.cg-tab { border-bottom: 0; border-radius: 12px; color: #d2d2e0; }
.cg-tab.is-on { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (max-width: 899px) { .cg-tabs { padding: 0 6px 4px; gap: 4px; } .cg-tab { height: 50px; } }
@media (min-width: 900px) { .cg-tab { height: 52px; margin: 6px 0; align-items: center; } }
.cg-new .cg-ti { width: 24px; height: 24px; } .cg-new .cg-ti img { width: 24px; height: 24px; }
/* The account's Admin button: the same set's shield in place of its line drawing */
.cg-acct .ca-btn-admin > svg { display: none; }
.cg-acct .ca-btn-admin::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--cg-admin-off) center / contain no-repeat; }
@media (hover: hover) { .cg-acct .ca-btn-admin:hover::before { background-image: var(--cg-admin-on); } }

/* Card and logo art still on its way (speed pass, 18 Oct 2026, the owner: "sometimes the game shows an empty box"): a soft
   shimmer in the card's own colour until the picture is in, never an empty box. It only fades in after 0.15 s, so art the
   phone already has never flashes it, and it moves by transform alone, so a page full of them stays light on a phone.
   The pictures script at the top of each page's head marks the box .is-in once its picture loads (tools/build.py IMGFB) */
.cg-idle-art { position: relative; }
.cg-art:not(.is-in):has(> img), .cg-swr-art:not(.is-in):has(> img), .cg-idle-art:not(.is-in):has(> img) { overflow: hidden; }
.cg-art:not(.is-in):has(> img) { border-radius: 10px; }
.cg-art:not(.is-in):has(> img)::after, .cg-swr-art:not(.is-in):has(> img)::after, .cg-idle-art:not(.is-in):has(> img)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 300%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, .07) 35%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .07) 65%);
  animation: cg-art-wait .3s ease .15s forwards, cg-art-shine 1.4s linear .15s infinite;
}
@keyframes cg-art-wait { to { opacity: 1; } }
@keyframes cg-art-shine { from { transform: translateX(-66.667%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .cg-art:not(.is-in):has(> img)::after, .cg-swr-art:not(.is-in):has(> img)::after, .cg-idle-art:not(.is-in):has(> img)::after { animation: cg-art-wait .3s ease .15s forwards; }
}
/* The About section on every page (tools/seo.py, 18 Oct 2026, the SEO pass): what the page is, How to Play, questions
   and the sport's other games, in the page itself for search engines and for anyone who scrolls down */
.cg-about { box-sizing: border-box; width: 100%; max-width: 760px; margin: 36px auto 0; padding: 0 16px 8px; text-align: left; color: #d2d2e0; font: 500 15px/1.55 Inter, -apple-system, system-ui, sans-serif; }
html.play-boot .cg-about, #cgHome:empty ~ .cg-about { display: none !important; }
/* 27-0 draws each screen to fit a desktop window, so its About section shows on phones only (where the draft screen
   already scrolls) */
@media (min-width: 768px) { #draft > .cg-about { display: none !important; } }
.cg-about *, .cg-about *::before, .cg-about *::after { box-sizing: border-box; }
.cg-ab-in { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.cg-about h1 { margin: 0 0 8px; color: #fff; font: 900 23px/1.2 Inter, -apple-system, system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; text-wrap: balance; }
.cg-about h2 { margin: 26px 0 10px; color: #fff; font: 800 17px/1.3 Inter, -apple-system, system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-align: left; text-wrap: balance; }
.cg-about h3 { margin: 16px 0 8px; color: #a2a2b8; font: 800 12.5px/1.3 Inter, -apple-system, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.cg-about p, .cg-about li, .cg-about summary { text-wrap: pretty; }
.cg-ab-lede { margin: 0; }
.cg-ab-steps { margin: 0; padding: 0 0 0 22px; }
.cg-ab-steps li { margin: 0 0 6px; }
.cg-ab-faq details { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cg-ab-faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cg-ab-faq summary { cursor: pointer; color: #fff; font-weight: 700; }
.cg-ab-faq p { margin: 8px 0 0; }
.cg-ab-links, .cg-ab-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cg-ab-more { margin-top: 22px; }
.cg-ab-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cg-ab-list li { display: grid; gap: 6px; justify-items: start; }
.cg-ab-pill { display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font: 800 13.5px/1.2 Inter, -apple-system, system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.cg-ab-pill.is-main { background: #fff; border-color: #fff; color: #0a0a0f; }
@media (hover: hover) { .cg-ab-pill:hover { border-color: rgba(255, 255, 255, .4); } .cg-ab-pill.is-main:hover { background: #e9e9f2; } }
/* What a heading drawn by a game keeps when it is no longer the page's h1 (tools/seo.py one_h1): an h1's own defaults,
   at no weight, so the game's styles for it win as before */
:where(.cg-h1) { display: block; font-size: 2em; font-weight: bold; margin-block: .67em; }
/* CG_BRAND_BAR (tools: ~/cast-dev/brand/swap.sh, 18 Oct 2026): the CAST Games logo is near square (the triangle
   logo), so its box keeps the width the old wide logo had (the pill, tabs and Sign In stay exactly where they were)
   and the logo grows to fill the bar's line */
.cg-logo { width: 66.89px; justify-content: center; }
.cg-logo img { height: 42px; }
@media (min-width: 900px) { .cg-logo { width: 74.75px; } .cg-logo img { height: 48px; } }
@media (max-width: 400px) { .cg-logo { width: 59.02px; } .cg-logo img { height: 42px; } }
/* /CG_BRAND_BAR */

/* Each page's own address (18 Oct 2026): the tabs are links now, drawn exactly as the buttons were */
a.cg-tab { text-decoration: none; -webkit-user-select: none; user-select: none; }
a.cg-tab:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; }
/* Rankings, Stats, Friends, Profile and the Shop open as pages under the bar, so the bar stays: one tap from one page to
   the next, the open page's tab lit, Play back to the game. The page's own ✕ sits just under the bar */
html.cg-on .ca.is-full { top: var(--cg-bar-h, 108px); }
html.cg-on .ca.is-full .ca-panel { padding-top: 18px; }
html.cg-on .ca.is-full .ca-x { position: absolute; top: 14px; } /* scrolls away with the page (the bar's Play and Back still close it), never over a row */