/* ==========================================================================
   Free Cyber Security Games - "Toybox Daylight"  (hub + game pages)
   A static file shared by both pages (Views/CyberSecurityGames/Index.cshtml and Game.cshtml link it in their
   FinalHeader section with a ?v= cache buster from StaticAssetVersion), so browsers fetch it once for both.
   Every class starts with cg- (checked against Front BS4, Silicon BS5, hs-mega-menu, toastr and the
   2026 chrome: none of them use a cg- class). Tokens live on .cg-root, not :root.
   ========================================================================== */
/* Metric-matched stand-in for Fredoka while the web font loads (Google Fonts, display=swap; both pages also preload
   the Latin woff2, PublicGameCatalog.FredokaWoff2, so a slow first visit rarely needs it): Arial Bold scaled to
   Fredoka's width and line metrics, so the logo and headings keep their size and do not reflow when Fredoka arrives */
@font-face { font-family: 'Fredoka Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 500 700; size-adjust: 94%; ascent-override: 103.5%; descent-override: 25%; line-gap-override: 0%; }
.cg-root {
  --cg-ink: #2F2A4F;
  --cg-ink-2: #433D69;
  --cg-muted: #5B5680;
  --cg-line: rgba(47, 42, 79, .14);
  --cg-cream: #FFF6E6;
  --cg-sky-0: #F5FAFF;
  --cg-sky-1: #EAF6FF;
  --cg-sky-2: #CFEAFF;
  --cg-sky: #52B4FF;
  --cg-coral: #FF7A5C;
  --cg-green: #3FCB7F;
  --cg-yellow: #FFC94D;
  --cg-teal: #36CBB1;
  --cg-pink: #FF7A8A;
  --cg-violet: #8C7CF0;
  --cg-gold: #FFC94D;
  --cg-silver: #D9E1EE;
  --cg-bronze: #F2A66B;
  --cg-night: #27225E;
  --cg-deep: #0F0C2C;
  --cg-accent: var(--cg-sky);
  --cg-r: 24px;
  --cg-drop: 0 6px 0 var(--cg-ink);
  --cg-drop-lg: 0 10px 0 var(--cg-ink);
  --cg-ease-pop: cubic-bezier(.2, 1.4, .4, 1);
  --cg-display: 'Fredoka', 'Fredoka Fallback', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --cg-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Player stage: full container width, height per the spec. 100vh first, 100svh where supported. */
  --cg-stage-h: clamp(560px, calc(100vh - 140px), 860px);
  position: relative;
  font-family: var(--cg-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cg-ink);
  background: var(--cg-sky-1);
  overflow-x: clip;
}
@supports (height: 100svh) { .cg-root { --cg-stage-h: clamp(560px, calc(100svh - 140px), 860px); } }
/* Phones held sideways (short touch screens): the cover fits the screen under the header; PLAY opens the overlay */
@media (max-height: 540px) and (pointer: coarse) { .cg-root { --cg-stage-h: max(240px, calc(100vh - 96px)); } }
@supports (height: 100svh) { @media (max-height: 540px) and (pointer: coarse) { .cg-root { --cg-stage-h: max(240px, calc(100svh - 96px)); } } }
.cg-root *, .cg-root *::before, .cg-root *::after { box-sizing: border-box; }
/* The Front theme (assets/css/theme.min.css, loaded by every public layout) sets svg { margin-bottom: -8px }
   on every SVG. Inside a centred grid that drops an icon 4px low (the play buttons, the empty crown), and it
   pushed the hero's cloud edge 8px below where it is positioned. */
.cg-root svg { margin-bottom: 0; }
/* Element resets: the scope sits in :where(), so each reset weighs exactly as much as the themes' own element
   rules (0,0,1) and wins on source order, while every cg- class rule (0,1,0) still beats it without !important */
:where(.cg-root) h1, :where(.cg-root) h2, :where(.cg-root) h3, :where(.cg-root) h4 { font-family: var(--cg-display); font-weight: 700; color: var(--cg-ink); margin: 0; letter-spacing: 0; line-height: 1.12; }
:where(.cg-root) p { margin: 0 0 1em; }
:where(.cg-root) ul, :where(.cg-root) ol { margin: 0; padding: 0; list-style: none; }
:where(.cg-root) dl, :where(.cg-root) dd { margin: 0; }
:where(.cg-root) img { max-width: 100%; }
:where(.cg-root) a:not([class]) { color: #3B33B5; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(.cg-root) a:not([class]):hover { color: var(--cg-ink); }
:where(.cg-root) button { font-family: inherit; }
.cg-root :focus-visible { outline: 3px solid var(--cg-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--cg-yellow); }
/* On the dark surfaces (team panel, game-page breadcrumb) an ink ring would vanish and the yellow halo would merge
   with a yellow button: a white ring instead (14:1 on the panel), and buttons keep their drop shadow */
.cg-root .cg-team__panel :focus-visible, .cg-root .cg-crumbs :focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: none; }
.cg-root .cg-team__panel .cg-btn:focus-visible { box-shadow: 0 5px 0 var(--cg-deep); }
/* Focus targets set by script (tabindex=-1: the claim dialog while it saves, the success title) show no ring */
.cg-root [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.cg-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Container: the same box as the site header's Silicon .container (97% from 500px, 95% from 768px,
   1320px from 1400px, 12px padding), so page content lines up with the logo at every width */
.cg-wrap { width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 500px) { .cg-wrap { max-width: 97%; padding: 0 12px; } }
@media (min-width: 768px) { .cg-wrap { max-width: 95%; } }
@media (min-width: 1400px) { .cg-wrap { max-width: 1320px; } }

.cg-section { position: relative; padding: 72px 0; }
@media (min-width: 992px) { .cg-section { padding: 104px 0; } }

/* ---------- Type ---------- */
.cg-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 14px 5px; background: #fff; border: 2px solid var(--cg-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--cg-ink); font: 600 .8125rem/1.2 var(--cg-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink); transform: rotate(-2deg); }
.cg-eyebrow i { font-size: 1.05rem; color: var(--cg-coral); }
.cg-root .cg-h2 { font: 700 clamp(2rem, 1.35rem + 2.4vw, 3.25rem)/1.05 var(--cg-display); color: var(--cg-ink); margin: 0 0 14px; }
.cg-root .cg-h2, .cg-lede, .cg-qa__q { text-wrap: balance; }
.cg-root p { text-wrap: pretty; }
.cg-mark { position: relative; white-space: nowrap; z-index: 0; }
.cg-mark::after { content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .04em; height: .38em; background: var(--cg-yellow); border-radius: .2em; transform: rotate(-1.5deg); z-index: -1; }
.cg-lede { font-size: 1.125rem; line-height: 1.6; color: var(--cg-ink-2); max-width: 44rem; }
.cg-head { margin-bottom: 36px; }
.cg-head--center { text-align: center; }
.cg-head--center .cg-lede { margin-left: auto; margin-right: auto; }
.cg-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.cg-head--row .cg-lede { margin-bottom: 0; }
.cg-h3 { font: 700 1.3rem/1.2 var(--cg-display); margin: 0 0 12px; }

/* ---------- Buttons ---------- */
.cg-btn { --b: var(--cg-yellow); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 52px; padding: .65em 1.35em .6em; border: 3px solid var(--cg-ink); border-radius: 999px; background-color: var(--b); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); color: var(--cg-ink); font: 700 1.125rem/1 var(--cg-display); letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 5px 0 var(--cg-ink); cursor: pointer; transition: transform .18s var(--cg-ease-pop), box-shadow .18s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cg-btn i { font-size: 1.3em; line-height: 0; }
.cg-btn:hover, .cg-btn:focus { color: var(--cg-ink); text-decoration: none; }
.cg-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--cg-ink); }
.cg-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cg-ink); }
.cg-btn[disabled] { cursor: not-allowed; filter: grayscale(.4); opacity: .75; transform: none; }
.cg-btn--green { --b: var(--cg-green); }
.cg-btn--white { --b: #fff; background-image: none; }
.cg-btn--lg { min-height: 58px; font-size: 1.25rem; padding: .7em 1.5em .65em; }
.cg-btn--sm { min-height: 42px; font-size: 1rem; padding: .5em 1.05em .45em; box-shadow: 0 4px 0 var(--cg-ink); }
.cg-btn--block { width: 100%; }
.cg-linkbtn { background: none; border: 0; padding: 8px 6px; font: 600 1rem/1.2 var(--cg-display); color: var(--cg-ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; cursor: pointer; }
.cg-linkbtn:hover { color: var(--cg-ink); }
.cg-arrow { display: inline-flex; align-items: center; gap: 4px; font: 600 1.0625rem/1.2 var(--cg-display); color: var(--cg-ink); text-decoration: none; border-bottom: 3px solid var(--cg-yellow); padding-bottom: 2px; }
.cg-arrow:hover { color: var(--cg-ink); text-decoration: none; border-bottom-color: var(--cg-coral); }
.cg-arrow i { transition: transform .2s ease; }
.cg-arrow:hover i:last-child { transform: translateX(3px); }

/* ---------- Chips, pills, stickers ---------- */
.cg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 4px; border: 2px solid var(--cg-ink); border-radius: 999px; background: #fff; font: 600 .875rem/1.2 var(--cg-display); color: var(--cg-ink); white-space: nowrap; }
.cg-chip i { font-size: 1.05rem; }
.cg-chip--ink { background: var(--cg-ink); color: #fff; }
.cg-chip--yellow { background: var(--cg-yellow); }
a.cg-chip--link { text-decoration: none; transition: transform .18s var(--cg-ease-pop), background-color .2s ease; }
a.cg-chip--link:hover { color: var(--cg-ink); background: var(--cg-yellow); transform: translateY(-2px); }
.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--cg-sky-1); border: 1.5px solid rgba(47, 42, 79, .25); font-weight: 700; color: var(--cg-ink-2); white-space: nowrap; }
.cg-pill i { font-size: .9rem; }
.cg-pill--won { background: var(--cg-yellow); border-color: var(--cg-ink); color: var(--cg-ink); }
.cg-pill--open { background: #fff; border-style: dashed; color: var(--cg-muted); }
.cg-new { position: absolute; display: grid; place-items: center; width: 66px; height: 66px; font: 700 .95rem/1 var(--cg-display); letter-spacing: .05em; text-transform: uppercase; color: var(--cg-ink); transform: rotate(12deg); filter: drop-shadow(0 3px 0 var(--cg-ink)); z-index: 3; }
.cg-new svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-new path { fill: var(--cg-pink); stroke: var(--cg-ink); stroke-width: 5; stroke-linejoin: round; }
.cg-new span { position: relative; }
.cg-medal { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--cg-ink); border-radius: 50%; background: var(--m); background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); font: 700 1rem/1 var(--cg-display); color: var(--cg-ink); box-shadow: 0 2px 0 var(--cg-ink); }
.cg-medal--1 { --m: var(--cg-gold); }
.cg-medal--2 { --m: var(--cg-silver); }
.cg-medal--3 { --m: var(--cg-bronze); }
.cg-you { flex: none; padding: 2px 6px 1px; border-radius: 6px; background: var(--cg-ink); color: #fff; font: 700 .65rem/1.2 var(--cg-display); letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   HUB - hero (title on the calm left sky of the art; white nav stays readable)
   ========================================================================== */
.cg-hero { position: relative; isolation: isolate; color: var(--cg-ink); background: linear-gradient(90deg, #B58BE3 0%, #957FEA 18%, #827AF0 38%, #7C79F4 58%, #6E6FEC 82%, #6F6CEC 100%); overflow: hidden; padding-top: 104px; }
.cg-hero::before { /* header scrim */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 260px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(33, 27, 86, .86) 0, rgba(33, 27, 86, .55) 96px, rgba(33, 27, 86, 0) 100%); }
.cg-hero__art { position: relative; z-index: 0; display: block; margin: -110px 0 0; height: 330px; }
.cg-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 70%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
.cg-hero__inner { position: relative; z-index: 2; }
.cg-hero__copy { position: relative; max-width: 600px; }
.cg-hero__card { position: relative; margin: 26px 0 0; padding: 18px 22px 20px; background: #fff; border: 3px solid var(--cg-ink); border-radius: 22px; box-shadow: var(--cg-drop); max-width: 560px; }
.cg-hero__card p { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.55; color: var(--cg-ink-2); }
.cg-hero__card p strong { color: var(--cg-ink); }
/* Quick play: every game as a small art tile inside the hero card, so game art and a one-tap way in are in the
   first screen at every width (the full tiles follow in the library) */
.cg-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.cg-quick__item { display: flex; min-width: 0; }
.cg-quick__game { --cg-accent: var(--cg-sky); flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 7px; border: 3px solid var(--cg-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cg-ink); color: var(--cg-ink); text-decoration: none; transition: transform .18s var(--cg-ease-pop), box-shadow .18s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.cg-quick__game:hover, .cg-quick__game:focus { color: var(--cg-ink); text-decoration: none; }
/* Lift only, no tilt: rotating a 26px card re-rasterises its play icon and the triangle visibly shifts in its
   circle. 4px is a whole number of device pixels at 100/125/150/175/200% scaling, so nothing re-snaps either. */
.cg-quick__game:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--cg-ink); background: var(--cg-sky-0); }
.cg-quick__game:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cg-ink); }
.cg-quick__art { position: relative; flex: none; width: 68px; height: 56px; border: 2px solid var(--cg-ink); border-radius: 12px; overflow: hidden; background: var(--cg-accent); }
.cg-quick__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cg-quick__game:hover .cg-quick__art img { transform: scale(1.08); }
.cg-quick__play { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--cg-ink); border-radius: 50%; background: var(--cg-accent); background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); }
/* The play path is drawn 2 units right of its 24-unit viewBox centre - the usual optical nudge for a play
   triangle - so the three play icons centre the SVG box itself and add no margin or transform. */
