/* GamesGarden hub pages: home (/) and the games index (/games/). Phone first (390x844), then 844x390, then 1440x900.
   Uses only design/garden.css tokens. Every tile override is scoped under .hub-grid, so the shared .tile in site.css
   (also used by game sprouts and the promote snippet) is untouched. */

.hub-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.house-slot:empty { display: none; }
/* a filled ad card gets the same breathing room as the sections around it (qa/spacing.mjs; Ariel 11-02) */
.house-slot:not(:empty) { margin-top: 28px; }
@media (min-width: 900px) { .house-slot:not(:empty) { margin-top: 40px; } }

/* ---------- top: one heading, one line, the mood chips ---------- */
.hub-top { display: grid; gap: 8px; padding: 14px 0 6px; min-width: 0; }
.hub-top h1, .hub-top .hub-h1 { font-size: clamp(26px, 6.9vw, 56px); line-height: 1.04; letter-spacing: -.03em; max-width: 20ch; }
.hub-top--games h1 { font-size: clamp(34px, 9vw, 60px); }
.hub-line { color: var(--gg-ink-2); font-size: var(--gg-text-sm); font-weight: 600; line-height: 1.35; }
.hub-filter-note { min-height: 0; color: var(--gg-ink-3); font-size: var(--gg-text-sm); font-weight: 700; }
.hub-filter-note:empty { display: none; }

.hub-chips {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 2px calc(-1 * var(--gg-gutter)) 0; padding: 4px var(--gg-gutter) 10px; scroll-padding-inline: var(--gg-gutter);
}
.hub-chips::-webkit-scrollbar { display: none; }
.hub-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border: var(--gg-border); border-radius: var(--gg-r-pill); background: var(--gg-paper); box-shadow: var(--gg-shadow-sm);
  color: var(--gg-ink); font-weight: 800; font-size: var(--gg-text-sm); text-decoration: none; white-space: nowrap;
  transition: transform var(--gg-dur-sm) var(--gg-ease-spring), box-shadow var(--gg-dur-sm) var(--gg-ease-spring), background var(--gg-dur-sm);
  -webkit-tap-highlight-color: transparent;
}
.hub-chip:active, .hub-chip.is-pressed { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--gg-ink); transition-duration: var(--gg-dur-xs); }
@media (hover: hover) { .hub-chip:hover { background: var(--gg-lime-100); } }
.hub-chip:focus-visible { outline: 3px solid var(--gg-ink); outline-offset: 2px; }
.hub-chip[aria-current="true"] { background: var(--gg-lime); }
.hub-dot { width: 12px; height: 12px; flex: none; border-radius: var(--gg-r-pill); border: 2px solid var(--gg-ink); background: var(--gg-paper); }
.hub-dot--friend { background: var(--gg-pink); }
.hub-dot--bot { background: var(--gg-lavender); }
.hub-dot--quick { background: var(--gg-butter); }
.hub-dot--think { background: var(--gg-sky); }
.hub-dot--classic { background: var(--gg-suit-red); }
.hub-dot--relax { background: var(--gg-green-300); }
.hub-dot--all { background: var(--gg-lime); }

/* ---------- the tile grid: 2 columns on phones, a featured tile first ---------- */
.hub-games-sec { padding: 6px 0 4px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.hub-grid [hidden] { display: none !important; }
.hub-grid .tile { min-width: 0; padding: 6px; border-radius: var(--gg-r-lg); box-shadow: var(--gg-shadow); }
@media (hover: hover) { .hub-grid .tile:hover { box-shadow: 6px 7px 0 var(--gg-ink); } }
.hub-grid .tile:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--gg-ink); }
.hub-grid .tile__art { height: 106px; border-radius: 18px; }
.hub-grid .tile__tags { top: 12px; left: 12px; right: 12px; }
.hub-grid .tile__body { padding: 10px 6px 2px; gap: 4px; }
.hub-grid .tile h3 { font-size: var(--gg-text-lg); letter-spacing: -.015em; line-height: 1.08; }
.hub-grid .tile__body p { font-size: var(--gg-text-sm); line-height: 1.38; }
.hub-grid .tile__meta { font-size: var(--gg-text-xs); line-height: 1.35; }
.hub-grid .tile__foot { gap: 6px; padding: 8px 4px 4px; }
.hub-page--home .hub-grid .tile:not(.tile--feature) .tile__meta { display: none; }
.hub-grid .tile__actions { flex-wrap: nowrap; gap: 8px; }
.hub-grid .tile__link { flex: 1 1 auto; display: flex; min-width: 0; text-decoration: none; }
.hub-grid .tile__link .gg-btn { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: var(--gg-text-md); }
.hub-grid .tile__guide { flex: none; width: 44px; padding: 0; }
.hub-grid .tile__guide span { display: none; }

