.play-badge {
  display: inline-block;
  width: 196px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.play-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.play-badge:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 14px 23px rgba(0, 0, 0, 0.38));
}

.play-badge--small {
  width: 158px;
}

.phone img,
.mode-card img {
  aspect-ratio: 390 / 790;
  object-fit: cover;
  object-position: top;
}

.floating-piece {
  --tile-color: #20ceef;
  --tile-outline: #08758a;
  position: absolute;
  z-index: 3;
  width: 122px;
  height: 122px;
  filter: drop-shadow(0 14px 15px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.floating-piece i {
  position: absolute;
  width: 58px;
  height: 58px;
  background-color: var(--tile-color);
  background-image:
    url("/src/assets/objects/tiles/tile-detail-02.png?v=1"),
    url("/src/assets/objects/tiles/tile-overlay-01.png?v=1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108% 108%;
  background-blend-mode: normal, overlay;
  -webkit-mask: url("/src/assets/objects/tiles/tile-shape-mask.png?v=1") center / 108% 108% no-repeat;
  mask: url("/src/assets/objects/tiles/tile-shape-mask.png?v=1") center / 108% 108% no-repeat;
  box-shadow: inset 0 0 0 2px var(--tile-outline);
}

.floating-piece i:nth-child(1) { left: 0; top: 0; }
.floating-piece i:nth-child(2) { left: 58px; top: 0; }
.floating-piece i:nth-child(3) { left: 0; top: 58px; }

.floating-piece--red {
  --tile-color: #f5524d;
  --tile-outline: #8d2522;
  left: 5%;
  top: 21%;
  transform: rotate(-13deg) scale(0.72);
}

.floating-piece--yellow {
  --tile-color: #fdca1a;
  --tile-outline: #9b7600;
  right: -5%;
  top: 30%;
  transform: rotate(16deg) scale(0.72);
}

.floating-piece--yellow i:nth-child(2) { left: 0; top: 58px; }

.floating-piece--cyan {
  --tile-color: #20ceef;
  --tile-outline: #08758a;
  right: 5%;
  bottom: 12%;
  transform: rotate(-9deg) scale(0.68);
}

.download-section .play-badge { margin-top: 18px; }

@media (max-width: 560px) {
  .play-badge--small { width: 126px; }
  .floating-piece--red { left: -6%; }
  .floating-piece--yellow { right: -12%; }
  .floating-piece--cyan { right: -2%; }
}