.mini-board span {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  place-items: end;
  padding: 0 9px 8px 0;
  color: #fff8e9;
  background: rgba(246, 241, 235, .32);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9);
}

.mini-board span::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--lobby-photo, none);
  background-position: center;
  background-size: cover;
}

.mini-board span:not(:empty)::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  z-index: -1;
  background: linear-gradient(transparent, rgba(28, 18, 17, .62));
}

.mini-board span:empty {
  padding: 0;
  background: rgba(246, 241, 235, .28);
}

.mini-board span:empty::before { display: none; }

.mini-board span:nth-child(1) { --lobby-photo: url("./games/2048/cards/photo/2.webp"); }
.mini-board span:nth-child(2) { --lobby-photo: url("./games/2048/cards/photo/4.webp"); }
.mini-board span:nth-child(3) { --lobby-photo: url("./games/2048/cards/photo/8.webp"); }
.mini-board span:nth-child(4) { --lobby-photo: url("./games/2048/cards/photo/16.webp"); }
.mini-board span:nth-child(6) { --lobby-photo: url("./games/2048/cards/photo/32.webp"); }
.mini-board span:nth-child(7) { --lobby-photo: url("./games/2048/cards/photo/64.webp"); }
.mini-board span:nth-child(11) { --lobby-photo: url("./games/2048/cards/photo/128.webp"); }
.mini-board span:nth-child(12) { --lobby-photo: url("./games/2048/cards/photo/256.webp"); }
.mini-board span:nth-child(16) { --lobby-photo: url("./games/2048/cards/photo/2048.webp"); }

.mini-board span:nth-child(6)::before,
.mini-board span:nth-child(7)::before,
.mini-board span:nth-child(11)::before,
.mini-board span:nth-child(12)::before,
.mini-board span:nth-child(16)::before {
  filter: blur(8px) saturate(.72) brightness(.78);
  transform: scale(1.18);
}

.mini-board .gold {
  color: #fff8e9;
  background: rgba(195, 154, 90, .42);
  box-shadow: inset 0 0 0 2px rgba(220, 180, 106, .82);
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.primary-button,
.birthday-task {
  width: 100%;
  min-width: 0;
  min-height: 58px;
}

.birthday-task { padding: 9px 16px; }
.birthday-task-mark { width: 38px; height: 38px; font-size: 17px; }
.birthday-task strong { font-size: 14px; line-height: 1.35; }
.birthday-task small { margin-top: 3px; font-size: 12px; }

@media (max-width: 720px) {
  .hero-actions { grid-template-columns: 1fr; }
}