/* "Planted by a player" is too wide for a compact tile's art: it becomes a green line under the art there */
.hub-grid .tile:not(.tile--feature) .tile__tags:has(.tag-planted) { position: static; padding: 8px 6px 0; }
.hub-grid .tile:not(.tile--feature) .tag-planted { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; white-space: normal; line-height: 1.25; color: var(--gg-green-700); font-size: var(--gg-text-xs); }
.hub-grid .tile:not(.tile--feature) .tile__tags:has(.tag-planted) + .tile__body { padding-top: 4px; }

/* the classics draw their art in CSS at fixed sizes: scale them down for the small art box */
.hub-grid .tile:not(.tile--feature) .art-fan { --gg-card-w: 40px; }
.hub-grid .tile:not(.tile--feature) .art-fan .gg-card { margin-left: -16px; transform-origin: center 74px; }
.hub-grid .tile:not(.tile--feature) .art-fan .gg-card:first-child { margin-left: 0; }
.hub-grid .tile:not(.tile--feature) .art-crib { gap: 8px; }
.hub-grid .tile:not(.tile--feature) .pegboard { gap: 6px; padding: 5px 10px; }
.hub-grid .tile:not(.tile--feature) .pegboard i:nth-child(n+8) { display: none; }
.hub-grid .tile:not(.tile--feature) .art-gin { gap: 8px; }
.hub-grid .tile:not(.tile--feature) .art-gin .meld { --gg-card-w: 34px; }
.hub-grid .tile:not(.tile--feature) .art-gin .meld .gg-card + .gg-card { margin-left: -16px; }
.hub-grid .tile:not(.tile--feature) .art-board { width: 92px; }
.hub-grid .tile:not(.tile--feature) .art-board .gg-piece { width: 16px; }

/* featured: full width on phones, art left and words right so the first screen still shows two rows of art */
.hub-grid .tile--feature { grid-column: 1 / -1; }
.hub-grid .tile--feature .tile__guide { width: auto; padding: 8px 14px; }
.hub-grid .tile--feature .tile__guide span { display: inline; }
@media (max-width: 699.98px) {
  .hub-grid .tile--feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto 1fr auto; column-gap: 4px; }
  .hub-grid .tile--feature .tile__art { grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 190px; }
  .hub-grid .tile--feature .tile__tags { position: static; grid-column: 2; padding: 6px 6px 0; }
  .hub-grid .tile--feature .tag-planted { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; white-space: normal; line-height: 1.25; color: var(--gg-green-700); font-size: var(--gg-text-xs); }
  .hub-grid .tile--feature .tile__body { grid-column: 2; padding: 4px 6px 0; }
  .hub-grid .tile--feature h3 { font-size: var(--gg-text-xl); }
  .hub-grid .tile--feature .tile__foot { grid-column: 2; grid-row: 4; padding: 8px 4px 2px 6px; }
  .hub-grid .tile--feature .tile__meta { display: none; }
  .hub-grid .tile--feature .tile__guide { width: 44px; padding: 0; }
  .hub-grid .tile--feature .tile__guide span { display: none; }
}
/* 700 px and up: a banner across the grid, art left (~55%), words and Play right, art height capped */
@media (min-width: 700px) {
  .hub-grid .tile--feature { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); grid-template-rows: auto auto; align-content: center; column-gap: 8px; }
  .hub-grid .tile--feature .tile__art { grid-column: 1; grid-row: 1 / span 2; height: 220px; }
  .hub-grid .tile--feature .tile__body { grid-column: 2; grid-row: 1; align-self: end; padding: 8px 10px 0; gap: 6px; }
  .hub-grid .tile--feature .tile__foot { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; padding: 8px 10px 6px; }
  .hub-grid .tile--feature h3 { font-size: var(--gg-text-2xl); }
  .hub-grid .tile--feature .tile__actions { flex-wrap: wrap; }
  .hub-grid .tile--feature .tile__link { flex: 0 0 auto; }
  .hub-grid .tile--feature .tile__link .gg-btn { min-width: 128px; }
}

