/* Markör-stil. w-4 h-4 i Tailwind motsvarar 1rem, men vi vill ha lite mindre. */
 .marker {
     width: 20px;
     height: 20px;
     transform: translate(-50%, -50%);
     /* Centrerar pricken på sin koordinat */
     transition: all 0.3s ease;
 }

 .marker:hover {
     transform: translate(-50%, -50%) scale(2.5);
     z-index: 10;
 }

 .marker.found {
     background-color: #4ade80;
     /* green-400 */
     transform: translate(-50%, -50%) scale(2);
     pointer-events: none;
     /* Gör den oklickbar när den är hittad */
 }

 .marker.wrong-guess {
     animation: shake 0.5s;
 }

 /* Enkel skak-animation för fel gissning */
 @keyframes shake {

     0%,
     100% {
         transform: translate(-50%, -50%) translateX(0);
     }

     25% {
         transform: translate(-50%, -50%) translateX(-5px);
     }

     75% {
         transform: translate(-50%, -50%) translateX(5px);
     }
 }