/* ============================================================================================================
   Astrowake studio site: the game cards (home page only).
   Each card is a window into its own game, drawn in THAT game's look: its palette, type, corners, button and real
   art. The Astrowake chrome around the cards (section heading, intro line, page colours) lives in site.css.
   Rules this file keeps:
   - The authority for each card is that game's own docs/LOOK.md (bar + banned list). Re-read it before changing
     a card, and refresh the card's art and fonts when a game's look changes (see README "Game cards").
   - A card's palette never flips with the site theme: a game looks like itself on a dark or a light page.
   - Every text colour inside a card is measured against the card's own ground (WCAG AA 4.5:1 or better).
   - Hover and focus touches echo the game, are CSS only, and switch off under prefers-reduced-motion.
   - Small cards switch to their wide layout at 480 px of screen (media queries: a card cannot query itself).
   - The whole card is the link's hit area (the button's ::after); the button stays the one visible action.
   - No inline styles: the Content-Security-Policy forbids them. Card fonts are declared here, so they only
     download on the page that uses them.
   Sources (2026-09-29): Squid = squid-racing/docs/LOOK.md + src/fonts; Reaches = reaches/docs/LOOK.md + card art
   public/cards/s1_strike@zoom.webp; Steal a Ghost = steal-a-ghost/docs/LOOK.md + assets/video/logo.png + a frame
   of assets/video/steal-a-ghost-56s.mp4; Stick With It = Daily Workout App/docs/LOOK.md + the idle pose from
   app/src/components/StickFigure.tsx. scripts/make-game-art.mjs rebuilds the pictures.
   Pass history:
   G1 2026-09-29 first build (second site pass: the old brand-pattern cards become game-native cards).
   G2 2026-09-29 first look: the wide layouts never applied (a container query cannot restyle its own container),
      so Reaches text ran into its art and the Steal a Ghost photo covered its logo; now plain media queries.
   G3 2026-09-29 the Squid picture was stretched past its real size (soft) and its fade hid the bubbles: wide
      screens now pair Squid with Reaches + Steal a Ghost and put Stick With It (the one app) in a band below;
      the fade starts at 80%; phones get a squarer crop so the squid reads bigger.
   G4 2026-09-29 1024 wide: Reaches and Stick With It left an empty middle; mid screens split text and art into
      two halves (art centred), and the Stick With It band starts at 1024.
   G5 2026-09-29 phones: on 568x320 the Squid picture shrank to half width (a capped height shrank its width too);
      the width is now pinned. At 320 the Stick With It tags get their own row and the title fits beside the figure.
   G6 2026-09-29 checks: reduced motion now stops every card transition (the switch was out-ranked); high-contrast
      mode keeps every button outline, the little guy, and the Squid label above its title.
   G7 2026-09-29 polish: every card answers a press (Reaches and Stick With It had none); hover colour changes
      under 300 ms; the ghost fog is a little stronger so the hover reads.
   G8 2026-09-29 critique round 1: on narrow phones the Reaches label gets its own row (it broke in two beside
      the art); each card's heading comes before its label in the HTML (heading-to-heading screen-reader jumps
      now hear the label and the Ages 16+ rating); "increase contrast" makes card hairlines solid.
   ============================================================================================================ */

/* ---------- Card fonts: Google Fonts' latin subsets, self-hosted. Licences in /fonts (OFL-*.txt; Luckiest Guy is
   Apache 2.0, LICENSE-LuckiestGuy.txt). Baloo 2 and Nunito are the exact files Squid Racing ships. ------------- */
