/* Targeted responsive fixes for the smallest phone widths.
   Keep the game mechanics untouched; this file only prevents visual overlap. */
@media (max-width: 390px) {
  /* Counting: four shell columns need to fit inside 320–390px screens. */
  button[style*="min-width: min(72px"] {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }

  button[style*="min-width: min(72px"] > div {
    width: 64px !important;
    height: 64px !important;
  }

  /* Counting: keep the portal above the first shell row. */
  div[class*="right-[4%]"][class*="top-[30%]"] > div {
    width: 72px !important;
    height: 112px !important;
  }

  div[class*="right-[4%]"][class*="top-[30%]"] {
    top: 23% !important;
  }

  /* Color Match: four destination shells must fit cleanly on 320px. */
  svg[class*="w-20"][class*="h-20"][class*="sm:w-28"][class*="sm:h-28"] {
    width: 64px !important;
    height: 64px !important;
  }
}