/* Explore's tiny gameplay vignettes. Animation is opt-in and viewport-bound. */
.gp-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #eee5d3;
  pointer-events: none;
  isolation: isolate;
  --gp-loop: 6s;
}
.gp-preview * {
  box-sizing: border-box;
  animation-play-state: paused !important;
}
.gp-preview.gp-running * {
  animation-play-state: running !important;
}
.gp-scene {
  display: block;
  position: absolute;
  width: 100%;
  height: 83%;
  left: 0;
  top: 3%;
  overflow: visible;
  font-family: inherit;
}
.gp-letter {
  dominant-baseline: middle;
  text-anchor: middle;
  fill: #5c4d3a;
  font-family: inherit;
  font-weight: 900;
}
.gp-scene text {
  font-family: inherit;
}
.gp-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px #fff8;
  pointer-events: none;
}
.gp-word,
.gp-wordhard,
.gp-wordblitz {
  background: #dce6e4;
}
.gp-groups,
.gp-groupshard {
  background: #ece1d7;
}
.gp-archery {
  background: #e8e1c9;
}
.gp-pool {
  background: #c1cfbd;
}
.gp-basket {
  background: #edceb5;
}
.gp-tennis,
.gp-golf {
  background: #d7dfc0;
}
.gp-four {
  background: #d3dfce;
}
.gp-slider {
  background: #e5d4c4;
}
.gp-2048 {
  background: #e9dfc5;
}
.gp-pipes {
  background: #c5d6cb;
}
.gp-chess,
.gp-queens,
.gp-reversi,
.gp-checkers {
  background: #e4e4cf;
}
.gp-sudoku,
.gp-crossword {
  background: #e8e1d6;
}
.gp-nonogram {
  background: #d3dfd6;
}
.gp-mines {
  background: #e0e3ce;
}
.gp-sprout {
  background: #e0e6ca;
}
.gp-ladder,
.gp-anagrams,
.gp-wordguess {
  background: #e6dbc9;
}
.gp-context {
  background: #dce0c5;
}
.gp-lights {
  background: #e1d4e1;
}
.gp-memory {
  background: #e6d9cf;
}
.gp-hanoi {
  background: #e5d6bc;
}
.gp-codebreaker {
  background: #e8dac1;
}
.gp-dots {
  background: #ebdfc9;
}
.gp-battle {
  background: #cbdde0;
}
.gp-wave {
  background: #e3d7e6;
}
.gp-circle {
  background: #efe0b8;
}
.gp-never {
  background: #ebcec7;
}
.gp-reaction {
  background: #e7dfc8;
}
.gp-craft {
  background: #dce2ce;
}
.gp-word-path {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: gp-trace var(--gp-loop) ease-in-out infinite;
}
.gp-word-letter .gp-tile-face {
  animation: gp-word-highlight var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-score-pop {
  font-weight: 900;
  text-anchor: middle;
  opacity: 0;
  animation: gp-score var(--gp-loop) ease-in-out infinite;
}
.gp-group-solve {
  animation: gp-group-select var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
  transform-box: fill-box;
  transform-origin: center;
}
.gp-group-banner {
  opacity: 0;
  animation: gp-group-result var(--gp-loop) ease-in-out infinite;
}
.gp-arrow-shot {
  animation: gp-arrow var(--gp-loop) cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}
.gp-target-pulse {
  animation: gp-target var(--gp-loop) ease-out infinite;
  transform-origin: 116px 85px;
}
.gp-pop {
  animation: gp-spark var(--gp-loop) ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.gp-pool-cue {
  animation: gp-cue var(--gp-loop) ease-in-out infinite;
}
.gp-pool-white {
  animation: gp-cue-ball var(--gp-loop) ease-in-out infinite;
}
.gp-pool-target {
  animation: gp-object-ball var(--gp-loop) ease-out infinite;
}
.gp-basket-ball {
  animation: gp-shot var(--gp-loop) linear infinite;
}
.gp-net {
  animation: gp-net var(--gp-loop) ease-out infinite;
  transform-origin: 128px 79px;
}
.gp-basket-score {
  opacity: 0;
  animation: gp-score var(--gp-loop) ease-out infinite;
}
.gp-tennis-ball {
  animation: gp-rally 4s linear infinite;
}
.gp-racket-top {
  animation: gp-racket-top 4s ease-in-out infinite;
}
.gp-racket-bottom {
  animation: gp-racket-bottom 4s ease-in-out infinite;
}
.gp-golf-ball {
  animation: gp-putt var(--gp-loop) ease-out infinite;
}
.gp-four-drop {
  animation: gp-counter var(--gp-loop) cubic-bezier(0.34, 1.6, 0.64, 1) infinite;
}
.gp-four-win {
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  animation: gp-win-line var(--gp-loop) ease-in-out infinite;
}
.gp-slide-tile {
  animation: gp-slide var(--gp-loop) cubic-bezier(0.22, 0.8, 0.28, 1) infinite;
}
.gp-merge-tile {
  animation: gp-merge var(--gp-loop) ease-in-out infinite;
}
.gp-merge-result {
  opacity: 0;
  font-weight: 900;
  animation: gp-merge-number var(--gp-loop) ease-in-out infinite;
}
.gp-pipe-turn {
  animation: gp-pipe-turn var(--gp-loop) cubic-bezier(0.25, 0.8, 0.3, 1)
    infinite;
  transform-origin: 0 0;
}
.gp-pipe-water {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: gp-water var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-chess-piece {
  dominant-baseline: middle;
  text-anchor: middle;
  font-size: 30px;
  fill: #fff4d4;
  stroke: #816a50;
  stroke-width: 0.6px;
  paint-order: stroke fill;
}
.gp-chess-king,
.gp-chess-pawn {
  fill: #5d6255;
}
.gp-chess-knight {
  animation: gp-knight var(--gp-loop) ease-in-out infinite;
}
.gp-chess-destination {
  animation: gp-destination var(--gp-loop) ease-in-out infinite;
}
.gp-queen-place {
  animation: gp-place var(--gp-loop) ease-in-out infinite;
}
.gp-disc-flip {
  animation: gp-disc-flip var(--gp-loop) ease-in-out infinite;
  transform-origin: 87px 112px;
}
.gp-disc-place {
  animation: gp-place var(--gp-loop) ease-in-out infinite;
}
.gp-checker-hop {
  animation: gp-hop var(--gp-loop) ease-in-out infinite;
}
.gp-new-number {
  opacity: 0;
  animation: gp-reveal var(--gp-loop) ease-in-out infinite;
}
.gp-cross-fill,
.gp-pixel-fill {
  animation: gp-reveal var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-mine-reveal {
  animation: gp-cell-open var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-sprout-grow {
  animation: gp-grow var(--gp-loop) cubic-bezier(0.2, 1.45, 0.5, 1) infinite;
  transform-origin: 100px 140px;
}
.gp-word-answer {
  animation: gp-reveal var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-anagram-swap {
  animation: gp-anagram var(--gp-loop) ease-in-out infinite;
}
.gp-context-answer {
  animation: gp-grow var(--gp-loop) ease-in-out infinite;
  transform-origin: 100px 150px;
}
.gp-lights-out .gp-tile-face {
  animation: gp-lights var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
}
.gp-memory-flip {
  animation: gp-memory var(--gp-loop) ease-in-out infinite;
  animation-delay: var(--gp-delay);
  transform-box: fill-box;
  transform-origin: center;
}
.gp-hanoi-disk {
  animation: gp-hanoi var(--gp-loop) ease-in-out infinite;
}
.gp-code-reveal {
  animation: gp-reveal var(--gp-loop) ease-in-out infinite;
}
.gp-code-check {
  opacity: 0;
  animation: gp-score var(--gp-loop) ease-out infinite;
}
.gp-dots-line {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: gp-draw-edge var(--gp-loop) ease-in-out infinite;
}
.gp-box-claim {
  animation: gp-box var(--gp-loop) ease-in-out infinite;
}
.gp-sea-ripple {
  animation: gp-ripple var(--gp-loop) ease-out infinite;
  transform-origin: 88px 88px;
}
.gp-sea-hit {
  animation: gp-hit var(--gp-loop) ease-in-out infinite;
  transform-origin: 88px 88px;
}
.gp-dial {
  animation: gp-dial var(--gp-loop) cubic-bezier(0.34, 1.3, 0.4, 1) infinite;
  transform-origin: 100px 132px;
}
.gp-circle-draw {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: gp-circle var(--gp-loop) ease-in-out infinite;
}
.gp-circle-score {
  opacity: 0;
  animation: gp-circle-score var(--gp-loop) ease-in-out infinite;
}
.gp-party-card {
  animation: gp-card var(--gp-loop) ease-in-out infinite;
  transform-origin: 100px 100px;
}
.gp-reaction-light {
  animation: gp-ready var(--gp-loop) linear infinite;
}
.gp-reaction-go {
  opacity: 0;
  animation: gp-go var(--gp-loop) linear infinite;
}
.gp-reaction-wait {
  animation: gp-wait var(--gp-loop) linear infinite;
}
.gp-reaction-time {
  opacity: 0;
  animation: gp-timed var(--gp-loop) ease-out infinite;
}
.gp-craft-left {
  animation: gp-mix-left var(--gp-loop) ease-in-out infinite;
}
.gp-craft-right {
  animation: gp-mix-right var(--gp-loop) ease-in-out infinite;
}
.gp-craft-result {
  animation: gp-grow var(--gp-loop) cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
  transform-origin: 100px 150px;
}
.gp-photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: gp-photo-drift 12s ease-in-out infinite;
}
.gp-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #3a3b359c, transparent 55%);
}
.gp-geo-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gp-map-pin {
  animation: gp-pin var(--gp-loop) cubic-bezier(0.25, 1.6, 0.4, 1) infinite;
  transform-origin: 100px 130px;
}
.gp-geo-answer {
  animation: gp-reveal var(--gp-loop) ease-in-out infinite;
}
@keyframes gp-trace {
  0%,
  12% {
    stroke-dashoffset: 170;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  54%,
  73% {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
  86%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes gp-word-highlight {
  0%,
  16%,
  90%,
  100% {
    fill: #fff7e7;
  }
  36%,
  74% {
    fill: #e1c6e1;
  }
}
@keyframes gp-score {
  0%,
  55%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
  }
  63%,
  77% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  89% {
    opacity: 0;
    transform: translateY(-9px) scale(1);
  }
}
@keyframes gp-group-select {
  0%,
  10%,
  90%,
  100% {
    transform: translateY(0);
  }
  25%,
  55% {
    transform: translateY(-3px);
  }
  70% {
    transform: translateY(0);
  }
}
@keyframes gp-group-result {
  0%,
  52%,
  95%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
  62%,
  84% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gp-arrow {
  0%,
  20% {
    opacity: 0;
    transform: translate(-90px, 55px);
  }
  21% {
    opacity: 1;
    transform: translate(-90px, 55px);
  }
  42%,
  76% {
    opacity: 1;
    transform: translate(0, 0);
  }
  91%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes gp-target {
  0%,
  40%,
  65%,
  100% {
    transform: scale(1);
  }
  47% {
    transform: scale(1.4);
  }
}
@keyframes gp-spark {
  0%,
  43%,
  80%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  49%,
  62% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes gp-cue {
  0%,
  10%,
  90%,
  100% {
    transform: translate(-8px, 6px);
  }
  25% {
    transform: translate(-18px, 14px);
  }
  36%,
  55% {
    transform: translate(7px, -5px);
  }
  70% {
    transform: translate(-8px, 6px);
  }
}
@keyframes gp-cue-ball {
  0%,
  30%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(38px, -23px);
  }
  75%,
  88% {
    transform: translate(32px, 2px);
  }
}
@keyframes gp-object-ball {
  0%,
  49%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  70% {
    transform: translate(53px, -32px);
    opacity: 1;
  }
  75%,
  90% {
    transform: translate(53px, -32px);
    opacity: 0;
  }
}
@keyframes gp-shot {
  0%,
  12%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  28% {
    transform: translate(27px, -99px) scale(0.88);
  }
  39% {
    transform: translate(56px, -114px) scale(0.76);
  }
  48% {
    transform: translate(76px, -96px) scale(0.68);
  }
  55% {
    transform: translate(96px, -63px) scale(0.62);
    opacity: 1;
  }
  67% {
    transform: translate(96px, -23px) scale(0.62);
    opacity: 1;
  }
  78%,
  92% {
    transform: translate(96px, 5px) scale(0.62);
    opacity: 0;
  }
}
@keyframes gp-net {
  0%,
  55%,
  80%,
  100% {
    transform: scaleY(1);
  }
  61% {
    transform: scaleY(1.17);
  }
  68% {
    transform: scaleY(0.95);
  }
}
@keyframes gp-rally {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-77px, 98px);
  }
  50% {
    transform: translate(-49px, -4px);
  }
  75% {
    transform: translate(8px, 96px);
  }
}
@keyframes gp-racket-top {
  0%,
  100% {
    transform: translate(0, 0) rotate(-3deg);
  }
  42%,
  55% {
    transform: translate(-50px, 0) rotate(2deg);
  }
}
@keyframes gp-racket-bottom {
  0%,
  30%,
  100% {
    transform: translate(-13px, 0);
  }
  65%,
  80% {
    transform: translate(72px, 0);
  }
}
@keyframes gp-putt {
  0%,
  20%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  55% {
    transform: translate(40px, -66px);
    opacity: 1;
  }
  68% {
    transform: translate(53px, -90px);
    opacity: 1;
  }
  75%,
  90% {
    transform: translate(53px, -90px);
    opacity: 0;
  }
}
@keyframes gp-counter {
  0%,
  14%,
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  42%,
  83% {
    transform: translateY(96px);
    opacity: 1;
  }
  92% {
    opacity: 0;
    transform: translateY(96px);
  }
}
@keyframes gp-win-line {
  0%,
  45%,
  100% {
    stroke-dashoffset: 72;
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  70%,
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  94% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes gp-slide {
  0%,
  18%,
  100% {
    transform: translateX(0);
  }
  40%,
  80% {
    transform: translateX(-44px);
  }
}
@keyframes gp-merge {
  0%,
  18%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(-44px);
    opacity: 1;
  }
  52%,
  87% {
    transform: translateX(-44px);
    opacity: 0;
  }
}
@keyframes gp-merge-number {
  0%,
  48%,
  96%,
  100% {
    opacity: 0;
  }
  56%,
  85% {
    opacity: 1;
  }
}
@keyframes gp-pipe-turn {
  0%,
  18%,
  100% {
    transform: rotate(-90deg);
  }
  40%,
  88% {
    transform: rotate(0);
  }
}
@keyframes gp-water {
  0%,
  39%,
  100% {
    stroke-dashoffset: 40;
    opacity: 0.2;
  }
  66%,
  87% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  95% {
    opacity: 0.2;
  }
}
@keyframes gp-knight {
  0%,
  18%,
  100% {
    transform: translate(0, 0);
  }
  37%,
  80% {
    transform: translate(-25px, -50px);
  }
}
@keyframes gp-destination {
  0%,
  23%,
  90%,
  100% {
    opacity: 0;
  }
  32%,
  80% {
    opacity: 0.65;
  }
}
@keyframes gp-place {
  0%,
  25%,
  100% {
    opacity: 0;
    transform: translateY(-15px);
  }
  45%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gp-disc-flip {
  0%,
  34%,
  100% {
    transform: scaleX(1);
  }
  45% {
    transform: scaleX(0);
  }
  56%,
  85% {
    transform: scaleX(1);
  }
}
@keyframes gp-hop {
  0%,
  20%,
  100% {
    transform: translate(0, 0);
  }
  38% {
    transform: translate(12px, -32px);
  }
  54%,
  85% {
    transform: translate(25px, -25px);
  }
}
@keyframes gp-reveal {
  0%,
  25%,
  100% {
    opacity: 0.15;
  }
  48%,
  88% {
    opacity: 1;
  }
}
@keyframes gp-cell-open {
  0%,
  22%,
  100% {
    opacity: 1;
  }
  50%,
  85% {
    opacity: 0.45;
  }
}
@keyframes gp-grow {
  0%,
  28%,
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.75);
  }
  50%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes gp-anagram {
  0%,
  20%,
  100% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(-53px, -8px);
  }
  55%,
  83% {
    transform: translate(-106px, 0);
  }
}
@keyframes gp-lights {
  0%,
  25%,
  100% {
    fill: #f6d780;
  }
  47%,
  84% {
    fill: #c5b4c8;
  }
}
@keyframes gp-memory {
  0%,
  24%,
  100% {
    transform: scaleX(0.02);
    opacity: 0.35;
  }
  45%,
  83% {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes gp-hanoi {
  0%,
  15%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(0, -65px);
  }
  47% {
    transform: translate(98px, -65px);
  }
  64%,
  84% {
    transform: translate(98px, 34px);
  }
}
@keyframes gp-draw-edge {
  0%,
  20%,
  100% {
    stroke-dashoffset: 45;
  }
  48%,
  88% {
    stroke-dashoffset: 0;
  }
}
@keyframes gp-box {
  0%,
  47%,
  100% {
    opacity: 0;
  }
  60%,
  88% {
    opacity: 0.9;
  }
}
@keyframes gp-ripple {
  0%,
  37%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  45% {
    opacity: 1;
    transform: scale(0.5);
  }
  70%,
  92% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes gp-hit {
  0%,
  40%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  53%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes gp-dial {
  0%,
  12%,
  100% {
    transform: rotate(-69deg);
  }
  33% {
    transform: rotate(9deg);
  }
  51%,
  83% {
    transform: rotate(-12deg);
  }
}
@keyframes gp-circle {
  0%,
  10%,
  100% {
    stroke-dashoffset: 360;
    opacity: 1;
  }
  64%,
  87% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes gp-circle-score {
  0%,
  63%,
  100% {
    opacity: 0;
  }
  73%,
  88% {
    opacity: 1;
  }
}
@keyframes gp-card {
  0%,
  18%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }
  42%,
  72% {
    transform: rotate(3deg) translateY(-7px);
  }
}
@keyframes gp-ready {
  0%,
  39%,
  100% {
    fill: #c9947c;
  }
  40%,
  84% {
    fill: #99b382;
  }
}
@keyframes gp-go {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40%,
  84% {
    opacity: 1;
  }
}
@keyframes gp-wait {
  0%,
  39%,
  100% {
    opacity: 1;
  }
  40%,
  84% {
    opacity: 0;
  }
}
@keyframes gp-timed {
  0%,
  45%,
  100% {
    opacity: 0;
    transform: translateY(5px);
  }
  53%,
  83% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gp-mix-left {
  0%,
  15%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  39% {
    transform: translate(25px, 26px);
    opacity: 1;
  }
  48%,
  82% {
    transform: translate(32px, 37px);
    opacity: 0;
  }
}
@keyframes gp-mix-right {
  0%,
  15%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  39% {
    transform: translate(-25px, 26px);
    opacity: 1;
  }
  48%,
  82% {
    transform: translate(-32px, 37px);
    opacity: 0;
  }
}
@keyframes gp-photo-drift {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
@keyframes gp-pin {
  0%,
  15%,
  100% {
    transform: translateY(-30px) scale(0.8);
    opacity: 0;
  }
  35%,
  84% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp-preview * {
    animation: none !important;
    transition: none !important;
  }
  .gp-word-path,
  .gp-circle-draw,
  .gp-dots-line,
  .gp-four-win,
  .gp-pipe-water {
    stroke-dashoffset: 0;
  }
  .gp-score-pop,
  .gp-new-number,
  .gp-circle-score,
  .gp-reaction-time,
  .gp-group-banner,
  .gp-code-check,
  .gp-merge-result {
    opacity: 1;
  }
  .gp-reaction-go {
    opacity: 0;
  }
  .gp-memory-flip,
  .gp-sprout-grow,
  .gp-word-answer,
  .gp-code-reveal,
  .gp-cross-fill,
  .gp-pixel-fill,
  .gp-craft-result,
  .gp-geo-answer {
    opacity: 1;
    transform: none;
  }
}
.gp-wordblitz {
  --gp-loop: 4s;
}
.gp-chess .gp-chess-piece {
  font-size: 24px;
}
.gp-chess-pawn {
  animation: gp-chess-capture var(--gp-loop) ease-in-out infinite;
}
@keyframes gp-knight {
  0%,
  18%,
  100% {
    transform: translate(0, 0);
  }
  37%,
  80% {
    transform: translate(18.75px, -37.5px);
  }
}
@keyframes gp-chess-capture {
  0%,
  30%,
  100% {
    opacity: 1;
  }
  38%,
  86% {
    opacity: 0;
  }
}