/* Per-game look on each game page: a tint from the game's own colours and one small drifting motif near the
   hero's edges. Pure CSS, no requests, nothing at all under reduced motion. Written by tools/games.py (decorate). */
.amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.amb-tint { position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 12% 78%, color-mix(in srgb, var(--game-a, #8f86cf) 32%, transparent), transparent 70%),
              radial-gradient(50% 45% at 92% 30%, color-mix(in srgb, var(--game-b, #ffdcc4) 26%, transparent), transparent 70%); }
.amb i { position: absolute; display: block; font-style: normal; line-height: 1; color: var(--game-a, #8f86cf); opacity: 0;
  font-size: var(--s, 22px); width: var(--s, 22px); height: var(--s, 22px); text-align: center;
  filter: drop-shadow(0 4px 6px rgba(36, 27, 54, .18)); }
.amb i svg { width: 100%; height: 100%; display: block; }
.hero .label { color: color-mix(in srgb, var(--game-a, #6d4f9c) 60%, #241b36); }
@media (prefers-reduced-motion: no-preference) {
  .amb i { animation: amb-drift var(--t, 26s) linear infinite; animation-delay: var(--d, 0s); }
  @keyframes amb-drift {
    0%   { opacity: 0;   transform: translate3d(0, 30px, 0) rotate(var(--r0, -10deg)); }
    12%  { opacity: var(--o, .32); }
    85%  { opacity: var(--o, .32); }
    100% { opacity: 0;   transform: translate3d(var(--dx, 24px), -60vh, 0) rotate(var(--r1, 20deg)); }
  }
  .amb.amb-land i { animation-name: amb-land; }   /* darts: fly in and stick */
  @keyframes amb-land {
    0%   { opacity: 0; transform: translate3d(-120px, -40px, 0) rotate(-35deg) scale(.6); }
    18%  { opacity: var(--o, .35); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    80%  { opacity: var(--o, .35); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate3d(0, 6px, 0) scale(1); }
  }
  .amb.amb-roll i { animation-name: amb-roll; }   /* balls: roll along the bottom */
  @keyframes amb-roll {
    0%   { opacity: 0; transform: translate3d(-60px, 0, 0) rotate(0deg); }
    12%  { opacity: var(--o, .32); }
    88%  { opacity: var(--o, .32); }
    100% { opacity: 0; transform: translate3d(42vw, 0, 0) rotate(540deg); }
  }
  .amb.amb-pass i { animation-name: amb-pass; }   /* the jet: a slow pass across the sky */
  @keyframes amb-pass {
    0%   { opacity: 0; transform: translate3d(-10vw, 0, 0); }
    10%  { opacity: var(--o, .4); }
    90%  { opacity: var(--o, .4); }
    100% { opacity: 0; transform: translate3d(110vw, -8vh, 0); }
  }
}
@media (prefers-reduced-motion: reduce) { .amb i { display: none; } }
@media (max-width: 699px) { .amb i:nth-child(n+6) { display: none; } }   /* lighter on phones */