@font-face{font-family:"Baloo 2";src:url("/fonts/baloo2-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";src:url("/fonts/nunito-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bebas Neue";src:url("/fonts/bebas-neue-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";src:url("/fonts/cinzel-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Luckiest Guy";src:url("/fonts/luckiest-guy-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";src:url("/fonts/caveat-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url("/fonts/outfit-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- The section (Astrowake chrome) ------------------------------------------------------------------- */
.games{padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,104px)}
.games-head{display:grid;gap:clamp(10px,1.4vw,14px);margin-bottom:clamp(22px,3vw,36px)}
.games-intro{max-width:44ch;color:var(--text);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.55;text-wrap:pretty}
.game-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1180px){
  .game-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .g-squid{grid-column:1/span 7;grid-row:1/span 2}
  .g-reaches,.g-ghost{grid-column:8/span 5}
  .g-swi{grid-column:1/-1}
}

/* ---------- What every card shares: structure only, never look ----------------------------------------------- */
.game{--pad:clamp(20px,2.3vw,28px);position:relative;isolation:isolate;min-width:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:var(--pad);column-gap:clamp(16px,2vw,24px)}
.g-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.g-name{grid-area:name;margin-top:6px;text-wrap:balance}
.g-desc{grid-area:desc;margin-top:12px;max-width:44ch;text-wrap:pretty}
.g-note{grid-area:note;margin-top:10px}
.g-cta{grid-area:cta;justify-self:start;align-self:end;margin-top:20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.g-cta .i{width:1em;height:1em;flex:none}
.g-art{grid-area:art;position:relative;min-width:0}
.g-art img{display:block;width:100%;height:100%;object-fit:cover}
/* the whole card is the button's hit area (Fitts); the visible button stays the card's one action */
.g-cta::after{content:"";position:absolute;inset:0;z-index:2}
.game:has(.g-cta:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
@supports selector(:has(a)){.g-cta:focus-visible{outline:none}}
/* phones: the button spans the card so it lands under the thumb */
@media (max-width:479px){.g-cta{justify-self:stretch}}

/* ============================================================================================================
   SQUID RACING: chunky deep-sea kawaii. Teal-navy water with soft light shafts, sea-glass edges with a cyan
   hairline, Baloo 2 + Nunito, the glossy candy Play button with its darker lip. Never scary, never a flat navy
   "banking app" panel, no emoji, no hard black sticker frame (docs/LOOK.md).
   ============================================================================================================ */
.g-squid{border-radius:26px;border:1px solid rgba(109,252,255,.25);color:#eaf6ff;font-family:"Nunito","Segoe UI",system-ui,sans-serif;
  background:
    linear-gradient(104deg,transparent 56%,rgba(160,245,255,.07) 61%,transparent 69%),
    linear-gradient(97deg,transparent 14%,rgba(160,245,255,.05) 19%,transparent 27%),
    linear-gradient(180deg,#0a4a6b 0%,#04263b 52%,#021621 100%);
  grid-template-areas:"art" "meta" "name" "desc" "cta"}
.g-squid .g-art{width:calc(100% + var(--pad) * 2);margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0;aspect-ratio:5/4;max-height:58svh;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
.g-squid .g-art img{object-position:36% 60%}
@media (min-width:480px){.g-squid .g-art{aspect-ratio:16/10}.g-squid .g-art img{object-position:40% 55%}}
.g-squid .g-meta{margin-top:2px;font:800 .8125rem/1.3 "Nunito","Segoe UI",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7ffcff}
.g-squid .g-name{font:800 clamp(2.25rem,1.3rem + 3.2vw,3.5rem)/1 "Baloo 2","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;letter-spacing:-.01em;
  color:#eaf6ff;text-shadow:0 3px 0 rgba(7,19,28,.55)}
.g-squid .g-desc{font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5;color:#cfe9f5}
/* the candy button: same-hue edge, white gloss on top, darker lip underneath, hard drop */
.g-squid .g-cta{min-height:54px;padding:0 24px 0 20px;border-radius:18px;border:1.5px solid #17a6c2;
  background:linear-gradient(180deg,#7ffcff 0%,#1fb9d6 100%);color:#021019;font:800 1.1875rem/1 "Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(6,98,122,.35),0 4px 0 #0b6f86,0 10px 18px rgba(2,16,25,.35);
  transition:transform .14s cubic-bezier(.22,.9,.3,1),box-shadow .14s cubic-bezier(.22,.9,.3,1)}
.g-squid .g-cta .i{width:.8em;height:.8em}
@media (hover:hover) and (pointer:fine){
  .g-squid:hover .g-cta{transform:translateY(-1px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(6,98,122,.35),0 5px 0 #0b6f86,0 12px 20px rgba(2,16,25,.38)}
}
.g-squid:has(.g-cta:focus-visible) .g-cta{transform:translateY(-1px)}
/* the candy press: the lip squashes and the button sinks */
.g-squid:active .g-cta{transform:translateY(3px) scale(.955);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(6,98,122,.3),0 1px 0 #0b6f86,0 4px 8px rgba(2,16,25,.3)}
@media (min-width:640px) and (max-width:1179px){
  .g-squid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;
    grid-template-areas:"art ." "art meta" "art name" "art desc" "art cta"}
  .g-squid .g-art{grid-row:1/-1;width:auto;margin:calc(var(--pad) * -1) 0 calc(var(--pad) * -1) calc(var(--pad) * -1);aspect-ratio:auto;max-height:none;min-height:340px;
    -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
  .g-squid .g-cta{align-self:start}
}
@media (min-width:1180px){
  .g-squid{grid-template-rows:minmax(300px,1fr) auto auto auto auto}
  .g-squid .g-art{aspect-ratio:auto;max-height:none}
}
/* landscape phones: keep the picture short enough that the words and the button share the screen with it */
@media (orientation:landscape) and (max-height:520px) and (max-width:639px){.g-squid .g-art{max-height:60svh}.g-squid .g-art img{object-position:40% 10%}}

/* ============================================================================================================
   REACHES: serious, dark, gilded noir. Near-black indigo with faint rain and a low violet glow, hairline gold on a
   small radius, Bebas Neue caps with a gold-lit logotype and diamond rule, Cinzel for the words, gold-outlined
   button. Weighty, never cartoonish: no candy, no gloss, no emoji, no sparkles (docs/LOOK.md).
   ============================================================================================================ */
.g-reaches{border-radius:8px;border:1px solid rgba(255,215,0,.24);color:#e8e4d6;font-family:"Cinzel","Trajan Pro",Georgia,serif;
  background-color:#050510;
  background-image:
    linear-gradient(180deg,transparent,rgba(214,206,255,.15),transparent),linear-gradient(180deg,transparent,rgba(214,206,255,.12),transparent),
    linear-gradient(180deg,transparent,rgba(214,206,255,.14),transparent),linear-gradient(180deg,transparent,rgba(214,206,255,.1),transparent),
    linear-gradient(180deg,transparent,rgba(214,206,255,.13),transparent),linear-gradient(180deg,transparent,rgba(214,206,255,.1),transparent),
    radial-gradient(90% 65% at 72% 112%,rgba(106,13,173,.42),transparent 70%),
    radial-gradient(60% 50% at 10% -10%,rgba(40,20,90,.5),transparent 70%);
  background-size:1px 76px,1px 118px,1px 64px,1px 96px,1px 132px,1px 84px,100% 100%,100% 100%;
  background-position:9% 18%,27% 64%,44% 6%,58% 44%,76% 78%,93% 24%,0 0,0 0;
  background-repeat:no-repeat;
  grid-template-columns:minmax(0,1fr) 84px;grid-template-areas:"meta meta" "name art" "desc desc" "note note" "cta cta";
  transition:border-color .26s ease}
.g-reaches .g-art{align-self:start;margin-top:8px}
.g-reaches .g-art img{height:auto;aspect-ratio:480/676;border-radius:6px;border:1px solid rgba(255,215,0,.5);box-shadow:0 12px 28px rgba(0,0,0,.55);
  transition:border-color .26s ease}
.g-reaches .g-meta{font:400 1rem/1.2 "Bebas Neue","Arial Narrow",Impact,sans-serif;letter-spacing:.16em;color:#cdb98a}
.g-reaches .g-name{font:400 clamp(2.5rem,2rem + 1.4vw,3rem)/.95 "Bebas Neue","Arial Narrow",Impact,sans-serif;letter-spacing:.07em;color:#f5ecd0;
  text-shadow:0 0 18px rgba(255,215,0,.35),0 0 2px rgba(255,215,0,.4)}
.g-reaches .g-name .g-rule{display:block;width:84px;height:10px;margin-top:10px;color:#ffd700}
.g-reaches .g-desc{font-size:1rem;line-height:1.6;color:#e8e4d6;letter-spacing:.01em}
.g-reaches .g-note{font:400 .9375rem/1.3 "Bebas Neue","Arial Narrow",Impact,sans-serif;letter-spacing:.14em;color:#cdb98a}
.g-reaches .g-cta{min-height:48px;padding:3px 22px 0;border-radius:2px;border:1px solid rgba(255,215,0,.6);background:rgba(255,215,0,.06);color:#ffd700;
  font:400 1.25rem/1 "Bebas Neue","Arial Narrow",Impact,sans-serif;letter-spacing:.16em;
  transition:border-color .26s ease,box-shadow .26s ease,background-color .26s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.g-reaches .g-cta .i{margin-top:-3px}
.g-reaches:active .g-cta{transform:scale(.98)}
/* the gold hairline warming */
@media (hover:hover) and (pointer:fine){
  .g-reaches:hover{border-color:rgba(255,215,0,.55)}
  .g-reaches:hover .g-art img{border-color:#ffd700}
  .g-reaches:hover .g-cta{border-color:#ffd700;background:rgba(255,215,0,.1);box-shadow:inset 0 0 0 1px rgba(255,215,0,.2),0 0 20px rgba(255,215,0,.16)}
}
.g-reaches:has(.g-cta:focus-visible){border-color:rgba(255,215,0,.55)}
.g-reaches:has(.g-cta:focus-visible) .g-cta{border-color:#ffd700;background:rgba(255,215,0,.1)}
@media (min-width:480px){
  .g-reaches{grid-template-columns:minmax(0,1fr) clamp(116px,22vw,150px);grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:"meta art" "name art" "desc art" "note art" "cta art"}
  .g-reaches .g-art{grid-row:1/-1;align-self:center;margin-top:0}
}

/* ============================================================================================================
   STEAL A GHOST: spooky-cartoon Halloween at dusk. Ink-violet night, the graveyard from the game itself, the mint
   bubble-letter logo, a mint Luckiest Guy button like the in-game SHOP, a lilac-edged age pill. Creepy-cute, not
   childish: no neon rings, no beams, no candy pinks, no "YOU!" thumbnails (docs/LOOK.md). Body words use Nunito
   as the nearest approved rounded face to the game's Fredoka One (not on the download list).
   ============================================================================================================ */
.g-ghost{border-radius:16px;border:2px solid rgba(150,255,190,.25);color:#ebebf5;font-family:"Nunito","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(80% 55% at 18% -8%,rgba(210,190,255,.12),transparent 65%),
    linear-gradient(180deg,#28263a 0%,#1b1728 50%,#120e1a 100%);
  grid-template-areas:"art" "meta" "name" "desc" "cta"}
.g-ghost .g-art{margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 4px;height:clamp(160px,46vw,210px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.g-ghost .g-art img{object-position:50% 58%}
/* the soft ground fog: brightens on hover, never a streak of light */
.g-ghost .g-art::after{content:"";position:absolute;inset:auto 0 0 0;height:70%;pointer-events:none;
  background:radial-gradient(95% 85% at 55% 100%,rgba(235,235,245,.34),transparent 72%);opacity:.3;transition:opacity .45s ease}
.g-ghost .g-meta{font:800 .8125rem/1.3 "Nunito","Segoe UI",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#96ffbe}
.g-ghost .g-age{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border:2px solid #d2beff;border-radius:12px;color:#d2beff;background:rgba(18,14,26,.6);letter-spacing:.06em}
.g-ghost .g-name{margin-top:10px;width:min(100%,300px)}
.g-ghost .g-name img{display:block;width:100%;height:auto}
.g-ghost .g-desc{font-weight:600;font-size:1.0625rem;line-height:1.5;color:#ebebf5}
.g-ghost .g-cta{min-height:50px;padding:4px 22px 0;border-radius:14px;border:2px solid #120e1a;background:#96ffbe;color:#120e1a;
  font:400 1.25rem/1 "Luckiest Guy","Arial Black",Impact,sans-serif;letter-spacing:.04em;
  box-shadow:0 3px 0 #3d8f62,0 8px 18px rgba(0,0,0,.35);transition:background-color .3s ease,transform .14s ease,box-shadow .14s ease}
.g-ghost .g-cta .i{margin-top:-4px}
@media (hover:hover) and (pointer:fine){
  .g-ghost:hover .g-art::after{opacity:1}
  .g-ghost:hover .g-cta{background:#b4ffd0}
}
.g-ghost:has(.g-cta:focus-visible) .g-art::after{opacity:1}
.g-ghost:active .g-cta{transform:translateY(2px);box-shadow:0 1px 0 #3d8f62,0 4px 10px rgba(0,0,0,.3)}
@media (min-width:480px){
  .g-ghost{grid-template-columns:minmax(0,1fr) 42%;grid-template-rows:auto auto auto 1fr;grid-template-areas:"meta art" "name art" "desc art" "cta art"}
  .g-ghost .g-art{grid-row:1/-1;height:auto;min-height:100%;margin:calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
  .g-ghost .g-art img{position:absolute;inset:0;object-position:58% 60%}
  .g-ghost .g-name{margin-top:8px;width:min(100%,260px)}
}

/* ============================================================================================================
   STICK WITH IT: calm paper and ink. Warm paper card with a hairline sand border, warm dark ink, one deep sage
   accent, the handwritten Caveat title, Outfit for the words, a big sage pill button with no shadow. The faceless
   stick figure is the app's own idle pose. Dashed means "not open to everyone", never faded. No gradients, no
   face, no amber (it means a missed day), no "streak" (docs/LOOK.md).
   ============================================================================================================ */
.g-swi{border-radius:16px;border:1px solid #e6e2d7;background:#fffdf9;color:#26231d;font-family:"Outfit","Segoe UI",system-ui,sans-serif;
  grid-template-columns:minmax(0,1fr) 52px;grid-template-areas:"meta meta" "name art" "desc desc" "cta cta";transition:border-color .3s ease}
@media (max-width:359px){.g-swi{grid-template-columns:minmax(0,1fr) 44px}}
.g-swi .g-art{align-self:end;padding-bottom:2px}
.g-swi .g-art svg{display:block;width:100%;height:auto;overflow:visible}
.g-swi .g-meta{font:600 .8125rem/1.2 "Outfit","Segoe UI",system-ui,sans-serif;color:#26231d}
.g-swi .g-tag{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;border-radius:999px;border:1.5px solid #6f6a5e;color:#26231d;background:#fffdf9}
.g-swi .g-tag--dashed{border-style:dashed}
.g-swi .g-name{margin-top:8px;align-self:center;font:700 clamp(2.125rem,1.5rem + 2.6vw,2.875rem)/1 "Caveat","Segoe Print",cursive;color:#26231d}
.g-swi .g-desc{font-size:1.0625rem;line-height:1.55;color:#26231d}
.g-swi .g-cta{min-height:52px;padding:0 26px;border-radius:999px;border:0;background:#3c7462;color:#fff;font:600 1.0625rem/1 "Outfit","Segoe UI",system-ui,sans-serif;
  transition:background-color .2s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.g-swi:active .g-cta{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .g-swi:hover{border-color:#b9cfc6}
  .g-swi:hover .g-cta{background:#2f5e4f}
}
.g-swi:has(.g-cta:focus-visible) .g-cta{background:#2f5e4f}
@media (min-width:480px){
  .g-swi{grid-template-columns:minmax(0,1fr) 92px;grid-template-rows:auto auto auto 1fr;grid-template-areas:"meta art" "name art" "desc art" "cta art"}
  .g-swi .g-art{grid-row:1/-1;align-self:end;padding:0 4px 4px}
}
/* mid screens (cards run full width): text and art split into two balanced halves, art centred in its half */
@media (min-width:640px) and (max-width:1179px){
  .g-reaches{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .g-reaches .g-art{justify-self:center;width:clamp(130px,19vw,190px)}
  .g-swi{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .g-swi .g-art{justify-self:center;width:96px}
}
/* wide screens: the one app sits as a calm band under the three games: title, words, button, the little guy */
@media (min-width:1024px){
  .g-swi{grid-template-columns:auto minmax(0,1.25fr) auto 84px;grid-template-rows:auto auto;column-gap:clamp(28px,3.4vw,48px);
    grid-template-areas:"meta desc cta art" "name desc cta art";padding-block:clamp(20px,2vw,26px)}
  .g-swi .g-meta{align-self:end}
  .g-swi .g-name{align-self:start}
  .g-swi .g-desc{margin-top:0;align-self:center}
  .g-swi .g-cta{margin-top:0;align-self:center}
  .g-swi .g-art{grid-row:1/-1;align-self:end;padding:0}
}

/* ---------- Motion: off under reduced motion (the colour changes stay, instantly) ----------------------------- */
@media (prefers-reduced-motion:reduce){
  .game,.game .g-cta,.game .g-art img,.game .g-art::after{transition:none}
  .g-squid:hover .g-cta,.g-squid:active .g-cta,.g-squid:has(.g-cta:focus-visible) .g-cta,.g-ghost:active .g-cta,.g-reaches:active .g-cta,.g-swi:active .g-cta{transform:none}
}

/* ---------- High contrast and forced colours ------------------------------------------------------------------ */
/* "increase contrast": each card's see-through hairline becomes its game's solid colour */
@media (prefers-contrast:more){
  .g-squid{border-color:#7ffcff}
  .g-reaches,.g-reaches .g-cta{border-color:#ffd700}
  .g-ghost{border-color:#96ffbe}
  .g-swi{border-color:#6f6a5e}
}
@media (forced-colors:active){
  .game{border:1px solid CanvasText}
  .game .g-cta{border:2px solid ButtonText}
  /* the system draws a plate behind each line of text; tight display lines let one plate cover the label above */
  .game .g-name{line-height:1.3}
  .g-art::after{display:none}
  /* the little guy is drawn with SVG attributes, which high-contrast mode leaves alone: give him the text colour */
  .g-swi .g-art g,.g-swi .g-art path[stroke="#e6e2d7"]{stroke:CanvasText}
  .g-swi .g-art circle{fill:CanvasText;stroke:CanvasText}
}