#memory-game {
    font-family: 'Arial', sans-serif;
    max-width: 600px; 
    margin: 20px auto;
    padding: 20px;
    background: #e6f7ff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hidden {
    display: none;
}

.start-screen, .result-screen {
    text-align: center;
    padding: 20px 0;
}
.start-screen label, .result-screen h2 {
    font-size: 1.5rem;
    font-weight: bold;;
    color: #333;
}
.start-screen input {
    padding: 10px;
    margin: 20px 0;
    font-weight: bold;
    border-radius: 5px;
    width: 80%;
    max-width: 300px;
}
.start-screen button, .result-screen button {
    padding: 12px 25px;
    background-color: #7c3aed;
    border: 2px solid #7c3aed;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.start-screen button:hover, .result-screen button:hover {
    background-color: #0088cc;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.card {
    width: 100%;
    height: 200px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
    background: transparent;
}

.card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front {
    background-color: #fff7b3;
    border: 3px solid #ffd700;
}

.card-back {
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
    border: 3px solid #00aaff;
}

.card.correct {
    cursor: default;
    pointer-events: none;
}

.card.correct .card-inner {
    animation: blink 0.6s ease;
}

@keyframes blink {
    0%, 100% { box-shadow: 0 0 10px 2px limegreen; }
    50% { box-shadow: 0 0 20px 5px lime; }
}

.info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    font-size: 1.1rem;
    padding: 8px;
    background: #c3e6ff;
    border-radius: 8px;
}

.card-back img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card {
    height: 125px;
  }

  .info {
    text-align: center;
    font-size: 0.9rem;
  }

  #player-display {
    display: none;
  }
}