/* the seed tile: the one "make your own" teaser, it fills the last cell */
.hub-seed {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 6px 10px; color: var(--gg-ink); text-decoration: none;
  background: var(--gg-butter-100); border: 2px dashed var(--gg-ink); border-radius: var(--gg-r-lg);
  transition: transform var(--gg-dur-md) var(--gg-ease-spring), background var(--gg-dur-sm);
  animation: gg-rise var(--gg-dur-lg) var(--gg-ease-out) both; animation-delay: calc(var(--d, 0) * 70ms * var(--gg-time));
}
.hub-seed:active { transform: translate(2px, 2px); }
@media (hover: hover) { .hub-seed:hover { background: var(--gg-butter); } }
.hub-seed:focus-visible { outline: 3px solid var(--gg-ink); outline-offset: 3px; }
.hub-seed__art { display: grid; place-items: center; height: 106px; border-radius: 18px; background: var(--gg-paper); border: 2px solid var(--gg-ink); }
.hub-seed__art svg { width: 100%; height: 100%; }
.hub-seed__body { display: grid; gap: 4px; padding: 4px 6px 0; }
.hub-seed__title { font-family: var(--gg-font-display); font-size: var(--gg-text-lg); font-weight: 800; letter-spacing: -.015em; line-height: 1.08; }
.hub-seed__body > span { color: var(--gg-ink-2); font-size: var(--gg-text-sm); line-height: 1.38; }
.hub-seed__btn { margin: auto 4px 0; pointer-events: none; }

/* ---------- play together + this week's board ---------- */
.hub-play { display: grid; gap: 14px; padding: 26px 0 4px; }
.hub-card { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 16px; background: var(--gg-paper); border: var(--gg-border); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-lg); }
.hub-card h2 { font-size: var(--gg-text-xl); letter-spacing: -.02em; }
.hub-card p { color: var(--gg-ink-2); line-height: 1.45; }
.hub-card--friend { background: var(--gg-lime-100); }
.hub-card__go { justify-self: start; min-height: 56px; }
.hub-bots { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-week { background: var(--gg-lavender-100); }
.hub-week__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.hub-week__ends { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 2px solid var(--gg-ink); border-radius: var(--gg-r-pill); background: var(--gg-paper); font-weight: 800; font-size: var(--gg-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-week__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: calc(3 * 46px + 2 * 6px); }
.hub-week__rows > li { flex: none; }
.hub-week__rows li[hidden] { display: none; }
.hub-week__rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 8px; background: var(--gg-paper); border: 2px solid var(--gg-ink); border-radius: var(--gg-r-md); }
.hub-week__rows li.is-you { background: var(--gg-lime-100); }
.hub-week__rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--gg-r-pill); border: 2px solid var(--gg-ink); background: var(--gg-butter); font-weight: 800; font-size: var(--gg-text-sm); }
.hub-week__rows li:nth-child(2) .hub-week__rank { background: var(--gg-sand); }
.hub-week__rows li:nth-child(3) .hub-week__rank { background: var(--gg-pink-100); }
.hub-week__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.hub-week__pts { font-weight: 800; font-size: var(--gg-text-sm); font-variant-numeric: tabular-nums; color: var(--gg-ink-2); }
.hub-week__rows li.is-empty .hub-week__name b { display: block; width: 62%; height: 12px; border-radius: var(--gg-r-pill); background: var(--gg-sand); }
.hub-week__rows li.is-open .hub-week__name { color: var(--gg-ink-3); font-weight: 700; }
/* the one invite row under the filled names: dashed, quieter, and it may wrap to two short lines */
/* it grows into the space the missing names would take, so the card never looks half empty and never changes height */
.hub-week__rows > li.is-invite { flex: 1 1 auto; height: auto; min-height: 46px; }
.hub-week__rows li.is-invite { grid-template-columns: 30px minmax(0, 1fr); border-style: dashed; background: color-mix(in srgb, var(--gg-paper) 60%, transparent); }
.hub-week__rows li.is-invite .hub-week__rank { background: var(--gg-paper); border-style: dashed; }
.hub-week__rows li.is-invite .hub-week__name { white-space: normal; line-height: 1.2; color: var(--gg-ink-2); font-weight: 700; font-size: var(--gg-text-sm); }
.hub-week__rows li.is-invite .hub-week__pts { display: none; }
.hub-week__note { min-height: 2.9em; font-size: var(--gg-text-sm); font-weight: 600; }
.hub-week__all { justify-self: start; }

/* ---------- about + FAQ (the words for search and AI answers, at the bottom) ---------- */
.hub-about { display: grid; gap: 28px; padding: 34px 0 8px; }
.hub-about h2 { font-size: var(--gg-text-2xl); }
.hub-about__text p { font-size: var(--gg-text-md); }
.hub-faq { display: grid; gap: 14px; }
.hub-faq .lp-faq { gap: 12px; }
@media (max-width: 699.98px) {
  .hub-faq .lp-faq summary { min-height: 48px; padding: 6px 14px 6px 16px; font-size: var(--gg-text-md); }
  .hub-faq .lp-faq summary::after { width: 26px; height: 26px; }
  .hub-faq .lp-faq details { box-shadow: var(--gg-shadow-sm); }
  .hub-about { gap: 18px; padding-top: 24px; }
  .hub-play { padding-top: 22px; }
  .hub-about__text p { font-size: var(--gg-text-sm); line-height: 1.55; }
}

