/* Games catalog — shared spacing/depth plus compact 2048 catalog treatment. */

.phase23-games-list {
  display: grid;
  width: min(100%, 510px);
  gap: 16px;
  margin: 0 auto;
  padding: 2px 0 6px;
  perspective: 900px;
}

.phase23-games-list .phase23-game-card {
  position: relative;
  width: 100%;
  min-height: 94px;
  overflow: hidden;
  border-radius: 19px;
  transform: translateZ(0);
  transform-style: preserve-3d;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    inset 0 -1px 0 rgb(0 0 0 / 16%),
    0 8px 0 -6px rgb(2 8 23 / 72%),
    0 18px 34px rgb(0 0 0 / 24%);
  transition:
    transform 150ms cubic-bezier(.2,.75,.3,1),
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.phase23-games-list .phase23-game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgb(255 255 255 / 9%) 0%,
    transparent 30%,
    transparent 72%,
    rgb(255 255 255 / 3%) 100%
  );
  pointer-events: none;
}

.phase23-games-list .phase23-game-icon,
.phase23-games-list .phase23-menu-copy,
.phase23-games-list .phase23-menu-arrow {
  position: relative;
  z-index: 1;
}

.phase23-games-list .phase23-game-icon {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 26%),
    0 8px 14px rgb(0 0 0 / 18%);
}

.phase23-games-list .phase23-game-card:active {
  transform: translateY(2px) scale(0.985);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    0 5px 0 -5px rgb(2 8 23 / 70%),
    0 10px 20px rgb(0 0 0 / 22%);
}

.game-2048-catalog-card {
  justify-self: center;
  width: min(94%, 470px) !important;
  min-height: 82px !important;
  padding: 11px 12px !important;
  grid-template-columns: 46px minmax(0, 1fr) 20px !important;
  gap: 10px !important;
  border-radius: 17px !important;
}

.game-2048-catalog-card .phase23-game-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1.28rem;
}

.game-2048-catalog-card .phase23-menu-copy {
  gap: 2px;
}

.game-2048-catalog-card .phase23-menu-title {
  font-size: 0.91rem;
}

.game-2048-catalog-card .phase23-menu-description {
  color: #c8d4e7;
  font-size: 0.66rem;
  line-height: 1.3;
}

.game-2048-catalog-card .phase23-menu-meta {
  color: #8394b0;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}

.game-2048-catalog-card .phase23-menu-arrow {
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  .phase23-games-list .phase23-game-card:hover:not(:disabled) {
    transform: translateY(-3px) rotateX(0.7deg);
    border-color: rgb(122 187 255 / 32%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 18%),
      inset 0 -1px 0 rgb(0 0 0 / 12%),
      0 10px 0 -7px rgb(2 8 23 / 70%),
      0 24px 42px rgb(0 0 0 / 29%);
  }
}

@media (max-width: 420px) {
  .phase23-games-list {
    width: min(100%, 500px);
    gap: 14px;
  }

  .phase23-games-list .phase23-game-card {
    min-height: 90px;
    padding: 12px;
  }

  .game-2048-catalog-card {
    width: min(96%, 470px) !important;
    min-height: 78px !important;
    padding: 10px 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase23-games-list .phase23-game-card,
  .phase23-games-list .phase23-game-card:hover,
  .phase23-games-list .phase23-game-card:active {
    transform: none !important;
    transition: none !important;
  }
}