.cg-quick__play svg { width: 12px; height: 12px; }
.cg-quick__play path { fill: var(--cg-ink); }
.cg-quick__text { display: flex; flex-direction: column; min-width: 0; }
.cg-quick__name { font: 700 1.125rem/1.1 var(--cg-display); color: var(--cg-ink); }
.cg-quick__meta { margin-top: 3px; font-size: .8125rem; font-weight: 700; line-height: 1.25; color: var(--cg-muted); }
.cg-hero__browse { font-size: 1rem; }
/* Returning legacy player: one line at the top of the hero card; plain inline text, so it wraps cleanly on phones */
.cg-hero__card .cg-hero__resume { margin: 0 0 14px; padding: 8px 12px; border: 2px solid var(--cg-ink); border-radius: 14px; background: #FFF1C2; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--cg-ink); }
.cg-hero__resume > .bx-joystick { font-size: 1.2rem; vertical-align: -3px; }
.cg-hero__resume a { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--cg-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.cg-hero__resume a:hover, .cg-hero__resume a:focus { color: var(--cg-ink); text-decoration-color: var(--cg-coral); }
@media (max-width: 419.98px) { .cg-quick__game { flex-direction: column; align-items: flex-start; gap: 8px; padding: 7px; } .cg-quick__art { width: 100%; height: 64px; } .cg-quick__name { font-size: 1.05rem; } }
.cg-hero__chips { margin-top: 18px; }
.cg-hero__chips .cg-chip { box-shadow: 0 3px 0 var(--cg-ink); }
.cg-hero__clouds { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: 56px; display: block; pointer-events: none; }
.cg-hero__clouds path { fill: var(--cg-sky-1); }
.cg-spark { position: absolute; width: 30px; height: 30px; color: #fff; pointer-events: none; z-index: 3; animation: cg-twinkle 2.8s ease-in-out infinite; }
.cg-spark--y { color: var(--cg-yellow); }
.cg-spark path { fill: currentColor; stroke: var(--cg-ink); stroke-width: 2.2; stroke-linejoin: round; }
@media (max-width: 991.98px) { .cg-spark { display: none; } }
@media (min-width: 576px) { .cg-hero__art { height: 420px; } }
@media (min-width: 768px) { .cg-hero { padding-top: 120px; } .cg-hero__art { height: 480px; margin-top: -150px; } }
@media (min-width: 992px) {
  .cg-hero { display: flex; align-items: flex-start; min-height: clamp(640px, 92vh, 860px); padding: 128px 0 110px; }
  .cg-hero__art { position: absolute; left: 0; right: 0; bottom: 0; height: auto; margin: 0; }
  .cg-hero__art img { height: auto; aspect-ratio: 2240 / 960; }
  .cg-hero__inner { width: 100%; }
  .cg-hero__clouds { height: 72px; }
}
@media (min-width: 992px) and (max-aspect-ratio: 16/10) { .cg-hero__art img { min-height: 560px; object-position: 22% 100%; } }

/* ---------- The title logo (hub H1): Security Architect Simulator logo treatment ---------- */
.cg-logo { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0; font: 700 clamp(3.9rem, 2.2rem + 6.4vw, 6.5rem)/.9 var(--cg-display); letter-spacing: .005em; }
.cg-root .cg-logo { font-family: var(--cg-display); line-height: .9; }
.cg-logo__row { display: flex; align-items: center; gap: .12em; }
.cg-logo__word { --c: var(--cg-sky); display: block; color: var(--c); -webkit-text-stroke: .125em var(--cg-ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--cg-ink), 0 .13em .2em rgba(47, 42, 79, .28); transform: rotate(-3deg); animation: cg-logo-pop .7s var(--cg-ease-pop) both; padding: 0 .06em; }
.cg-logo__word--1 { --c: #52B4FF; animation-delay: .15s; }
.cg-logo__word--2 { --c: #FF7A5C; transform: rotate(-3deg) translateX(.32em); animation-delay: .25s; margin-top: -.02em; }
.cg-logo__word--3 { --c: #3FCB7F; transform: rotate(-3deg) translateX(.1em); animation-delay: .35s; margin-top: -.02em; }
.cg-logo__free { position: relative; display: grid; place-items: center; flex: none; width: 1.02em; height: 1.02em; margin-right: .02em; transform: rotate(-12deg); animation: cg-sticker-pop .8s var(--cg-ease-pop) .5s both; filter: drop-shadow(0 .05em 0 var(--cg-ink)); }
.cg-logo__free svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cg-logo__free span { position: relative; font-size: .3em; letter-spacing: .03em; color: var(--cg-ink); text-transform: uppercase; }
@media (max-width: 640px) { .cg-logo__word { -webkit-text-stroke-width: .13em; } }
@keyframes cg-logo-pop { from { opacity: 0; transform: rotate(-8deg) scale(.6); } }
@keyframes cg-sticker-pop { from { opacity: 0; transform: rotate(-60deg) scale(.2); } }
@keyframes cg-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.72) rotate(18deg); opacity: .75; } }

/* ==========================================================================
   Library + tiles (art-first game covers)
   ========================================================================== */
.cg-library { padding-top: 40px; background:
    radial-gradient(ellipse 340px 90px at 8% 18%, rgba(255, 255, 255, .9), transparent 70%),
    radial-gradient(ellipse 420px 110px at 92% 62%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(180deg, var(--cg-sky-1) 0%, #DDF0FF 100%); }
@media (min-width: 992px) { .cg-library { padding-top: 56px; } }
.cg-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 1rem/1.2 var(--cg-display); color: var(--cg-ink-2); }
.cg-count b { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 2px solid var(--cg-ink); border-radius: 999px; background: var(--cg-green); color: var(--cg-ink); font-weight: 700; box-shadow: 0 3px 0 var(--cg-ink); }

/* 1 column on phones, 2 on tablets and small laptops (an odd last tile spans the row as a wide banner),
   3 from 1200px. Grows to 4+ games without changes. */
.cg-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-grid__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cg-grid__item:last-child:nth-child(odd) .cg-tile__art { aspect-ratio: 3 / 1; }
}
/* ...except a locked teaser: alone on the last row it becomes a slim banner (art on the left), so the one tile
   you cannot play never outweighs the games */
@media (min-width: 640px) and (max-width: 1199.98px) {
  .cg-grid__item:last-child:nth-child(odd) .cg-tile--locked { flex-direction: row; }
  .cg-grid__item:last-child:nth-child(odd) .cg-tile--locked .cg-tile__art { flex: 0 0 38%; aspect-ratio: auto; min-height: 200px; border-bottom: 0; border-right: 3px solid rgba(47, 42, 79, .7); border-radius: calc(var(--cg-r) - 3px) 0 0 calc(var(--cg-r) - 3px); }
  .cg-grid__item:last-child:nth-child(odd) .cg-tile--locked .cg-tile__body { justify-content: center; }
  .cg-grid__item:last-child:nth-child(odd) .cg-tile--locked .cg-tile__lock { top: 38%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 18px; font-size: 1.9rem; }
  .cg-root .cg-grid__item:last-child:nth-child(odd) .cg-tile--locked .cg-tile__title { font-size: 1.6rem; }
}
@media (min-width: 1200px) {
  .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .cg-grid__item:last-child:nth-child(odd) { grid-column: auto; }
  .cg-grid__item:last-child:nth-child(odd) .cg-tile__art { aspect-ratio: 4 / 3; }
}
.cg-grid__item { display: flex; min-width: 0; }

.cg-tile { --cg-accent: var(--cg-sky); --cg-rx: 0deg; --cg-ry: 0deg; position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--cg-ink); border-radius: var(--cg-r); box-shadow: var(--cg-drop); color: var(--cg-ink); text-decoration: none; transition: transform .3s var(--cg-ease-pop), box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
a.cg-tile:hover, a.cg-tile:focus { color: var(--cg-ink); text-decoration: none; }
a.cg-tile:hover, a.cg-tile:focus-visible { transform: perspective(900px) translateY(-8px) rotateX(var(--cg-rx)) rotateY(var(--cg-ry)) rotate(-.6deg); box-shadow: 0 14px 0 var(--cg-ink), 0 26px 44px -12px var(--cg-accent); }
/* Focus: a yellow halo inside an ink ring, so the indicator holds 3:1+ against the pale page and the art */
a.cg-tile:focus-visible { outline: 3px solid var(--cg-ink); outline-offset: 7px; box-shadow: 0 0 0 7px var(--cg-yellow), 0 14px 0 var(--cg-ink); }
a.cg-tile:active { transform: translateY(-2px); box-shadow: 0 6px 0 var(--cg-ink); }
.cg-tile__art { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--cg-r) - 3px) calc(var(--cg-r) - 3px) 0 0; overflow: hidden; border-bottom: 3px solid var(--cg-ink); background: var(--cg-accent); }
.cg-tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cg-art-pos, 50% 50%); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
a.cg-tile:hover .cg-tile__art img, a.cg-tile:focus-visible .cg-tile__art img { transform: scale(1.07); }
.cg-tile__art::after { content: ""; position: absolute; inset: 42% 0 0 0; background: linear-gradient(180deg, rgba(33, 28, 70, 0), rgba(33, 28, 70, .78)); pointer-events: none; }
.cg-tile__badges { position: absolute; top: 12px; left: 12px; right: 64px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.cg-tile__badges .cg-chip { box-shadow: 0 3px 0 var(--cg-ink); font-size: .8125rem; padding: 4px 10px 3px; }
.cg-tile .cg-new { top: -16px; right: -14px; }
.cg-tile__name { position: absolute; left: 16px; right: 82px; bottom: 14px; z-index: 2; margin: 0; }
.cg-tile--locked .cg-tile__name { right: 16px; }
.cg-tile__eyebrow { display: inline-block; margin: 0 0 5px; padding: 3px 9px 2px; border-radius: 8px; background: var(--cg-ink); color: #fff; font: 600 .75rem/1.2 var(--cg-display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.cg-root .cg-tile__title { display: block; font: 700 clamp(1.9rem, 1.35rem + 1vw, 2.3rem)/.98 var(--cg-display); color: var(--cg-accent); -webkit-text-stroke: .15em var(--cg-ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--cg-ink); transform: rotate(-2deg); transform-origin: left bottom; letter-spacing: .01em; }
.cg-tile__play { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; border: 4px solid var(--cg-ink); border-radius: 50%; background: var(--cg-accent); background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); box-shadow: 0 5px 0 var(--cg-ink); color: var(--cg-ink); transition: transform .35s var(--cg-ease-pop); }
.cg-tile__play svg { width: 26px; height: 26px; }
.cg-tile__play path { fill: var(--cg-ink); }
.cg-tile__play i { font-size: 2rem; }
.cg-tile__play::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); opacity: 0; }
a.cg-tile:hover .cg-tile__play, a.cg-tile:focus-visible .cg-tile__play { transform: scale(1.14) rotate(-8deg); }
a.cg-tile:hover .cg-tile__play::before, a.cg-tile:focus-visible .cg-tile__play::before { animation: cg-ring 1.4s ease-out infinite; }
.cg-tile__body { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 18px; }
.cg-tile__tagline { margin: 0 0 14px; color: var(--cg-ink-2); font-size: 1rem; line-height: 1.5; }
.cg-tile__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: auto; padding-top: 14px; border-top: 2px dashed var(--cg-line); }
.cg-tile__best { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .875rem; line-height: 1.25; color: var(--cg-muted); }
.cg-tile__best b { display: block; font: 700 1.05rem/1.2 var(--cg-display); color: var(--cg-ink); }
.cg-tile__best > span:last-child > span { display: block; }
.cg-tile__crown { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--cg-ink); border-radius: 50%; background: var(--cg-yellow); font-size: 1.2rem; color: var(--cg-ink); }
.cg-tile__crown svg { width: 21px; height: 15px; }
.cg-tile__crown path { fill: #fff; stroke: var(--cg-ink); stroke-width: 3.2; stroke-linejoin: round; }
.cg-tile__crown--empty { background: #fff; border-style: dashed; color: var(--cg-muted); }
.cg-tile__crown--empty path { fill: none; stroke: #8A85A8; }
.cg-tile__meta { font-size: .8125rem; font-weight: 700; color: var(--cg-muted); }
@media (hover: hover) { a.cg-tile:hover .cg-tile__title { animation: cg-wiggle .5s ease; } }
@keyframes cg-wiggle { 0%, 100% { transform: rotate(-2deg); } 30% { transform: rotate(-5deg) scale(1.04); } 65% { transform: rotate(1deg) scale(1.04); } }
@keyframes cg-ring { 0% { opacity: .9; transform: scale(.9); } 80%, 100% { opacity: 0; transform: scale(1.25); } }

/* Locked teaser: greyed, a lock, not a link */
.cg-tile--locked { cursor: not-allowed; background: #F4F2FA; box-shadow: 0 6px 0 rgba(47, 42, 79, .5); border-color: rgba(47, 42, 79, .7); }
.cg-tile--locked .cg-tile__art { background: #8f8aa8; border-bottom-color: rgba(47, 42, 79, .7); }
.cg-tile--locked .cg-tile__art img { filter: grayscale(.6) brightness(.8) blur(1.5px); transform: scale(1.04); }
.cg-root .cg-tile--locked .cg-tile__title { color: #D9D3F2; }
.cg-tile__lock { position: absolute; top: 42%; left: 50%; z-index: 2; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border: 4px solid var(--cg-ink); border-radius: 26px; background: #fff; box-shadow: 0 6px 0 var(--cg-ink); font-size: 2.6rem; color: var(--cg-ink); transform: rotate(-6deg); }
.cg-tile--locked:hover .cg-tile__lock { animation: cg-shake .45s ease; }
@keyframes cg-shake { 0%, 100% { transform: rotate(-6deg); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-11deg); } 80% { transform: rotate(0); } }
.cg-tile__locked { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 2px dashed rgba(47, 42, 79, .55); border-radius: 999px; font: 600 .875rem/1 var(--cg-display); color: var(--cg-muted); }

/* Legacy tile art + cartridges */
.cg-tile__art--legacy { background: radial-gradient(circle at 50% 40%, #A99BFF 0, #6F5FE0 42%, #3A2F8F 100%); }
.cg-tile__art--legacy::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 6px), radial-gradient(circle at 16% 70%, #FFC94D 0 4px, transparent 5px), radial-gradient(circle at 86% 26%, #3FCB7F 0 5px, transparent 6px), radial-gradient(circle at 78% 64%, #FF7A8A 0 4px, transparent 5px), radial-gradient(circle at 24% 30%, #52B4FF 0 4px, transparent 5px); }
.cg-tile__art--legacy .cg-carts { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(1.25); z-index: 1; }
a.cg-tile:hover .cg-tile__art--legacy .cg-cart--a { transform: rotate(-14deg) translate(-6px, -4px); }
a.cg-tile:hover .cg-tile__art--legacy .cg-cart--b { transform: rotate(12deg) translate(6px, -6px); }
.cg-carts { position: relative; display: flex; flex: none; }
.cg-cart { position: relative; display: block; width: 82px; height: 98px; padding: 15px 7px 8px; border: 3px solid var(--cg-ink); border-radius: 10px 10px 14px 14px; background: var(--k); box-shadow: 0 5px 0 var(--cg-ink); transition: transform .35s var(--cg-ease-pop); }
.cg-cart::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 5px; background: repeating-linear-gradient(90deg, rgba(47, 42, 79, .55) 0 3px, transparent 3px 7px); border-radius: 2px; }
.cg-cart--a { --k: var(--cg-violet); transform: rotate(-9deg); z-index: 1; }
.cg-cart--b { --k: var(--cg-coral); margin-left: -8px; margin-top: 10px; transform: rotate(8deg); }
.cg-cart__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 100%; border: 2px solid var(--cg-ink); border-radius: 6px; background: #fff; text-align: center; font: 700 .5625rem/1.08 var(--cg-display); letter-spacing: 0; text-transform: uppercase; color: var(--cg-ink); }
.cg-cart__label i { font-size: 1.3rem; color: var(--cg-ink); }

/* Legacy strip (hub) */
.cg-legacy { display: grid; grid-template-columns: auto 1fr; gap: 18px 26px; align-items: center; margin-top: 48px; padding: 24px 26px; border: 3px dashed rgba(47, 42, 79, .55); border-radius: var(--cg-r); background: rgba(255, 255, 255, .7); }
.cg-legacy .cg-carts { margin: 0 6px 0 2px; }
.cg-legacy h3 { font-size: 1.4rem; margin-bottom: 4px; }
.cg-legacy p { margin: 0; color: var(--cg-ink-2); }
.cg-legacy .cg-btn { grid-column: 1 / -1; justify-self: start; }
.cg-legacy:hover .cg-cart--a { transform: rotate(-13deg); }
.cg-legacy:hover .cg-cart--b { transform: rotate(12deg); }
@media (min-width: 768px) { .cg-legacy { grid-template-columns: auto 1fr auto; } .cg-legacy .cg-btn { grid-column: auto; } }
@media (max-width: 575.98px) { .cg-legacy { grid-template-columns: 1fr; padding: 22px 18px; } .cg-legacy .cg-carts { transform: scale(.9); transform-origin: left center; } }

/* ==========================================================================
   Hall of Fame (hub podiums)
   ========================================================================== */
.cg-fame { background:
    radial-gradient(circle at 12% 20%, rgba(255, 201, 77, .28) 0 3px, transparent 4px) 0 0 / 46px 46px,
    linear-gradient(180deg, #FFF6E6 0%, #FFF1DA 100%); }
.cg-fame::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 44px; background: #DDF0FF; -webkit-mask: radial-gradient(34px 30px at 50% 0, #000 98%, transparent) 0 0 / 68px 44px repeat-x; mask: radial-gradient(34px 30px at 50% 0, #000 98%, transparent) 0 0 / 68px 44px repeat-x; }
.cg-fame__grid { display: grid; gap: 28px; }
@media (min-width: 992px) { .cg-fame__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.cg-podcard { --cg-accent: var(--cg-sky); position: relative; display: flex; flex-direction: column; padding: 20px 20px 22px; background: #fff; border: 3px solid var(--cg-ink); border-radius: var(--cg-r); box-shadow: var(--cg-drop); }
.cg-podcard__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.cg-podcard__thumb { flex: none; width: 60px; height: 60px; border: 3px solid var(--cg-ink); border-radius: 16px; object-fit: cover; background: var(--cg-accent); transform: rotate(-4deg); }
.cg-podcard__head h3 { font-size: 1.4rem; line-height: 1.15; }
.cg-podcard__head p { margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: var(--cg-muted); }
.cg-podcard__link { margin-left: auto; flex: none; }
.cg-podwrap { position: relative; margin-top: auto; }
.cg-podium { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 30px 0 0; padding: 0 4px; }
.cg-podium::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--cg-ink); border-radius: 3px; }
.cg-podium__spot { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.cg-podium__spot--1 { order: 2; --m: var(--cg-gold); }
.cg-podium__spot--2 { order: 1; --m: var(--cg-silver); }
.cg-podium__spot--3 { order: 3; --m: var(--cg-bronze); }
.cg-podium__spot--1::before { content: ""; position: absolute; left: 50%; top: -34px; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 77, .6) 0, rgba(255, 201, 77, .22) 38%, rgba(255, 201, 77, 0) 66%); z-index: -1; pointer-events: none; }
.cg-pmedal { position: relative; display: block; width: 50px; height: 66px; margin-bottom: 6px; }
.cg-podium__spot--1 .cg-pmedal { width: 60px; height: 79px; }
.cg-pmedal__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cg-pmedal__ribbon { fill: var(--cg-accent); stroke: var(--cg-ink); stroke-width: 3.5; stroke-linejoin: round; }
.cg-pmedal__ribbon--r { filter: brightness(.86); }
.cg-pmedal__coin { fill: var(--m); stroke: var(--cg-ink); stroke-width: 4; }
.cg-pmedal__ring { fill: none; stroke: rgba(47, 42, 79, .3); stroke-width: 2.5; }
.cg-pmedal__star { fill: #fff; stroke: var(--cg-ink); stroke-width: 2.2; stroke-linejoin: round; }
.cg-pmedal__shine { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; opacity: .8; }
.cg-pmedal__q { font: 700 22px/1 var(--cg-display); fill: var(--cg-muted); }
.cg-pmedal__crown { position: absolute; top: -21px; left: 50%; width: 36px; height: 26px; margin-left: -18px; transform: rotate(-10deg); overflow: visible; filter: drop-shadow(0 2px 0 var(--cg-ink)); }
.cg-pmedal__crown path { fill: var(--cg-yellow); stroke: var(--cg-ink); stroke-width: 3; stroke-linejoin: round; }
.cg-podium__spot--1 .cg-pmedal { animation: cg-float 3.2s ease-in-out infinite; }
@keyframes cg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.cg-podium__alias { display: block; max-width: 100%; font: 600 1rem/1.2 var(--cg-display); color: var(--cg-ink); overflow-wrap: anywhere; }
.cg-podium__score { font: 700 1.25rem/1.25 var(--cg-display); color: var(--cg-ink); font-variant-numeric: tabular-nums; }
.cg-podium__meta { margin-top: 3px; font-size: .75rem; }
.cg-podium__block { display: grid; place-items: start center; width: 100%; margin-top: 10px; padding-top: 8px; border: 3px solid var(--cg-ink); border-bottom-width: 0; border-radius: 14px 14px 0 0; background: var(--m); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%); font: 700 2.2rem/1 var(--cg-display); color: #fff; -webkit-text-stroke: 7px var(--cg-ink); paint-order: stroke fill; }
.cg-podium__spot--1 .cg-podium__block { height: 96px; }
.cg-podium__spot--2 .cg-podium__block { height: 70px; }
.cg-podium__spot--3 .cg-podium__block { height: 52px; }
.cg-podium__spot--open .cg-pmedal__coin { fill: #fff; stroke-dasharray: 6 5; }
.cg-podium__spot--open .cg-pmedal__ribbon { fill: #EDEAF7; }
.cg-podium__spot--open .cg-pmedal__shine { display: none; }
.cg-podium__spot--open .cg-podium__alias { color: var(--cg-muted); font-weight: 500; }
.cg-podium__spot--open .cg-podium__block { background: repeating-linear-gradient(-45deg, #F4F2FA 0 10px, #fff 10px 20px); border-style: dashed; -webkit-text-stroke-color: rgba(47, 42, 79, .35); }
.cg-podium--empty .cg-podium__spot--1::before { display: none; }
.cg-podium--empty .cg-pmedal { animation: none; }
/* Empty board: the sticker sits in the normal flow above three bare steps (the medals are hidden), so nothing overlaps */
.cg-podcard__empty { position: relative; width: min(100%, 380px); margin: 22px auto 0; transform: rotate(-1.5deg); padding: 16px 18px 18px; background: var(--cg-yellow); border: 3px solid var(--cg-ink); border-radius: 18px; box-shadow: var(--cg-drop); text-align: center; }
.cg-podium--empty { margin-top: 26px; }
.cg-podium--empty .cg-pmedal { display: none; }
.cg-podcard__empty .cg-podcard__empty-title { margin: 0 0 4px; font: 700 1.75rem/1.1 var(--cg-display); color: var(--cg-ink); }
.cg-podium--empty .cg-podium__alias, .cg-podium--empty .cg-podium__meta { display: none; }
.cg-podcard__empty p { margin: 0 0 12px; font-size: .9375rem; line-height: 1.45; color: var(--cg-ink); }
.cg-podcard__empty .cg-btn { margin-top: 2px; }
.cg-podcard__empty--quiet { background: #fff; transform: none; }
@media (max-width: 767.98px) {
  .cg-podcard__empty { margin-top: 18px; }
  .cg-podium { gap: 6px; padding: 0; }
  .cg-podium__alias { font-size: .8125rem; }
  .cg-podium__score { font-size: 1.1rem; }
}
.cg-fame__note { margin: 26px 0 0; text-align: center; font-size: .9375rem; color: var(--cg-muted); }

/* ==========================================================================
   How it works + who it's for (hub)
   ========================================================================== */
.cg-how { background: #fff; }
.cg-steps { position: relative; display: grid; gap: 22px; counter-reset: cg-step; }
@media (min-width: 768px) { .cg-steps { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 1200px) { .cg-steps { grid-template-columns: repeat(4, 1fr); } .cg-step:not(:last-child)::after { content: ""; position: absolute; left: 112px; right: -14px; top: 42px; border-top: 5px dashed rgba(47, 42, 79, .25); z-index: -1; } }
.cg-step { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 0 0 4px; }
.cg-step__node { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 0 18px; border: 4px solid var(--cg-ink); border-radius: 28px; background: var(--node, var(--cg-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 6px 0 var(--cg-ink); font-size: 2.4rem; color: var(--cg-ink); transform: rotate(var(--tilt, -4deg)); }
.cg-step__num { position: absolute; top: -12px; right: -14px; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--cg-ink); border-radius: 50%; background: #fff; font: 700 1.05rem/1 var(--cg-display); transform: rotate(8deg); }
.cg-step h3 { font-size: 1.4rem; margin-bottom: 6px; }
.cg-step p { margin: 0; color: var(--cg-ink-2); }
@media (max-width: 767.98px) { .cg-step { display: grid; grid-template-columns: 76px 1fr; gap: 0 16px; align-items: start; } .cg-step__node { grid-row: span 2; width: 72px; height: 72px; font-size: 2rem; border-radius: 22px; margin: 0; } .cg-step h3 { margin-top: 6px; } }

.cg-aud { margin-top: 96px; }
.cg-aud__intro { margin-bottom: 8px; }
.cg-aud__list { display: grid; gap: 22px; }
@media (min-width: 768px) { .cg-aud__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 991.98px) { .cg-aud__list { grid-template-columns: 1fr; } }
.cg-aud__card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: var(--cg-sky-0); border: 3px solid var(--cg-ink); border-radius: var(--cg-r); box-shadow: var(--cg-drop); }
.cg-aud__icon { display: grid; place-items: center; width: 58px; height: 58px; margin: -48px 0 14px; border: 3px solid var(--cg-ink); border-radius: 18px; background: var(--a); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--cg-ink); font-size: 1.8rem; color: var(--cg-ink); transform: rotate(var(--tilt)); }
.cg-aud__card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.cg-aud__card p { margin: 0 0 12px; color: var(--cg-ink-2); font-size: .98rem; }
.cg-aud__card .cg-arrow { margin-top: auto; align-self: flex-start; font-size: 1rem; }
.cg-aud__list { padding-top: 26px; }

/* ==========================================================================
   Team CTA (hub + game page)
   ========================================================================== */
.cg-team { background: #fff; padding-top: 0; }
.cg-team__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 24px; border: 3px solid var(--cg-ink); border-radius: 32px; background: var(--cg-night); background-image:
    radial-gradient(circle at 3% 4%, var(--cg-yellow) 0 5px, transparent 6px),
    radial-gradient(circle at 97.5% 3%, var(--cg-coral) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 98.5%, var(--cg-green) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 3%, var(--cg-sky) 0 4px, transparent 5px),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(140, 124, 240, .45), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0 100%, rgba(82, 180, 255, .25), transparent 70%);
  box-shadow: var(--cg-drop-lg); color: #fff; overflow: hidden; }
@media (min-width: 992px) { .cg-team__panel { grid-template-columns: 1.1fr .9fr; align-items: center; padding: 56px; } }
.cg-root .cg-team__panel .cg-h2 { color: #fff; }
.cg-team__panel .cg-eyebrow { background: var(--cg-yellow); }
.cg-team__text { color: #E4E1F7; font-size: 1.0625rem; }
.cg-ticks { display: grid; gap: 10px; margin: 0 0 28px; }
@media (min-width: 576px) { .cg-ticks { grid-template-columns: 1fr 1fr; } }
.cg-ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: #fff; line-height: 1.4; }
.cg-ticks i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--cg-green); color: var(--cg-ink); font-size: 1.1rem; }
.cg-root .cg-team__panel a:not([class]) { color: #fff; text-decoration-color: var(--cg-yellow); }
.cg-team__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cg-team__ctas .cg-btn--white { box-shadow: 0 5px 0 var(--cg-deep); border-color: var(--cg-deep); }
/* Below 400 px "Explore the training library" is wider than the panel's column (320 px viewport = 234 px):
   it wraps instead of being clipped by the panel's overflow:hidden (WCAG 1.4.10) */
@media (max-width: 399.98px) { .cg-team__ctas .cg-btn { white-space: normal; text-align: center; } }
.cg-team__small { margin: 16px 0 0; font-size: .875rem; color: #C9C4EC; }
.cg-team__small a { display: inline-block; margin-top: 4px; }
.cg-team__art { position: relative; min-height: 300px; }
.cg-team__card { position: absolute; width: 74%; border: 4px solid var(--cg-deep); border-radius: 20px; box-shadow: 0 8px 0 var(--cg-deep); overflow: hidden; aspect-ratio: 16 / 9; }
.cg-team__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-team__card--a { top: 0; left: 0; transform: rotate(-6deg); }
.cg-team__card--b { top: 70px; right: 0; transform: rotate(5deg); }
.cg-team__board { position: absolute; left: 6%; bottom: 0; width: min(300px, max(74%, min(210px, 92%))); padding: 14px 16px 12px; background: #fff; color: var(--cg-ink); border: 3px solid var(--cg-deep); border-radius: 18px; box-shadow: 0 8px 0 var(--cg-deep); transform: rotate(-2deg); }
.cg-team__board-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 1.05rem/1.2 var(--cg-display); }
.cg-team__board-title i { color: var(--cg-coral); font-size: 1.3rem; }
.cg-team__board li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 2px dashed var(--cg-line); font-weight: 600; font-size: .9375rem; }
.cg-team__board li b { margin-left: auto; font: 700 1rem/1 var(--cg-display); font-variant-numeric: tabular-nums; }
.cg-team__board .cg-medal { width: 26px; height: 26px; font-size: .85rem; border-width: 2px; }
@media (max-width: 575.98px) { .cg-team__art { min-height: 250px; } .cg-team__card--b { top: 40px; } }

/* ==========================================================================
   FAQ (details/summary, crawlable)
   ========================================================================== */
.cg-faq { background: var(--cg-sky-1); }
.cg-faq__layout { display: grid; gap: 28px; }
@media (min-width: 992px) { .cg-faq__layout { grid-template-columns: 340px 1fr; gap: 56px; align-items: start; } .cg-faq__intro { position: sticky; top: 110px; } .cg-root .cg-faq__intro .cg-h2 { font-size: 2.6rem; } }
.cg-faq__intro p { color: var(--cg-ink-2); }
.cg-faq__list { display: grid; gap: 14px; }
.cg-qa { background: #fff; border: 3px solid var(--cg-ink); border-radius: 18px; box-shadow: 0 4px 0 var(--cg-ink); scroll-margin-top: 110px; }
.cg-qa[open] { box-shadow: 0 6px 0 var(--cg-ink); }
.cg-qa summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; border-radius: 15px; }
.cg-qa summary::-webkit-details-marker { display: none; }
.cg-qa summary::marker { content: ""; }
.cg-root .cg-qa__q { flex: 1; margin: 0; font: 600 1.125rem/1.35 var(--cg-display); color: var(--cg-ink); }
.cg-qa__icon { flex: none; position: relative; width: 32px; height: 32px; border: 2px solid var(--cg-ink); border-radius: 50%; background: var(--cg-yellow); transition: transform .3s var(--cg-ease-pop), background-color .2s; }
.cg-qa__icon::before, .cg-qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; background: var(--cg-ink); border-radius: 2px; }
.cg-qa__icon::after { transform: rotate(90deg); transition: transform .3s ease; }
.cg-qa[open] .cg-qa__icon { transform: rotate(180deg); background: var(--cg-green); }
.cg-qa[open] .cg-qa__icon::after { transform: rotate(0); }
.cg-qa summary:hover .cg-qa__icon { transform: scale(1.1); }
.cg-qa[open] summary:hover .cg-qa__icon { transform: rotate(180deg) scale(1.1); }
.cg-qa__a { padding: 0 18px 18px; color: var(--cg-ink-2); }
.cg-qa__a p:last-child { margin-bottom: 0; }
.cg-faq__more { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--cg-sky-0); border: 2px dashed rgba(47, 42, 79, .3); color: var(--cg-ink-2); font-size: .9375rem; }
.cg-faq__more i { font-size: 1.3rem; color: var(--cg-violet); }

/* ==========================================================================
   GAME PAGE - compact header: crumbs, then the H1 and chips on one row, then the stage
   ========================================================================== */
.cg-ghero { position: relative; padding: 94px 0 0; background:
    radial-gradient(ellipse 300px 70px at 12% 48%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(ellipse 380px 90px at 88% 36%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(180deg, #211B58 0, #2D2981 110px, #3F50C2 270px, #5B92EC 450px, #98CEFF 650px, var(--cg-sky-1) 860px); }
@media (max-width: 991.98px) { .cg-ghero { padding-top: 100px; } }
.cg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 10px; font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.cg-crumbs li { display: inline-flex; align-items: center; }
.cg-crumbs li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 0 7px; border-top: 2px solid rgba(255, 255, 255, .7); border-right: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); }
.cg-crumbs a { color: #fff; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, .35); }
.cg-crumbs a:hover { color: #fff; border-bottom-color: var(--cg-yellow); }
.cg-crumbs i { margin-right: 4px; font-size: .95rem; }
.cg-crumbs [aria-current] { color: #fff; }
.cg-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.cg-gtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font: 700 clamp(2.1rem, 1.55rem + 1.5vw, 3.05rem)/1 var(--cg-display); }
.cg-root .cg-gtitle { font-family: var(--cg-display); line-height: 1; }
.cg-gtitle__eyebrow { display: inline-block; padding: .34em .6em .28em; background: #fff; border: 3px solid var(--cg-ink); border-radius: 12px; box-shadow: 0 4px 0 var(--cg-ink); font-size: .32em; letter-spacing: .1em; text-transform: uppercase; color: var(--cg-ink); transform: rotate(-4deg); animation: cg-sticker-pop .6s var(--cg-ease-pop) .05s both; }
.cg-gtitle__words { display: inline-flex; flex-wrap: wrap; gap: 0 .24em; }
.cg-gtitle__word { display: block; color: var(--c, var(--cg-accent)); -webkit-text-stroke: .14em var(--cg-ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--cg-ink), 0 .14em .2em rgba(15, 12, 44, .35); transform: rotate(-3deg); animation: cg-logo-pop .7s var(--cg-ease-pop) .15s both; padding: 0 .04em; }
.cg-gtitle__word + .cg-gtitle__word { animation-delay: .25s; transform: rotate(-3deg) translateY(.05em); }
.cg-gchips { gap: 6px; }
.cg-gchips .cg-chip { box-shadow: 0 3px 0 var(--cg-ink); }
@media (max-width: 1399.98px) { .cg-gchips .cg-chip--opt { display: none; } }
@media (max-width: 575.98px) { .cg-gchips .cg-chip { font-size: .8125rem; padding: 4px 9px 3px; } .cg-ghead { margin-bottom: 14px; gap: 10px; } }

/* Player = stage + game bar. No ancestor of the stage may create a stacking context
   (z-index / transform / isolation), or the phone overlay would sit under the fixed site header. */
.cg-player { position: relative; border: 4px solid var(--cg-ink); border-radius: 28px; background: var(--cg-ink); box-shadow: 0 10px 0 var(--cg-ink), 0 30px 60px -20px rgba(33, 28, 90, .45); scroll-margin-top: 76px; }
.cg-stage { position: relative; width: 100%; height: var(--cg-stage-h); overflow: hidden; border-radius: 24px 24px 0 0; background: #1B1740; isolation: isolate; }
/* A game that needs a taller frame to fit without scrolling (PublicGamePresentation.StageMinHeight, passed in as
   --cg-stage-min) gets it on desktop widths, where the stage is at least 910px wide. The phone overlay's own
   height (.is-overlay) is more specific and still wins. */
@media (min-width: 992px) { .cg-stage { height: max(var(--cg-stage-h), var(--cg-stage-min, 0px)); } }
.cg-stage__cover { position: absolute; inset: 0; display: grid; place-items: center; }
.cg-stage__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cg-cover-pos, 50% 50%); transform: scale(1.02); transition: transform 6s ease; }
.cg-stage:hover .cg-stage__art { transform: scale(1.06); }
.cg-stage__shade { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(27, 23, 64, .45) 0, rgba(27, 23, 64, 0) 24%, rgba(27, 23, 64, 0) 52%, rgba(27, 23, 64, .62) 100%); }
@media (max-width: 767.98px) { .cg-stage__shade { background: linear-gradient(180deg, rgba(27, 23, 64, .55) 0, rgba(27, 23, 64, .2) 34%, rgba(27, 23, 64, 0) 52%, rgba(27, 23, 64, .3) 100%); } }
@media (min-width: 992px) { .cg-stage__shade { background:
    radial-gradient(ellipse 34% 40% at 22% 76%, rgba(27, 23, 64, .5), rgba(27, 23, 64, 0) 74%),
    linear-gradient(180deg, rgba(27, 23, 64, .45) 0, rgba(27, 23, 64, 0) 24%, rgba(27, 23, 64, 0) 64%, rgba(27, 23, 64, .4) 100%); } }
.cg-stage__top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.cg-stage__top .cg-chip { box-shadow: 0 3px 0 var(--cg-ink); }
/* PLAY + hint. The cover has no title (the H1 right above names the game) and PLAY stays off the art's hero, which
   sits in the middle of every crop: on the calm left from 992px (and on phones held sideways), low and centred on
   tablets, and near the top on upright phones, where it also stays in the first screen */
.cg-stage__cta { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px; text-align: center; }
@media (min-width: 992px) { .cg-stage__cta { left: 6%; right: auto; bottom: 13%; align-items: flex-start; gap: 20px; padding: 0; text-align: left; } }
@media (max-width: 767.98px) { .cg-stage__cta { top: 56px; bottom: auto; } }
@media (max-height: 540px) and (pointer: coarse) { .cg-stage__cta { left: 5%; right: auto; top: auto; bottom: 10%; align-items: flex-start; padding: 0; text-align: left; } }
.cg-stage__hint { margin: 0; padding: 7px 16px 6px; border-radius: 999px; background: rgba(27, 23, 64, .8); color: #fff; font: 600 .95rem/1.2 var(--cg-display); letter-spacing: .02em; }
.cg-play { position: relative; display: inline-flex; align-items: center; gap: 18px; padding: 14px 42px 14px 16px; border: 5px solid var(--cg-ink); border-radius: 999px; background: var(--cg-green); background-image: linear-gradient(180deg, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .08) 52%, rgba(0, 0, 0, .06) 100%); box-shadow: 0 10px 0 var(--cg-ink), 0 22px 40px rgba(15, 12, 44, .45); font: 700 clamp(2.4rem, 1.9rem + 2vw, 3.7rem)/1 var(--cg-display); letter-spacing: .04em; text-transform: uppercase; color: var(--cg-ink); cursor: pointer; transition: transform .2s var(--cg-ease-pop), box-shadow .2s ease; animation: cg-bob 2.4s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.cg-play::before { content: ""; position: absolute; inset: -14px; border-radius: 999px; border: 4px solid rgba(255, 255, 255, .8); animation: cg-ring 2.4s ease-out infinite; pointer-events: none; }
.cg-play__icon { display: grid; place-items: center; width: 1.45em; height: 1.45em; border: 4px solid var(--cg-ink); border-radius: 50%; background: #fff; }
.cg-play__icon svg { width: .62em; height: .62em; }
.cg-play__icon path { fill: var(--cg-ink); }
.cg-play:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 13px 0 var(--cg-ink), 0 26px 44px rgba(15, 12, 44, .5); animation-play-state: paused; }
.cg-play:active { transform: translateY(7px); box-shadow: 0 3px 0 var(--cg-ink), 0 8px 16px rgba(15, 12, 44, .4); }
.cg-play:focus-visible { outline: 4px solid #fff; outline-offset: 6px; box-shadow: 0 10px 0 var(--cg-ink), 0 0 0 12px var(--cg-yellow); }
@keyframes cg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 767.98px) {
  .cg-play { font-size: 2.2rem; padding: 10px 28px 10px 12px; gap: 12px; border-width: 4px; box-shadow: 0 7px 0 var(--cg-ink); }
  .cg-stage__hint { font-size: .8125rem; }
  .cg-stage__cta { gap: 14px; }
  .cg-stage__top { top: 10px; left: 10px; right: 10px; }
  .cg-stage__top .cg-chip { font-size: .75rem; padding: 3px 8px 2px; }
  .cg-stage__top .cg-chip--sound { display: none; }
}
@media (max-height: 540px) and (pointer: coarse) { .cg-play { font-size: 2rem; padding: 8px 26px 8px 10px; gap: 12px; } .cg-stage__cta { gap: 10px; bottom: 9%; } }
.cg-stage__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #1B1740; z-index: 1; }
.cg-stage__layer { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; padding: 20px; text-align: center; color: #fff; }
.cg-stage[data-state="loading"] .cg-stage__loader,
.cg-stage[data-state="ended"] .cg-stage__ended { display: grid; }
.cg-stage[data-state="playing"] .cg-stage__cover,
.cg-stage[data-state="loading"] .cg-stage__cta,
.cg-stage[data-state="loading"] .cg-stage__top,
.cg-stage[data-state="ended"] .cg-stage__cta,
.cg-stage[data-state="ended"] .cg-stage__top { visibility: hidden; }
.cg-stage__loader { background: rgba(27, 23, 64, .82); }
.cg-loader__dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.cg-loader__dots span { width: 22px; height: 22px; border: 3px solid var(--cg-ink); border-radius: 50%; background: var(--cg-yellow); animation: cg-hop .9s ease-in-out infinite; }
.cg-loader__dots span:nth-child(2) { background: var(--cg-coral); animation-delay: .12s; }
.cg-loader__dots span:nth-child(3) { background: var(--cg-green); animation-delay: .24s; }
.cg-loader__text { font: 600 1.25rem/1.3 var(--cg-display); margin: 0; }
@keyframes cg-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }
.cg-stage__ended { background: rgba(27, 23, 64, .7); backdrop-filter: blur(3px); }
.cg-endcard { width: min(460px, 100%); padding: 26px 24px 24px; background: #fff; color: var(--cg-ink); border: 4px solid var(--cg-ink); border-radius: 26px; box-shadow: var(--cg-drop-lg); }
.cg-root .cg-endcard__title { margin: 0 0 6px; font: 700 2.1rem/1.1 var(--cg-display); color: var(--cg-ink); }
.cg-endcard__sum { color: var(--cg-ink-2); margin-bottom: 18px; }
.cg-endcard__sum b { color: var(--cg-ink); }
.cg-endcard__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cg-endcard__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
@media (max-width: 767.98px) { .cg-endcard { padding: 18px 16px 16px; } .cg-root .cg-endcard__title { font-size: 1.6rem; } .cg-endcard__sum { font-size: .9rem; margin-bottom: 12px; } }
/* Overlay close: tucked into the top-left corner, which both games keep free of controls (Castle shows its logo
   there, Towers a label), and dimmed while a game runs; the invisible ::before keeps a 48px touch target */
.cg-stage__close { position: absolute; top: max(5px, env(safe-area-inset-top)); left: max(5px, env(safe-area-inset-left)); z-index: 6; display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 2px solid var(--cg-ink); border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--cg-ink); box-shadow: 0 2px 0 var(--cg-ink); cursor: pointer; transition: opacity .2s ease; }
.cg-stage__close::before { content: ""; position: absolute; inset: -5px; }
.cg-stage__close i { font-size: 1.35rem; }
.cg-stage[data-state="playing"] .cg-stage__close { opacity: .62; }
.cg-stage[data-state="playing"] .cg-stage__close:hover, .cg-stage[data-state="playing"] .cg-stage__close:focus-visible { opacity: 1; }
.cg-stage__expand { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: none; place-items: center; width: 44px; height: 44px; border: 3px solid var(--cg-ink); border-radius: 14px; background: var(--cg-yellow); color: var(--cg-ink); font-size: 1.4rem; box-shadow: 0 3px 0 var(--cg-ink); cursor: pointer; }
/* PHONE = (max-width: 767.98px), (max-height: 540px) and (pointer: coarse): the same test as isPhone() in game-player.js */
@media (max-width: 767.98px), (max-height: 540px) and (pointer: coarse) { .cg-stage[data-state="playing"]:not(.is-overlay) .cg-stage__expand { display: grid; } }
.cg-stage.is-overlay { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.cg-stage.is-overlay .cg-stage__close, .cg-stage:fullscreen .cg-stage__close { display: inline-flex; }
.cg-stage:fullscreen { width: 100%; height: 100%; border-radius: 0; }
.cg-stage:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; }
.cg-stage:-webkit-full-screen .cg-stage__close { display: inline-flex; }
/* Page scroll lock while the modal or the phone overlay is open. Only the root is locked: the layout gives body
   height: 100%, so locking body too would make it the scroller and throw the page back to the top. game-player.js
   measures the scrollbar before it goes and gives its width back (--cg-sbw) to the body and the fixed site header:
   nothing shifts, and the backdrop covers the full width (a reserved scrollbar-gutter would stay unpainted, a white
   strip beside the backdrop) */
html.cg-noscroll { overflow: hidden !important; }
html.cg-noscroll body { padding-right: var(--cg-sbw, 0px); }
html.cg-noscroll #header { padding-right: var(--cg-sbw, 0px); }

/* Game bar: 52px + its 4px top border + the player's 4px borders = 64px, so the header (76px),
   the stage (100svh - 140px) and the bar fill the viewport exactly after PLAY scrolls to the player */
.cg-gamebar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 10px; background: #fff; border-top: 4px solid var(--cg-ink); border-radius: 0 0 24px 24px; }
.cg-gamebar__id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.cg-gamebar__thumb { flex: none; width: 40px; height: 40px; border: 3px solid var(--cg-ink); border-radius: 11px; object-fit: cover; }
.cg-gamebar__names { min-width: 0; }
.cg-gamebar__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.0625rem/1.15 var(--cg-display); color: var(--cg-ink); }
.cg-gamebar__by { display: block; font-size: .75rem; line-height: 1.3; color: var(--cg-muted); font-weight: 600; }
.cg-gamebar__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.cg-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 40px; padding: 0 13px; border: 3px solid var(--cg-ink); border-radius: 13px; background: #fff; box-shadow: 0 3px 0 var(--cg-ink); color: var(--cg-ink); font: 600 .9375rem/1 var(--cg-display); text-decoration: none; cursor: pointer; transition: transform .15s var(--cg-ease-pop), box-shadow .15s ease, background-color .15s ease; }
.cg-tool i { font-size: 1.25rem; }
.cg-tool:hover { color: var(--cg-ink); text-decoration: none; background: var(--cg-sky-1); transform: translateY(-2px); box-shadow: 0 5px 0 var(--cg-ink); }
.cg-tool:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cg-ink); }
@media (max-width: 991.98px) { .cg-tool span { display: none; } .cg-tool { padding: 0; width: 42px; } }
@media (max-width: 575.98px) { .cg-gamebar { gap: 8px; padding: 0 8px; } .cg-gamebar__thumb, .cg-gamebar__by { display: none; } .cg-gamebar__tools { gap: 6px; } .cg-gamebar__title { font-size: .95rem; white-space: normal; line-height: 1.15; } }

/* Layout below the player: leaderboard rail on the right (desktop), straight after the player (phones) */
.cg-gbody { padding: 56px 0 88px; }
.cg-glayout { display: grid; gap: 32px; }
@media (min-width: 992px) { .cg-glayout { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; } .cg-glayout > .cg-board { grid-column: 2; grid-row: 1; } .cg-glayout > .cg-gmain { grid-column: 1; grid-row: 1; } }
/* Sticky board: never taller than the space under the header, so its footnote and "Show me" stay reachable. The list
   takes whatever height is left. Up to 1499px the board's right edge runs under the site's back-to-top button
   (fixed, 44px, 20px from the corner), so the panel also stops 76px above the bottom there. Below 700px of height
   the board is not sticky at all: it scrolls with the page like any other card. */
@media (min-width: 992px) and (min-height: 700px) {
  .cg-glayout > .cg-board { position: sticky; top: 96px; max-height: calc(100vh - 112px); }
  .cg-glayout > .cg-board > * { flex: none; }
  .cg-glayout > .cg-board > .cg-board__list { flex: 0 1 auto; min-height: 96px; max-height: 560px; }
}
@media (min-width: 992px) and (max-width: 1499.98px) and (min-height: 700px) { .cg-glayout > .cg-board { max-height: calc(100vh - 172px); } }
@media (min-width: 992px) and (min-height: 700px) and (max-height: 820px) {
  .cg-board__head { padding: 14px 18px 12px; }
  .cg-board__trophy { width: 52px; height: 52px; top: 10px; }
  .cg-root .cg-board__title { font-size: 1.6rem; }
  .cg-board__fill { padding: 9px 18px 10px; }
  .cg-board__cols { padding: 6px 18px 5px; }
  .cg-board__foot { padding: 9px 18px 10px; font-size: .75rem; }
}
@media (min-width: 992px) and (min-height: 700px) and (max-height: 760px) { .cg-board__sub { display: none; } }
@media (min-width: 1400px) { .cg-glayout { grid-template-columns: minmax(0, 1fr) 420px; gap: 44px; } }
.cg-gteam { margin-top: 64px; }
.cg-card { position: relative; padding: 28px 22px; background: #fff; border: 3px solid var(--cg-ink); border-radius: var(--cg-r); box-shadow: var(--cg-drop); scroll-margin-top: 96px; }
@media (min-width: 768px) { .cg-card { padding: 34px 36px; } }
.cg-gmain { display: grid; gap: 32px; min-width: 0; }
.cg-root .cg-card .cg-h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem); }
.cg-card > p, .cg-prose p { color: var(--cg-ink-2); font-size: 1.0625rem; }
.cg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 22px 0 0; }
.cg-fact { position: relative; min-height: 66px; padding: 12px 14px 12px 64px; border: 2px solid var(--cg-line); border-radius: 16px; background: var(--cg-sky-0); }
.cg-fact i { position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--cg-ink); border-radius: 12px; background: var(--f, var(--cg-yellow)); color: var(--cg-ink); font-size: 1.3rem; letter-spacing: 0; }
.cg-fact dt { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-muted); }
.cg-fact dd { margin: 2px 0 0; font: 600 1rem/1.3 var(--cg-display); color: var(--cg-ink); }
@media (max-width: 575.98px) { .cg-facts { grid-template-columns: 1fr 1fr; gap: 8px; } .cg-fact { min-height: 0; padding: 50px 12px 10px; } .cg-fact i { left: 12px; top: 10px; width: 32px; height: 32px; font-size: 1.1rem; } }
.cg-howto { display: grid; gap: 14px; margin: 18px 0 30px; counter-reset: cg-how; }
.cg-howto li { position: relative; min-height: 36px; padding: 4px 0 0 52px; color: var(--cg-ink-2); font-size: 1.0625rem; counter-increment: cg-how; }
.cg-howto li::before { content: counter(cg-how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--cg-ink); border-radius: 12px; background: var(--cg-accent); font: 700 1.05rem/1 var(--cg-display); color: var(--cg-ink); transform: rotate(-5deg); }
.cg-howto b { color: var(--cg-ink); }
.cg-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 30px; }
.cg-formula__term { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 6px; border: 3px solid var(--cg-ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--cg-ink); font: 600 1rem/1.1 var(--cg-display); color: var(--cg-ink); }
.cg-formula__term i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--f); border: 2px solid var(--cg-ink); font-size: 1rem; }
.cg-formula__term--total { background: var(--cg-yellow); transform: rotate(-2deg); }
.cg-formula__term--total i { background: #fff; }
.cg-formula__op { font: 700 1.6rem/1 var(--cg-display); color: var(--cg-ink); }
/* The bracketed sum never breaks across lines, so "(points + coins) x ..." cannot be misread */
.cg-formula__group { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.cg-formula__paren { margin: -.1em -2px 0; font: 600 2.7rem/1 var(--cg-display); color: var(--cg-ink); }
@media (max-width: 575.98px) { .cg-formula { gap: 6px; } .cg-formula__group { gap: 5px; } .cg-formula__term { gap: 5px; padding: 6px 9px 5px; font-size: .875rem; } .cg-formula__term i { width: 22px; height: 22px; font-size: .875rem; } .cg-formula__paren { font-size: 2.3rem; } }
@media (max-width: 767.98px) and (hover: none) and (pointer: coarse), (max-height: 540px) and (pointer: coarse) { .cg-controls-block { display: none; } }
.cg-controls { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .cg-controls { grid-template-columns: 1fr 1fr; } }
.cg-controls li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--cg-line); border-radius: 14px; background: var(--cg-sky-0); font-weight: 600; color: var(--cg-ink-2); font-size: .9375rem; }
.cg-keys { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.cg-root .cg-key { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 2px solid var(--cg-ink); border-bottom-width: 5px; border-radius: 9px; background: #fff; color: var(--cg-ink); font: 600 .95rem/1 var(--cg-display); box-shadow: none; }
.cg-root .cg-key--wide { min-width: 72px; }
.cg-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--cg-cream); border: 2px dashed rgba(47, 42, 79, .3); color: var(--cg-ink-2); font-size: .9375rem; }
.cg-note i { font-size: 1.3rem; color: var(--cg-coral); }
.cg-habits { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 22px; }
.cg-habit { position: relative; padding: 16px 16px 14px; border: 3px solid var(--cg-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--cg-ink); }
.cg-habit__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cg-habit__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--cg-ink); border-radius: 13px; background: var(--h, var(--cg-sky)); font-size: 1.35rem; color: var(--cg-ink); transform: rotate(-5deg); }
.cg-habit h3 { font-size: 1.1rem; line-height: 1.15; }
.cg-habit__where { display: block; margin: 2px 0 0; font: 700 .8125rem/1.2 var(--cg-body); color: var(--cg-muted); }
.cg-habit ol { display: grid; gap: 6px; }
.cg-habit li { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--cg-ink-2); line-height: 1.3; }
.cg-habit li span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--cg-sky-1); border: 2px solid var(--cg-line); font: 700 .7rem/1 var(--cg-display); color: var(--cg-ink); }

/* ---------- Leaderboard panel ---------- */
.cg-board { position: relative; display: flex; flex-direction: column; background: #fff; border: 3px solid var(--cg-ink); border-radius: var(--cg-r); box-shadow: var(--cg-drop); scroll-margin-top: 96px; }
.cg-board__head { position: relative; padding: 20px 20px 16px; border-radius: calc(var(--cg-r) - 3px) calc(var(--cg-r) - 3px) 0 0; background: var(--cg-night); background-image: radial-gradient(circle at 88% 20%, rgba(255, 201, 77, .35), transparent 40%), radial-gradient(circle at 10% 110%, rgba(82, 180, 255, .35), transparent 50%); color: #fff; overflow: hidden; }
.cg-board__trophy { position: absolute; right: 14px; top: 12px; width: 64px; height: 64px; transform: rotate(8deg); }
.cg-board__badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px 2px; border: 2px solid var(--cg-ink); border-radius: 8px; background: var(--cg-yellow); font: 700 .8rem/1.2 var(--cg-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink); transform: rotate(-3deg); }
.cg-root .cg-board__title { color: #fff; font-size: 1.9rem; line-height: 1.05; }
.cg-board__sub { margin: 4px 0 0; font-size: .875rem; color: #D8D4F4; padding-right: 64px; }
.cg-board__fill { padding: 12px 18px 12px; background: var(--cg-cream); border-top: 3px solid var(--cg-ink); border-bottom: 2px solid var(--cg-line); }
.cg-board__cutoff { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .875rem; font-weight: 600; color: var(--cg-ink-2); }
.cg-board__cutoff i { font-size: 1.2rem; color: var(--cg-coral); }
.cg-board__cutoff b { color: var(--cg-ink); }
.cg-board__cutoff > span { flex: 1; }
.cg-board__count { flex: none; font: 700 .875rem/1 var(--cg-display); }
.cg-meter { display: block; height: 12px; border: 2px solid var(--cg-ink); border-radius: 999px; background: #fff; overflow: hidden; }
.cg-meter > span { display: block; height: 100%; min-width: 6px; border-right: 2px solid var(--cg-ink); border-radius: 999px; background: linear-gradient(90deg, var(--cg-green), var(--cg-yellow) 60%, var(--cg-coral)); transition: width .6s ease; }
.cg-board__cols { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 8px 18px 6px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-muted); border-bottom: 2px solid var(--cg-line); }
.cg-board__list { margin: 0; padding: 6px 8px; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(47, 42, 79, .35) transparent; }
.cg-root .cg-board__list:focus-visible { outline-offset: -3px; box-shadow: none; }
.cg-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; transition: background-color .3s ease; }
.cg-row + .cg-row { margin-top: 2px; }
.cg-row:nth-child(even) { background: #F7F9FD; }
.cg-row__rank { display: grid; place-items: center; font: 700 1rem/1 var(--cg-display); color: var(--cg-muted); font-variant-numeric: tabular-nums; }
.cg-row__who { min-width: 0; }
.cg-row__alias { display: flex; align-items: center; gap: 6px; font: 600 1.0625rem/1.25 var(--cg-display); color: var(--cg-ink); }
.cg-row__alias > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: .75rem; font-weight: 600; color: var(--cg-muted); }
.cg-row__score { font: 700 1.15rem/1 var(--cg-display); color: var(--cg-ink); font-variant-numeric: tabular-nums; text-align: right; }
.cg-row--you, .cg-row--you:nth-child(even) { background: #FFF1C2; box-shadow: inset 0 0 0 2px var(--cg-ink); }
.cg-row--you .cg-row__rank { color: var(--cg-ink); }
.cg-row--flash { animation: cg-flash 1.6s ease 2; }
@keyframes cg-flash { 0%, 100% { background: #FFF1C2; } 50% { background: var(--cg-yellow); } }
.cg-row--ghost .cg-row__alias { color: var(--cg-muted); font-weight: 500; }
.cg-row--ghost .cg-row__score { color: var(--cg-muted); }
.cg-row--ghost .cg-medal { background: #fff; border-style: dashed; box-shadow: none; color: var(--cg-muted); }
.cg-board__empty { padding: 10px 14px 24px; text-align: center; }
.cg-ghosts { margin: 0 0 16px; text-align: left; }
.cg-board__empty .cg-board__empty-title { margin: 8px 0 4px; padding: 0; font: 700 1.75rem/1.1 var(--cg-display); color: var(--cg-ink); }
.cg-board__empty p { color: var(--cg-ink-2); margin-bottom: 16px; padding: 0 8px; }
.cg-board__me { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 16px; background: #FFF1C2; border-top: 3px solid var(--cg-ink); font-size: .9375rem; font-weight: 600; color: var(--cg-ink-2); }
.cg-board__me > span b { color: var(--cg-ink); }
.cg-board__me > span { flex: 1; min-width: 0; }
.cg-board__pending { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 16px; background: #DDF7E8; border-top: 3px solid var(--cg-ink); font-size: .9375rem; font-weight: 600; color: var(--cg-ink-2); }
.cg-board__pending[hidden] { display: none; }
.cg-board__pending > span { flex: 1; min-width: 0; }
.cg-board__pending > span b { color: var(--cg-ink); }
.cg-board__jump { display: inline-flex; align-items: center; gap: 2px; padding: 5px 10px; border: 2px solid var(--cg-ink); border-radius: 999px; background: #fff; font: 600 .875rem/1 var(--cg-display); color: var(--cg-ink); cursor: pointer; }
.cg-board__jump:hover { background: var(--cg-yellow); }
.cg-board__foot { margin: 0; padding: 12px 18px 14px; border-top: 2px solid var(--cg-line); font-size: .8125rem; color: var(--cg-muted); line-height: 1.45; }

/* ---------- More games ---------- */
.cg-more { background: linear-gradient(180deg, var(--cg-sky-1), #DDF0FF); padding: 72px 0 96px; }

/* ==========================================================================
   Claim modal, toasts, confetti
   ========================================================================== */
.cg-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.cg-modal[hidden] { display: none; }
.cg-modal__backdrop { position: fixed; inset: 0; background: rgba(22, 18, 56, .76); backdrop-filter: blur(4px); animation: cg-fade .25s ease both; }
.cg-modal__dialog { position: relative; width: min(500px, 100%); margin: auto; padding: 0 0 20px; background: #fff; border: 4px solid var(--cg-ink); border-radius: 30px; box-shadow: 0 12px 0 var(--cg-ink), 0 40px 80px rgba(10, 8, 30, .5); animation: cg-dialog-in .5s var(--cg-ease-pop) both; }
.cg-modal__dialog:focus, .cg-root .cg-modal__dialog:focus-visible { outline: none; box-shadow: 0 12px 0 var(--cg-ink), 0 40px 80px rgba(10, 8, 30, .5); }
.cg-modal__x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid var(--cg-ink); border-radius: 50%; background: #fff; color: var(--cg-ink); font-size: 1.5rem; cursor: pointer; box-shadow: 0 3px 0 var(--cg-ink); }
.cg-modal__x:hover { background: var(--cg-sky-1); }
/* While SubmitScore runs, the dialog cannot be dismissed (game-player.js); its close controls say so */
.cg-modal.is-busy .cg-modal__backdrop { cursor: progress; }
.cg-modal__x[disabled], .cg-linkbtn[disabled] { opacity: .45; cursor: not-allowed; }
/* Confetti inside the open modal plays between the backdrop and the dialog, never over the dialog's text */
.cg-modal > .cg-confetti { z-index: auto; }
@keyframes cg-fade { from { opacity: 0; } }
@keyframes cg-dialog-in { from { opacity: 0; transform: translateY(40px) scale(.85) rotate(-3deg); } }
.cg-claim__hero { position: relative; padding: 28px 24px 18px; border-radius: 26px 26px 0 0; background: var(--cg-night); color: #fff; text-align: center; overflow: hidden; isolation: isolate; }
.cg-claim__rays { position: absolute; left: 50%; top: 58%; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: -1; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 77, .2) 0 10deg, rgba(255, 201, 77, 0) 10deg 20deg); animation: cg-spin 24s linear infinite; }
.cg-claim__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 60%, rgba(39, 34, 94, 0) 0, rgba(39, 34, 94, .2) 30%, var(--cg-night) 72%); }
@keyframes cg-spin { to { transform: rotate(360deg); } }
.cg-claim__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 600 .8125rem/1.2 var(--cg-display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.cg-root .cg-claim__title { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .22em; margin: 0 auto; font: 700 clamp(2.3rem, 1.8rem + 2.2vw, 3rem)/.98 var(--cg-display); color: #fff; }
.cg-claim__title span { color: var(--c); -webkit-text-stroke: .14em var(--cg-ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--cg-deep); transform: rotate(-3deg); animation: cg-logo-pop .7s var(--cg-ease-pop) both; }
.cg-claim__title span:nth-child(1) { animation-delay: .08s; }
.cg-claim__title span:nth-child(2) { animation-delay: .18s; transform: rotate(-3deg) translateY(.05em); }
.cg-claim__title span:nth-child(3) { animation-delay: .28s; }
.cg-claim__title:focus { outline: none; }
.cg-claim__score { margin: 12px 0 0; font: 700 3.3rem/1 var(--cg-display); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cg-claim__score small { display: block; margin-top: 4px; font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #CFCBEF; }
.cg-claim__stats { justify-content: center; margin-top: 12px; }
.cg-claim__stats .cg-chip { border-color: var(--cg-deep); box-shadow: 0 2px 0 var(--cg-deep); }
.cg-claim__body { padding: 18px 24px 0; }
.cg-rankpeek { margin: 0 0 16px; border: 3px solid var(--cg-ink); border-radius: 18px; overflow: hidden; }
.cg-rankpeek__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 14px; background: var(--cg-sky-1); border-bottom: 2px solid var(--cg-line); font: 600 .95rem/1.2 var(--cg-display); }
.cg-rankpeek__label b { font-size: 1.15rem; }
.cg-rankpeek__list { padding: 4px 6px; }
.cg-rankpeek .cg-row { padding: 6px 8px; grid-template-columns: 40px minmax(0, 1fr) auto; }
.cg-rankpeek .cg-row--you .cg-row__alias > span:empty::before { content: "Your alias"; color: var(--cg-muted); font-weight: 500; }
.cg-down { display: inline-flex; align-items: center; padding: 0 5px; border-radius: 6px; background: #FFE3DC; color: #9A2C14; font: 700 .7rem/1.5 var(--cg-display); }
.cg-field__label { display: block; margin: 0 0 8px; font: 700 1.1rem/1.2 var(--cg-display); color: var(--cg-ink); }
.cg-field { position: relative; }
.cg-root .cg-field__input { display: block; width: 100%; height: 58px; padding: 0 70px 0 18px; border: 3px solid var(--cg-ink); border-radius: 16px; background: #fff; color: var(--cg-ink); font: 600 1.35rem/1 var(--cg-display); box-shadow: inset 0 4px 0 rgba(47, 42, 79, .08); transition: border-color .2s ease, box-shadow .2s ease; }
.cg-root .cg-field__input:focus { outline: 3px solid var(--cg-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--cg-yellow); }
.cg-field[data-state="ok"] .cg-field__input { border-color: #1E8A50; box-shadow: 0 0 0 4px rgba(63, 203, 127, .35); }
.cg-field[data-state="bad"] .cg-field__input { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(255, 122, 92, .35); }
.cg-field__count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 600 .875rem/1 var(--cg-display); color: var(--cg-muted); font-variant-numeric: tabular-nums; }
.cg-field__help { margin: 8px 0 0; font-size: .8125rem; color: var(--cg-muted); line-height: 1.45; }
.cg-field__status { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--cg-ink-2); }
.cg-field__status[data-tone="ok"] { color: #1C7A45; }
.cg-field__status[data-tone="bad"] { color: #B3261E; }
.cg-field__status i { font-size: 1.2rem; }
.cg-claim__actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.cg-claim__privacy { margin: 8px auto 0; max-width: 25rem; font-size: .78rem; line-height: 1.45; color: var(--cg-muted); text-align: center; text-wrap: balance; }
.cg-claim__privacy i { margin-right: 4px; font-size: .95rem; vertical-align: -2px; }
.cg-claim__privacy a { color: var(--cg-ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cg-claim__error { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFE9E4; color: #8A1F14; font-size: .9rem; font-weight: 600; }
.cg-spin { width: 20px; height: 20px; border: 3px solid rgba(47, 42, 79, .25); border-top-color: var(--cg-ink); border-radius: 50%; animation: cg-spin .7s linear infinite; }
.cg-claim--done { text-align: center; }
.cg-claim--done .cg-claim__hero { padding: 30px 24px 24px; }
.cg-bigmedal { display: grid; place-items: center; align-content: center; width: 132px; height: 132px; margin: 0 auto 14px; border: 5px solid var(--cg-ink); border-radius: 50%; background: var(--cg-gold); background-image: radial-gradient(circle at 50% 50%, transparent 0 52px, rgba(47, 42, 79, .18) 53px 55px, transparent 56px), linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%); box-shadow: 0 8px 0 var(--cg-deep), 0 0 0 10px rgba(255, 201, 77, .25), 0 0 60px 10px rgba(255, 201, 77, .45); color: var(--cg-ink); animation: cg-sticker-pop .8s var(--cg-ease-pop) both; }
.cg-bigmedal span { font: 700 .8rem/1 var(--cg-display); letter-spacing: .16em; text-transform: uppercase; }
.cg-bigmedal b { font: 700 2.9rem/1 var(--cg-display); letter-spacing: -.01em; }
.cg-claim__title--done { font-size: clamp(2.1rem, 1.7rem + 1.8vw, 2.7rem); }
.cg-done__text { margin: 0 0 16px; color: var(--cg-ink-2); font-size: 1.0625rem; }
.cg-done__text b { color: var(--cg-ink); }
.cg-claim__actions--done { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cg-claim__actions--done .cg-btn { flex: 1 1 180px; }
.cg-done__more { margin: 8px 0 0; }
@media (max-width: 575.98px) { .cg-claim__hero { padding: 24px 16px 14px; } .cg-claim__body { padding: 16px 16px 0; } .cg-claim__score { font-size: 2.6rem; } .cg-modal { padding: 10px; } }
/* Laptop heights. Up to 900px (1536x864, 1440x900): a tighter hero, the whole dialog fits with room to spare.
   Up to 820px (1366x768, 1280x720): also only the player's own row in the preview, so "Claim my spot" and
   "No thanks" always fit without scrolling. */
@media (max-height: 900px) {
  .cg-claim__hero { padding: 18px 20px 12px; }
  .cg-claim__kicker { margin-bottom: 6px; }
  .cg-root .cg-claim__title { font-size: 2.2rem; }
  .cg-claim__score { margin-top: 8px; font-size: 2.5rem; }
  .cg-claim__score small { display: inline; margin: 0 0 0 8px; font-size: .75rem; }
  .cg-claim__stats { margin-top: 8px; }
  .cg-claim__body { padding-top: 14px; }
  .cg-rankpeek { margin-bottom: 12px; }
  .cg-field__help { margin-top: 6px; }
  .cg-modal__dialog { padding-bottom: 14px; }
  .cg-claim--done .cg-claim__hero { padding: 22px 20px 18px; }
}
@media (max-height: 820px) {
  .cg-rankpeek .cg-row--ghost { display: none; }
  .cg-bigmedal { width: 108px; height: 108px; }
  .cg-bigmedal b { font-size: 2.4rem; }
}

.cg-toasts { position: fixed; left: 50%; bottom: 20px; z-index: 2200; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(500px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.cg-toast { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; background: #fff; border: 3px solid var(--cg-ink); border-radius: 18px; box-shadow: var(--cg-drop); pointer-events: auto; animation: cg-toast-in .45s var(--cg-ease-pop) both; }
.cg-toast.is-out { animation: cg-toast-out .25s ease both; }
.cg-toast__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--cg-ink); border-radius: 13px; background: var(--t, var(--cg-yellow)); font-size: 1.45rem; color: var(--cg-ink); transform: rotate(-6deg); box-shadow: 0 3px 0 var(--cg-ink); }
.cg-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.cg-toast__title { display: block; font: 700 1.1rem/1.25 var(--cg-display); color: var(--cg-ink); }
.cg-toast__text { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.4; color: var(--cg-ink-2); }
.cg-toast__action { margin-top: 10px; }
.cg-toast__x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--cg-sky-1); color: var(--cg-ink); font-size: 1.3rem; cursor: pointer; }
.cg-toast__x:hover { background: var(--cg-sky-2); }
@keyframes cg-toast-in { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes cg-toast-out { to { opacity: 0; transform: translateY(20px) scale(.95); } }
.cg-confetti { position: fixed; inset: 0; z-index: 2300; width: 100vw; height: 100vh; pointer-events: none; }

/* ---------- Site header on these pages ----------
   Below 992px the layout's hamburger is dark (#33354D) and the header is transparent until the page scrolls, so over
   the purple hub hero and the dark game-page top it all but vanished. White until the header turns white on scroll. */
@media (max-width: 991.98px) { #header:not(.js-header-fix-moment) .navbar-toggler { color: #fff; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cg-root *, .cg-root *::before, .cg-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .cg-play, .cg-pmedal, .cg-claim__rays { animation: none !important; }
  .cg-play::before { display: none; }
}