.ug-motif { width: 1.9rem; height: 1.9rem; flex: none; color: var(--fx-signal); overflow: visible; }
.ug-motif .s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ug-motif .f { fill: currentColor; stroke: none; }

.ug-motif__streak { stroke-dasharray: 8 16; animation: ug-warp 1.1s linear infinite; opacity: .8; }
@keyframes ug-warp { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.ug-motif__cube { transform-origin: 15px 15px; animation: ug-spin 6s cubic-bezier(.5,0,.5,1) infinite; }
.ug-motif__ring { transform-origin: 15px 15px; animation: ug-spin 14s linear infinite; }
.ug-motif__orbit { transform-origin: 15px 15px; animation: ug-spin 7s linear infinite reverse; }
.ug-motif__orbit--slow { animation-duration: 11s; animation-direction: normal; }
@keyframes ug-spin { to { transform: rotate(360deg); } }

.ug-motif__rowline { animation: ug-sweep 2.6s ease-in-out infinite; }
.ug-motif__rowline:nth-of-type(2) { animation-delay: -.65s; }
.ug-motif__rowline:nth-of-type(3) { animation-delay: -1.3s; }
@keyframes ug-sweep { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.ug-motif__line { animation: ug-rise 3.6s ease-out infinite; }
.ug-motif__line:nth-of-type(2) { animation-delay: -1.2s; }
.ug-motif__line:nth-of-type(3) { animation-delay: -2.4s; }
.ug-motif__sun { transform-origin: 15px 24px; animation: ug-rise 4s ease-out infinite; }
@keyframes ug-rise { 0% { transform: translateY(6px); opacity: .3; } 60%, 100% { transform: translateY(0); opacity: 1; } }

.ug-motif__spark { transform-origin: 15px 15px; animation: ug-flare 1.7s ease-in-out infinite; }
@keyframes ug-flare { 0%, 100% { transform: scale(.5); opacity: .3; } 45% { transform: scale(1.25); opacity: 1; } }

.ug-motif__wave { stroke-dasharray: 6 8; animation: ug-flow 2.4s linear infinite; }
@keyframes ug-flow { to { stroke-dashoffset: -40; } }

.ug-motif__touch { animation: ug-beat 2.2s ease-in-out infinite; }
.ug-motif__touch--left { transform-origin: 9px 15px; }
.ug-motif__touch--right { transform-origin: 21px 15px; animation-delay: -1.1s; }
@keyframes ug-beat { 0%, 100% { transform: scale(.72); opacity: .45; } 50% { transform: scale(1.12); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ug-motif *, .ug-motif { animation: none !important; opacity: 1; }
}

.ug-games { list-style: none; margin: 0; padding: 0; }
.ug-games__row { position: relative; overflow: hidden; border-bottom: 1px solid rgb(var(--fx-muted-rgb) / 0.12); }
/* Bottom padding reserves a clear lane for the flyby so the mark never
   crosses the description text. */
.ug-games__link { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem 2rem; text-decoration: none; position: relative; z-index: 2; }
.ug-games__link:hover { background: rgb(var(--fx-signal-rgb) / 0.06); }
.ug-games__name { color: var(--fx-signal); letter-spacing: 0.08em; }
.ug-games__desc { color: rgb(var(--fx-muted-rgb) / 0.7); }
.ug-games__flyby { position: absolute; top: auto; bottom: 0.25rem; left: 0; z-index: 3; opacity: 0.85;
  animation: ug-flyby linear infinite;
  animation-duration: calc(9s + (var(--row-index) % 4) * 2.5s);
  animation-delay: calc(var(--row-index) * -1.7s); }
.ug-games__flyby .ug-motif { width: 1.4rem; height: 1.4rem; }
@keyframes ug-flyby { from { transform: translateX(-3rem); } to { transform: translateX(100vw); } }
@media (prefers-reduced-motion: reduce) {
  .ug-games__flyby { animation: none; left: auto; right: 1rem; opacity: 0.5; }
}

/* ── Marquee motif glyphs ────────────────────────────────────────────────
   The shared package renders a sized `.landing-marquee__glyph--<motif>` hook
   and paints it with currentColor; the artwork lives here so undef.games
   iconography stays out of the design system. Same ten marks as /games/. */
.landing-marquee__glyph {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.landing-marquee__glyph--warp {
  -webkit-mask-image: var(--ug-glyph-warp);
  mask-image: var(--ug-glyph-warp);
}
.landing-marquee__glyph--dice {
  -webkit-mask-image: var(--ug-glyph-dice);
  mask-image: var(--ug-glyph-dice);
}
.landing-marquee__glyph--taybols {
  -webkit-mask-image: var(--ug-glyph-taybols);
  mask-image: var(--ug-glyph-taybols);
}
.landing-marquee__glyph--grove {
  -webkit-mask-image: var(--ug-glyph-grove);
  mask-image: var(--ug-glyph-grove);
}
.landing-marquee__glyph--haiku {
  -webkit-mask-image: var(--ug-glyph-haiku);
  mask-image: var(--ug-glyph-haiku);
}
.landing-marquee__glyph--becoming {
  -webkit-mask-image: var(--ug-glyph-becoming);
  mask-image: var(--ug-glyph-becoming);
}
.landing-marquee__glyph--proverb {
  -webkit-mask-image: var(--ug-glyph-proverb);
  mask-image: var(--ug-glyph-proverb);
}
.landing-marquee__glyph--stoke {
  -webkit-mask-image: var(--ug-glyph-stoke);
  mask-image: var(--ug-glyph-stoke);
}
.landing-marquee__glyph--currents {
  -webkit-mask-image: var(--ug-glyph-currents);
  mask-image: var(--ug-glyph-currents);
}
.landing-marquee__glyph--amor {
  -webkit-mask-image: var(--ug-glyph-amor);
  mask-image: var(--ug-glyph-amor);
}

/* Glyph artwork. Regenerate with scripts/gen-glyphs.mjs if the marks change. */
:root {
  --ug-glyph-warp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6 L23 15 L15 24 L7 15 Z'/%3E%3Cpath d='M2 11H8M2 19H8M28 11H22M28 19H22'/%3E%3C/svg%3E");
  --ug-glyph-dice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='6.5' width='17' height='17' rx='3.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='white' stroke='none'/%3E%3Ccircle cx='15' cy='15' r='2' fill='white' stroke='none'/%3E%3Ccircle cx='18' cy='18' r='2' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-taybols: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='20' height='18' rx='2.5'/%3E%3Cpath d='M10 12H19M10 16H21M10 20H15'/%3E%3C/svg%3E");
  --ug-glyph-grove: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 26V17M15 17L9.5 11.5M15 17L20.5 11.5'/%3E%3Cpath d='M9.5 11.5L6.5 8M20.5 11.5L23.5 8'/%3E%3Ccircle cx='23.5' cy='7' r='2.4' fill='white' stroke='none'/%3E%3Ccircle cx='6.5' cy='7' r='2.2' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-haiku: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10H16M7 15H23M7 20H16'/%3E%3C/svg%3E");
  --ug-glyph-becoming: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 24H26'/%3E%3Cpath d='M8.5 24A6.5 6.5 0 0 1 21.5 24'/%3E%3Ccircle cx='15' cy='16' r='2.8' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-proverb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='15' r='9'/%3E%3Cpath d='M15 3.5V6.5M26.5 15H23.5M15 26.5V23.5M3.5 15H6.5'/%3E%3Ccircle cx='15' cy='15' r='2.4' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-stoke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3V7.5M15 22.5V27M3 15H7.5M22.5 15H27M6.6 6.6L9.8 9.8M23.4 6.6L20.2 9.8M6.6 23.4L9.8 20.2M23.4 23.4L20.2 20.2'/%3E%3Ccircle cx='15' cy='15' r='3.4' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-currents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20Q9 10 15 16T27 12'/%3E%3Ccircle cx='27' cy='12' r='2.2' fill='white' stroke='none'/%3E%3C/svg%3E");
  --ug-glyph-amor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6.5L21.5 15L15 23.5L8.5 15Z'/%3E%3Ccircle cx='8.5' cy='15' r='2.6' fill='white' stroke='none'/%3E%3Ccircle cx='21.5' cy='15' r='2.6' fill='white' stroke='none'/%3E%3C/svg%3E");
}

/* ── Per-game identity colour ────────────────────────────────────────────
   The shared stylesheet tints cards and sections from --product-accent-rgb /
   --section-accent-rgb, but only warp/dice/taybols ever set them and they were
   sourced from palette tokens that the brand palette collapses to one value
   (signal and all three supports are #d8ff35), so every game rendered the same.
   A game's colour is identity rather than theme, so these are fixed: distinct
   in both tones, and stable when the palette or preset changes. They are used
   only as low-alpha gradient tints, never as text colour. */
.product-link--warp,     .landing-section--warp,     .ug-games__row--warp,     .landing-marquee__glyph--warp     { --ug-accent-rgb: 216 255 53; }
.product-link--dice,     .landing-section--dice,     .ug-games__row--dice,     .landing-marquee__glyph--dice     { --ug-accent-rgb: 53 213 255; }
.product-link--taybols,  .landing-section--taybols,  .ug-games__row--taybols,  .landing-marquee__glyph--taybols  { --ug-accent-rgb: 255 156 61; }
.product-link--grove,    .landing-section--grove,    .ug-games__row--grove,    .landing-marquee__glyph--grove    { --ug-accent-rgb: 84 255 122; }
.product-link--haiku,    .landing-section--haiku,    .ug-games__row--haiku,    .landing-marquee__glyph--haiku    { --ug-accent-rgb: 155 109 255; }
.product-link--becoming, .landing-section--becoming, .ug-games__row--becoming, .landing-marquee__glyph--becoming { --ug-accent-rgb: 255 207 82; }
.product-link--proverb,  .landing-section--proverb,  .ug-games__row--proverb,  .landing-marquee__glyph--proverb  { --ug-accent-rgb: 88 217 255; }
.product-link--stoke,    .landing-section--stoke,    .ug-games__row--stoke,    .landing-marquee__glyph--stoke    { --ug-accent-rgb: 255 123 74; }
.product-link--currents, .landing-section--currents, .ug-games__row--currents, .landing-marquee__glyph--currents { --ug-accent-rgb: 75 131 255; }
.product-link--amor,     .landing-section--amor,     .ug-games__row--amor,     .landing-marquee__glyph--amor     { --ug-accent-rgb: 255 79 227; }

/* Feed the identity colour into the shared card and section tints. */
[class*='product-link--'] { --product-accent-rgb: var(--ug-accent-rgb, var(--fx-signal-rgb, 216 255 53)); }
[class*='landing-section--'] { --section-accent-rgb: var(--ug-accent-rgb, var(--fx-signal-rgb, 216 255 53)); }

/* /games/ rows and marquee tiles carry the same colour on their mark. */
.ug-games__row .ug-motif { color: rgb(var(--ug-accent-rgb, var(--fx-signal-rgb, 216 255 53))); }
.ug-games__row .ug-games__name { color: rgb(var(--ug-accent-rgb, var(--fx-signal-rgb, 216 255 53))); }
.landing-marquee__glyph { background: rgb(var(--ug-accent-rgb, var(--fx-signal-rgb, 216 255 53))); }