/* ---------- /games/ extras ---------- */
.hub-same { padding-top: 34px; }
.hub-same h2 { font-size: var(--gg-text-2xl); }
@media (max-width: 639.98px) {
  .hub-same .lp-grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-same .lp-card { padding: 14px; gap: 6px; border-radius: var(--gg-r-md); box-shadow: var(--gg-shadow); }
  .hub-same .lp-card p { font-size: var(--gg-text-sm); line-height: 1.4; }
  .hub-same .lp-card h3 { font-size: var(--gg-text-md); }
  .hub-same .site-link { font-size: var(--gg-text-sm); line-height: 1.25; }
  .hub-same .lp-icon { width: 40px; height: 40px; box-shadow: none; }
  .hub-same .lp-icon svg { width: 22px; height: 22px; }
}

/* footer: two columns on the hub pages too (no "soon" labels left to squeeze) */
.hub-page .site-foot { margin-top: 24px; }
@media (max-width: 520px) { .hub-page .site-foot__nav { grid-template-columns: 1fr 1fr; } }

/* ---------- wider: 4 columns, the featured tile spans 2 x 2 ---------- */
@media (min-width: 700px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* 3 across leaves Checkers + the seed tile on the last row: the seed tile takes the 2 cells, art left */
  .hub-seed { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 8px; }
  .hub-seed__art { grid-row: 1 / span 2; height: auto; min-height: 150px; }
  .hub-seed__body { align-self: end; padding-top: 10px; }
  .hub-seed__btn { margin: 6px 4px 0; justify-self: start; }
  .hub-page--home .hub-grid .tile:not(.tile--feature) .tile__meta { display: block; }
  .hub-play { grid-template-columns: 1fr 1fr; }
  .hub-week { grid-column: 1 / -1; }
}
/* short landscape phones (844x390): heading and chips in two short lines, tiles start high */
@media (orientation: landscape) and (max-height: 500px) {
  .hub-top { padding: 8px 0 2px; gap: 4px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hub-top h1, .hub-top .hub-h1 { font-size: 26px; max-width: none; grid-column: 1 / -1; }
  .hub-top--games h1 { font-size: 26px; }
  .hub-grid .tile--feature .tile__meta { display: none; }
  .hub-line { font-size: var(--gg-text-sm); grid-column: 1 / -1; }
  .hub-chips { grid-column: 1 / -1; }
  .hub-grid .tile__art { height: 100px; }
  .hub-grid .tile--feature .tile__art { height: 200px; }
  .hub-grid .tile--feature .tile__body p { font-size: var(--gg-text-sm); }
}
@media (min-width: 1000px) {
  .hub-top { padding: 36px 0 12px; gap: 12px; }
  .hub-top h1, .hub-top .hub-h1 { font-size: 54px; max-width: 26ch; text-wrap: balance; }
  .hub-top--games h1 { font-size: 64px; }
  .hub-line { font-size: var(--gg-text-lg); }
  .hub-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .hub-grid { gap: 22px 20px; }
  .hub-grid .tile { padding: 8px; border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-lg); }
  .hub-grid .tile__art, .hub-seed__art { height: 150px; border-radius: 24px; }
  .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-seed { grid-column: auto; display: flex; flex-direction: column; }
  .hub-seed__art { height: 150px; min-height: 0; }
  .hub-seed__body { padding-top: 4px; }
  .hub-seed__btn { margin: auto 4px 0; justify-self: auto; }
  .hub-grid .tile--feature .tile__art { height: 280px; }
  .hub-grid .tile--feature .tile__body { padding: 8px 20px 0; gap: 10px; }
  .hub-grid .tile--feature h3 { font-size: var(--gg-text-3xl); }
  .hub-grid .tile--feature .tile__body p { font-size: var(--gg-text-lg); max-width: 34ch; }
  .hub-grid .tile--feature .tile__meta { font-size: var(--gg-text-sm); }
  .hub-grid .tile--feature .tile__foot { padding: 10px 20px 6px; }
  .hub-grid .tile__body { padding: 12px 8px 2px; }
  .hub-grid .tile__guide { width: auto; padding: 8px 14px; }
  .hub-grid .tile__guide span { display: inline; }
  .hub-page--games .hub-grid .tile:not(.tile--feature) .tile__guide span { display: none; }
  .hub-page--games .hub-grid .tile:not(.tile--feature) .tile__guide { width: 44px; padding: 0; }
  .hub-grid .tile:not(.tile--feature) .art-fan { --gg-card-w: 50px; }
  .hub-grid .tile:not(.tile--feature) .art-gin .meld { --gg-card-w: 48px; }
  .hub-grid .tile:not(.tile--feature) .art-board { width: 116px; }
  .hub-grid .tile:not(.tile--feature) .art-board .gg-piece { width: 20px; }
  .hub-seed { padding: 8px 8px 12px; }
  .hub-play { grid-template-columns: 1fr 1fr 1.2fr; padding-top: 44px; gap: 20px; }
  .hub-week { grid-column: auto; grid-row: span 1; }
  .hub-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; padding-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-seed { animation: none; }
  .hub-chip, .hub-seed { transition: none; }
}
.hub-filter-note a { color: var(--gg-ink); font-weight: 800; text-underline-offset: 3px; }

