/* Exact foreground pink used by map-preview.png and map-preview.gif. */
.riichi-card-preview {
  color: #e28da2;
  container-type: inline-size;
  padding: 0;
}

/* Artwork is 15% smaller, with no transform scaling during animation. */
.riichi-preview {
  --tile-width: 40.8px;
  --tile-height: 54.4px;
  --tile-gap: 1.7px;
  --tile-top: 36px;
  position: relative;
  display: block;
  width: 272px;
  height: 108.8px;
}

.riichi-preview-tile {
  position: absolute;
  top: var(--tile-top);
  left: calc(5.1px + var(--tile-order) * (var(--tile-width) + var(--tile-gap)));
  width: var(--tile-width);
  height: var(--tile-height);
  overflow: visible;
  shape-rendering: crispEdges;
}

.riichi-preview-tile--draw {
  left: calc(10.2px + var(--tile-order) * (var(--tile-width) + var(--tile-gap)));
}

.riichi-preview-glint {
  opacity: 0;
}

/* Animate layout in whole-pixel steps: transforms can blur rasterized SVGs. */
.fun-card:is(:hover, :focus-visible) .riichi-preview-tile {
  animation: riichi-tile-lift 2.4s steps(9, end) infinite;
  animation-delay: calc(var(--tile-order) * 100ms);
}

.fun-card:is(:hover, :focus-visible) .riichi-preview-tile--draw {
  animation-name: riichi-draw-lift;
  animation-timing-function: steps(15, end);
}

.fun-card:is(:hover, :focus-visible) .riichi-preview-glint {
  animation: riichi-winning-glint 2.4s steps(1, end) infinite;
  animation-delay: calc(var(--tile-order) * 100ms);
}

@keyframes riichi-tile-lift {
  0%, 40%, 100% { top: var(--tile-top); }
  16%, 24% { top: calc(var(--tile-top) - 9px); }
}

@keyframes riichi-draw-lift {
  0%, 40%, 100% { top: var(--tile-top); }
  16%, 24% { top: calc(var(--tile-top) - 15px); }
}

/* Blink while rising and at the peak; stay dark during the descent and rest. */
@keyframes riichi-winning-glint {
  0%, 12%, 24%, 100% { opacity: 0; }
  4%, 16% { opacity: 1; }
}

@container (max-width: 319px) {
  .riichi-preview { --tile-width: 35.7px; --tile-height: 47.6px; --tile-gap: .85px; --tile-top: 39px; width: 238px; }
}

@container (max-width: 279px) {
  .riichi-preview { --tile-width: 30.6px; --tile-height: 40.8px; --tile-top: 43px; width: 207.4px; }
}

@container (max-width: 243px) {
  .riichi-preview { --tile-width: 25.5px; --tile-height: 34px; --tile-top: 46px; width: 176.8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fun-card:is(:hover, :focus-visible) .riichi-preview-tile,
  .fun-card:is(:hover, :focus-visible) .riichi-preview-glint {
    animation: none;
  }
}