/* THE GAMES - the Games page and its game window (October 23, 2026;
   moved from the 404 page to /games on October 25). With
   _js/cats-games.js. Everything is positioned in percentages of its
   scene, so a scene scales as one piece; the pictures are Jonathan's art
   from /_game/ or the script's own stand-ins, the same size either way.

   THE WINDOW fills the screen and never scrolls: the page behind it is
   held still (html.cg-ov-open) and the frame takes whatever height is
   left between the top line, the how-to line and the status line. Every
   game fills the same frame, so they are all the same size. */
.cg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin: 6px 0 10px; }
/* The cards are the site's own kind (the Helped page's): a hairline, the
   site's radius and its soft shadow - no thick navy lines (Jonathan,
   October 25, 2026). The game's logo sits under the picture (not over it:
   it hid the screenshots - Jonathan, October 26) and names the game; the
   name in words is there for a screen reader only. */
.cg-tile {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid #e7ded6; border-radius: var(--radius); overflow: hidden;
  color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform 0.15s, box-shadow 0.15s;
}
.cg-tile:hover, .cg-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13,42,74,0.18); }
.cg-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cg-tile-pic { aspect-ratio: 16 / 9; background: #8ec9f0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cg-tile-pic > .cg-pic { width: 100%; height: 100%; object-fit: cover; }
.cg-thumb-blank { width: 46%; }
.cg-thumb-blank .cg-pic { width: 100%; height: auto; }
.cg-tile-logo { --logo-h: 118px; height: var(--logo-h); margin-top: 8px; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.cg-tile-logo .cg-pic { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; filter: drop-shadow(0 5px 7px rgba(13,42,74,0.3)); }
.cg-tile-text { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cg-tile-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.cg-tile-text p { margin: 0; color: #465063; flex: 1; }
.cg-tile-play { align-self: flex-start; pointer-events: none; }

html.cg-ov-open, html.cg-ov-open body { overflow: hidden !important; overscroll-behavior: none; }
.cg-ov {
  position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center;
  height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: none;
  padding: 8px 12px calc(6px + env(safe-area-inset-bottom)); box-sizing: border-box;
  background: url(/_images/bg-cats-pattern.webp), #fff;   /* the pages' own paper */
}
.cg-ov[hidden] { display: none; }
.cg-ov-top { width: min(100%, 1000px); display: flex; align-items: center; gap: 10px; flex: none; padding-right: 52px; box-sizing: border-box; }
/* The X: the very top right corner of the screen, drawn like the site's dialogs' (a plain navy x), with a finger-sized target. */
.cg-ov-x {
  position: fixed; right: 6px; top: 4px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--navy);
  font-size: 2rem; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cg-ov-x:hover { background: rgba(13,42,74,0.08); }
.cg-ov-x:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cg-ov-title { flex: 1; margin: 0; font-family: var(--font-display); color: var(--navy); font-size: clamp(1.1rem, 4vw, 1.7rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.cg-ov-top .cg-select { flex: none; max-width: 48%; }
/* The lines above and under the game keep a fixed height, so every game's frame is the same size. */
.cg-ov-how { flex: none; margin: 6px 0; width: min(100%, 1000px); height: 2.5em; line-height: 1.25; overflow: hidden; text-align: center; color: #465063; font-size: 0.88rem; display: flex; align-items: center; justify-content: center; }
.cg-ov-frame {
  position: relative; flex: 1 1 auto; min-height: 0; width: min(100%, 1000px);
  border: 1px solid #e7ded6; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); background: #8ec9f0;
}
.cg-ov .cg-status { flex: none; height: 2.6em; line-height: 1.3; overflow: hidden; margin: 6px 0 0; width: min(100%, 1000px); }
@media (max-width: 480px) {
  .cg-ov-title { display: none; }         /* the dropdown names the game */
  .cg-ov-top { justify-content: flex-start; }
  .cg-ov-top .cg-select { max-width: none; }
}
/* Every game fills the frame. */
.cg-stage { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cg-stage > .cg-score { flex: none; margin: 0; padding: 4px 8px; background: rgba(255,255,255,0.85); }
.cg-fc { position: relative; flex: 1 1 auto; min-height: 0; background: #4d9be0; }   /* the scene always fills the frame: one sky, its own */
.cg-stage .cg-scene-wrap { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; touch-action: pan-x; }
.cg-stage .cg-laser, .cg-stage .cg-boop, .cg-stage .cg-boxes, .cg-stage .cg-cu, .cg-stage .cg-ct {
  flex: 1 1 auto; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
}

/* A card over a game: the splash, or an end card. While it is "locked"
   (its first moment) nothing on it answers. */
.cg-card-layer { position: absolute; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(13,42,74,0.28); padding: 12px; }
.cg-card {
  width: min(100%, 440px); max-height: 100%; overflow: auto; background: #fff; border: 1px solid #e7ded6; border-radius: var(--radius);
  padding: 16px 18px; text-align: center; box-shadow: var(--shadow-soft);
}
.cg-card p { margin: 0 0 10px; color: #465063; }
.cg-card .cg-end-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); }
.cg-card.is-locked .btn, .cg-cu-card.is-locked .btn { opacity: 0.55; pointer-events: none; }
.cg-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 5; margin: 0; padding: 6px 10px; text-align: center; font-weight: 800; color: var(--navy); background: rgba(255,255,255,0.82); }
.cg-hud-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cg-hud-btn { min-height: 36px; padding: 4px 16px; }

.cg { max-width: 980px; margin: 0 auto 30px; text-align: left; }
.cg-group { margin: 0 0 34px; }
.cg-group-title { margin: 0 0 6px; font-family: var(--font-display); color: var(--navy); font-size: 1.6rem; }
.cg-group-intro { margin: 0 0 16px; color: #465063; max-width: 760px; }
.cg-closing { max-width: 760px; color: #465063; border-top: 2px solid rgba(13,42,74,0.12); padding-top: 18px; }
.cg-closing p { margin: 0 0 10px; }
.cg-closing-motto { font-family: var(--font-script); color: var(--navy); font-size: 1.35rem; }
.cg-title { font-family: var(--font-display); color: var(--navy); font-size: clamp(1.5rem, 5vw, 2.1rem); text-align: center; margin: 0 0 4px; }
.cg-sub { text-align: center; color: #465063; margin: 0 0 14px; }
.cg-head-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cg-choose-label { font-weight: 800; color: var(--navy); }
/* The dropdown, dressed like the site's own (the forms' selects). */
.cg-select {
  font-family: inherit; font-size: 0.95rem; color: #1a1a1a; background: #ffffff;
  border: 1px solid var(--cream-deep); border-radius: var(--radius); padding: 10px 12px; min-height: 44px;
}
.cg-status { min-height: 1.6em; margin: 10px 0 0; text-align: center; font-family: var(--font-script); font-size: 1.15rem; color: var(--navy); }
.cg-hint { margin: 6px 0 0; text-align: center; font-size: 0.8rem; color: #8a8478; }
.cg-score { margin: 0 0 8px; text-align: center; font-weight: 800; color: var(--navy); }
.cg-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.cg-bar-info { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

.cg-pic { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.cg-layer { position: absolute; inset: 0; pointer-events: none; }
.cg-layer .cg-pic { width: 100%; height: 100%; object-fit: cover; }

/* ── Find the Cats ── */
/* The four skies, stacked; as the hours pass each fades in over the last,
   and the boardwalk darkens with them. What the player is watching (the
   cat out in front, the trap, the van) stays brighter than the rest. */
.cg-sky-at { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.cg-sky-at.is-on { opacity: 1; }
.cg-dim { transition: filter 1.6s ease; }
.cg-scene.is-sunset .cg-dim { filter: brightness(0.9) saturate(1.05); }
.cg-scene.is-dusk .cg-dim { filter: brightness(0.68) saturate(0.8); }
.cg-scene.is-night .cg-dim { filter: brightness(0.42) saturate(0.6); }
.cg-scene.is-dusk .cg-lit { filter: brightness(0.92); }
.cg-scene.is-night .cg-lit { filter: brightness(0.8); }
/* A found cat, out in front of its spot. */
.cg-out { position: absolute; pointer-events: none; transform-origin: 50% 100%; transition: left 1s ease-in-out, bottom 1s ease-in-out; animation: cg-hop 0.35s cubic-bezier(.2,1.6,.4,1); }
@keyframes cg-hop { from { transform: translateY(25%) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.cg-scene-wrap { overflow-x: auto; overflow-y: hidden; border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 8px 22px rgba(13,42,74,0.18); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cg-scene { position: relative; overflow: hidden; }
.cg-spot { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.cg-spot:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 8px; }
.cg-spot.is-looked { cursor: default; }
.cg-spot.is-cropped { overflow: hidden; }
.cg-wiggle { animation: cg-wiggle 0.45s ease-in-out; }
@keyframes cg-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
.cg-peek { position: absolute; pointer-events: none; }
.cg-bubble-at { position: absolute; height: 0; pointer-events: none; }
.cg-peek-clip { position: absolute; inset: 0; overflow: hidden; }
.cg-item { position: absolute; inset: 0; transform: translateY(105%); transition: transform 0.38s cubic-bezier(.2,1.6,.4,1); }
.cg-peek.is-up .cg-item { transform: translateY(0); }
/* From the side (the palms): turned on its side, it slides out to the right from behind the trunks. */
.cg-peek-side .cg-item { transform: translateX(-105%); }
.cg-peek-side.is-up .cg-item { transform: translateX(0); }
.cg-rot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.cg-rot .cg-pic { width: 100%; height: 100%; }
.cg-bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap;
  background: #fff; color: var(--navy); border: 2.5px solid var(--navy); border-radius: 16px;
  padding: 3px 10px; font-family: var(--font-script); font-size: clamp(0.8rem, 2.4vw, 1.05rem);
  box-shadow: 0 3px 0 rgba(13,42,74,0.25); animation: cg-pop 0.3s ease-out;
}
.cg-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--navy); }
.cg-bubble.is-going { opacity: 0; transition: opacity 0.4s; }
.cg-bubble.is-small { font-size: clamp(0.72rem, 2vw, 0.9rem); }
@keyframes cg-pop { from { transform: translate(-50%, 6px) scale(0.6); opacity: 0; } to { transform: translate(-50%, -6px) scale(1); opacity: 1; } }
.cg-trap-btn, .cg-wait-btn { position: absolute; transform: translateX(-50%); z-index: 300; min-height: 36px; padding: 4px 16px; white-space: nowrap; animation: cg-bounce 0.9s ease-in-out infinite; }
@keyframes cg-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
.cg-trap { position: absolute; }
.cg-trap-cat { position: absolute; left: 22%; width: 42%; bottom: 10%; }
.cg-trap .cg-pic + .cg-pic, .cg-trap > .cg-pic { position: relative; }
.cg-van { position: absolute; transition: left 1.4s cubic-bezier(.5,0,.4,1); }
.cg-van.is-driving { animation: cg-rumble 0.18s linear infinite; }
.cg-van.is-reverse { transition-duration: 1.2s; }
@keyframes cg-rumble { 50% { transform: translateY(-2%); } }
.cg-wheel { position: absolute; width: 14%; transform: translate(-50%, -50%); }
.cg-van.is-driving .cg-wheel .cg-pic { animation: cg-spin 0.35s linear infinite; }
.cg-van.is-reverse .cg-wheel .cg-pic { animation-direction: reverse; }
@keyframes cg-spin { to { transform: rotate(360deg); } }
.cg-dust { position: absolute; width: 8%; animation: cg-dust 1s ease-out forwards; }
@keyframes cg-dust { from { opacity: 0.95; transform: scale(0.6); } to { opacity: 0; transform: scale(1.6) translateY(-30%); } }
.cg-stamp { position: absolute; width: 18%; animation: cg-stamp 0.35s cubic-bezier(.2,1.8,.5,1); transform: rotate(-12deg); }
@keyframes cg-stamp { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(-12deg); opacity: 1; } }
.cg-end-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* The high-score panel inside an end card (October 25, 2026). */
.cg-scores { margin: 4px 0 12px; }
.cg-scores:empty { display: none; }
.cg-scores-title { margin: 0 0 4px; font-family: var(--font-display); color: var(--navy); font-size: 1.15rem; }
.cg-scores-ask { margin: 0 0 6px; }
.cg-scores-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cg-initials { width: 5.2em; text-align: center; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.25em; text-transform: uppercase; padding: 4px 6px; border: 1px solid var(--cream-deep); border-radius: var(--radius); }
.cg-scores-note { margin: 8px 0 0; color: var(--navy); font-weight: 600; }
.cg-board { margin: 0 auto; border-collapse: collapse; min-width: 220px; font-size: 0.95rem; }
.cg-board td { padding: 2px 10px; }
.cg-board-rank { color: #6a7382; text-align: right; }
.cg-board-ini { font-family: var(--font-display); letter-spacing: 0.15em; color: var(--navy); }
.cg-board-score { text-align: right; font-weight: 700; }
.cg-board tr.is-you td { background: #fff3cf; }

/* ── Laser Pointer ── */
.cg-laser {
  position: relative; height: clamp(300px, 52vh, 460px); overflow: hidden; touch-action: none;
  border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 8px 22px rgba(13,42,74,0.18);
}
.cg-laser.is-playing { cursor: none; }   /* the mouse pointer shows until Start; then the dot is the pointer */
.cg-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 10px 4px rgba(255,40,40,0.6); pointer-events: none; z-index: 3; }
.cg-chaser { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }

/* ── Boop the Noses ── */
.cg-boop { position: relative; height: clamp(360px, 60vh, 560px); overflow: hidden; border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 8px 22px rgba(13,42,74,0.18); }
/* A hole: the box in front, the cat's window behind it (laid out by the script). */
.cg-hole { position: absolute; }
.cg-hole-win { position: absolute; overflow: hidden; z-index: 1; }
.cg-head { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; padding: 0; border: 0; background: none; transform: translateY(105%); transition: transform 0.18s ease-out; cursor: pointer; }
.cg-head.is-up { transform: translateY(0); }
.cg-head .cg-pic { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }   /* the booped cat: head and shoulders */
.cg-head:focus-visible { outline: 3px dashed var(--gold); }
.cg-hole-front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.cg-hole .cg-pop { z-index: 3; }
/* The glove: the pointer once the game starts (a computer), or where you tap (a phone). */
.cg-boop.is-playing { cursor: none; }
.cg-glove { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform-origin: 30% 12%; }
.cg-glove.is-petting { animation: cg-petting 0.7s ease-in-out; }
@keyframes cg-petting { 0%, 100% { translate: 0 0; } 20% { translate: 0 -8%; } 45% { translate: 0 3%; } 70% { translate: 0 -8%; } }
.cg-head.is-petted { animation: cg-petted 0.7s ease-in-out; transform-origin: 50% 100%; }
@keyframes cg-petted { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg) translateY(2%); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg) translateY(2%); } }
.cg-glove.is-missing { animation: cg-missing 0.45s ease-out; }
@keyframes cg-missing { 0% { translate: 0 0; } 30% { translate: 0 -6%; } 100% { translate: 0 0; } }
.cg-pop { position: absolute; left: 50%; top: -6%; transform: translateX(-50%); font-family: var(--font-script); color: #c8302a; font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 700; animation: cg-float 0.45s ease-out forwards; pointer-events: none; text-shadow: 0 2px 0 #fff; }
@keyframes cg-float { to { transform: translate(-50%, -60%); opacity: 0; } }

/* ── Which Box? ── */
.cg-boxes { position: relative; height: clamp(240px, 40vh, 340px); border-radius: 14px; border: 3px solid var(--navy); overflow: hidden; box-shadow: 0 8px 22px rgba(13,42,74,0.18); }
.cg-bigbox { position: absolute; bottom: 14%; width: 20%; padding: 0; border: 0; background: none; cursor: pointer; transition: left 0.38s ease-in-out, transform 0.3s ease-out; z-index: 2; }
.cg-bigbox:disabled { cursor: default; }
.cg-bigbox:focus-visible { outline: 3px dashed var(--gold); outline-offset: 4px; }
.cg-bigbox.is-lifted { transform: translateY(-55%); }
.cg-bigbox.is-fourth { transition: left 0.6s cubic-bezier(.2,1.4,.5,1), transform 0.3s ease-out; }
.cg-boxcat { position: absolute; bottom: 14%; width: 14%; opacity: 0; transition: opacity 0.2s; z-index: 1; }
.cg-boxcat.is-shown { opacity: 1; }

/* ── Boardwalk Cleanup ── */
.cg-cu {
  position: relative; height: clamp(440px, 74vh, 620px); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 8px 22px rgba(13,42,74,0.18); background: #8ec9f0; outline: none;
}
.cg-cu:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.cg-cu-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; }
.cg-cu-ground .cg-pic { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.cg-cu.is-night .cg-cu-ground { filter: brightness(0.55) saturate(0.7); }
.cg-cu-world { position: absolute; inset: 0; pointer-events: none; }
.cg-cu-thing, .cg-cu-fx, .cg-cu-bossbar { position: absolute; left: 0; top: 0; }
.cg-cu-thing .cg-pic, .cg-cu-fx .cg-pic { display: block; width: 100%; height: auto; }
.cg-cu-thing .cg-cu-alt { display: none; }
.cg-cu-thing.is-alt > :first-child { display: none; }
.cg-cu-thing.is-alt > .cg-cu-alt { display: block; }
.cg-cu-inv.is-hurt, .cg-cu-boss.is-hurt { filter: brightness(1.8); }
.cg-cu-tilt .cg-cu-alt { display: none !important; }
.cg-cu-tilt.is-alt > :first-child { display: block; transform: rotate(-12deg); }
.cg-cu-cart.is-hit { animation: cg-blink 0.2s steps(2) infinite; }
@keyframes cg-blink { 50% { opacity: 0.35; } }
.cg-cu-bonus.is-left .cg-pic { transform: scaleX(-1); }
.cg-cu-fx .cg-pic { animation: cg-cu-grow 0.45s ease-out forwards; }
@keyframes cg-cu-grow { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.cg-cu-bossbar { height: 7px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; }
.cg-cu-bossbar span { display: block; height: 100%; width: 100%; background: #e5584a; transition: width 0.15s; }
.cg-cu-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: linear-gradient(rgba(13,42,74,0.6), rgba(13,42,74,0)); color: #fff; font-weight: 800; font-size: 0.82rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.cg-cu-level { flex: 1; text-align: center; }
.cg-cu-lives { display: flex; gap: 3px; }
.cg-cu-paw { display: block; width: 22px; }
.cg-cu-paw .cg-pic { display: block; width: 100%; height: auto; }
.cg-cu-banner { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); width: min(88%, 440px); z-index: 6; pointer-events: none; }
.cg-cu-ribbon { position: relative; }
.cg-cu-ribbon .cg-pic { display: block; width: 100%; height: auto; }
.cg-cu-ribbon span { position: absolute; left: 14%; right: 14%; top: 27%; text-align: center; font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: clamp(0.85rem, 3.4vw, 1.25rem); line-height: 1.15; }
/* ── CatTrap! ── */
.cg-ct {
  position: relative; height: clamp(440px, 74vh, 620px); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 14px; border: 3px solid var(--navy); box-shadow: 0 8px 22px rgba(13,42,74,0.18); background: #e9d5a1; outline: none;
}
.cg-ct:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }
.cg-ct-canvas { position: absolute; left: 0; top: 0; display: block; }
.cg-ct-cat, .cg-ct-paw, .cg-ct-trap, .cg-ct-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.cg-ct-cat .cg-pic, .cg-ct-paw .cg-pic, .cg-ct-trap .cg-pic, .cg-ct-fx .cg-pic { display: block; width: 100%; height: auto; }
.cg-ct-trap { z-index: 1; }
.cg-ct-cat { z-index: 2; transform-origin: 50% 50%; }
.cg-ct-paw { z-index: 3; transition: transform 0.09s linear; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.cg-ct-fx { z-index: 4; }
.cg-ct-fx .cg-pic { animation: cg-cu-grow 0.7s ease-out forwards; }
.cg-ct-cat.is-happy .cg-pic { animation: cg-ct-bounce 0.45s ease-in-out infinite alternate; }
@keyframes cg-ct-bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-12%) scale(1.06); } }
.cg-cu-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(92%, 440px); max-height: 94%; overflow: auto;
  background: #fff; border: 1px solid #e7ded6; border-radius: var(--radius); padding: 14px 16px; text-align: center; box-shadow: var(--shadow-soft);
}
.cg-cu-card p { margin: 0 0 10px; color: #465063; }
.cg-cu-card .cg-end-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy); }
.cg-cu-card .cg-cu-fact { color: var(--navy); font-weight: 600; }
.cg-cu-card .cg-cu-small { font-size: 0.85rem; }
.cg-cu-sign { width: min(100%, 300px); margin: 0 auto 8px; }
.cg-cu-sign .cg-pic { display: block; width: 100%; height: auto; }
.cg-cu.is-shaking { animation: cg-shake 0.35s; }
@keyframes cg-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }



/* Less motion asked for: no wiggles, bounces or rumbles; things still
   move where they must (the van, the boxes), just plainly. */
@media (prefers-reduced-motion: reduce) {
  .cg-cu.is-shaking, .cg-cu-cart.is-hit, .cg-cu-fx .cg-pic,
  .cg-wiggle, .cg-trap-btn, .cg-wait-btn, .cg-out, .cg-van.is-driving, .cg-van.is-driving .cg-wheel .cg-pic, .cg-bubble, .cg-stamp, .cg-dust, .cg-pop { animation: none !important; }
  .cg-item, .cg-head { transition-duration: 0.12s; }
  .cg-glove.is-petting, .cg-head.is-petted, .cg-glove.is-missing { animation: none !important; }
  .cg-van { transition-duration: 0.6s; }
  .cg-out { transition-duration: 0.5s; }
  .cg-tile { transition: none; }
  .cg-sky-at, .cg-dim { transition-duration: 0.8s; }
}