/* "by <creator>" on a hub tile (platform/CREATORS.md): <p class="tile__by">by <a href="/creators/ariel/">Ariel</a></p>
   right after the tile's one-line <p> in .tile__body. The link sits above the tile's stretched Play link; the padding
   (cancelled by the negative margin) grows its tap area without moving the line. */
.hub-grid .tile__body p.tile__by { color: var(--gg-ink-3); font-size: var(--gg-text-xs); font-weight: 700; line-height: 1.3; }
.hub-grid .tile__body p.tile__by a { position: relative; z-index: 2; padding: 8px 4px; margin: -8px -4px; color: var(--gg-ink); font-weight: 800; text-underline-offset: 2px; }
.hub-grid .tile__body p.tile__by a:focus-visible { outline: 3px solid var(--gg-ink); outline-offset: 0; border-radius: 4px; }

/* 9 games (11-02): the seed tile closes the grid as a full-width row on phones and wide screens, where it would
   otherwise sit alone; at 3 across (700-999 px) it fills the last cell like a game tile */
.hub-grid .hub-seed { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; column-gap: 12px; }
.hub-grid .hub-seed .hub-seed__art { grid-row: 1 / span 2; height: auto; min-height: 120px; }
.hub-grid .hub-seed .hub-seed__body { align-self: end; padding-top: 6px; }
.hub-grid .hub-seed .hub-seed__btn { margin: 8px 4px 0; justify-self: start; }
@media (min-width: 700px) and (max-width: 999px) {
  .hub-grid .hub-seed { grid-column: auto; display: flex; flex-direction: column; }
  .hub-grid .hub-seed .hub-seed__art { height: 150px; min-height: 0; }
  .hub-grid .hub-seed .hub-seed__btn { margin: auto 4px 0; }
}
@media (min-width: 1000px) {
  .hub-grid .hub-seed { grid-template-columns: 320px minmax(0, 1fr); column-gap: 24px; }
  .hub-grid .hub-seed .hub-seed__art { min-height: 150px; }
}

/* ---------- polish 11-03 ---------- */
/* phones: the mood chips fade out at the right edge so it is obvious the row scrolls (the mask is on the scroll box,
   so every chip keeps its full tap area); from 1000 px the chips wrap and nothing fades */
@media (max-width: 999.98px) {
  .hub-chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  /* a blank end spacer so the last chip clears the fade once the row is scrolled to the end */
  .hub-chips::after { content: ""; flex: none; width: 44px; }
}
/* desktop: the three play cards keep one height, so each card's action sits on the same bottom line */
@media (min-width: 1000px) {
  .hub-card--friend, .hub-card--bot { grid-template-rows: auto auto 1fr; }
  .hub-card__go, .hub-bots { align-self: end; }
  /* "Your game could be next": one tight band, art | words | button, with a display-size title */
  .hub-grid .hub-seed { grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; column-gap: 28px; padding: 8px 28px 8px 8px; }
  .hub-grid .hub-seed .hub-seed__art { grid-row: 1; height: 120px; min-height: 0; }
  .hub-grid .hub-seed .hub-seed__body { align-self: center; padding: 0; gap: 6px; }
  .hub-grid .hub-seed .hub-seed__title { font-size: var(--gg-text-2xl); letter-spacing: -.025em; }
  .hub-grid .hub-seed .hub-seed__body > span { font-size: var(--gg-text-md); }
  .hub-grid .hub-seed .hub-seed__btn { grid-column: 3; grid-row: 1; margin: 0; align-self: center; }
}