@media (max-width: 768px) {
  .cell {
    box-shadow: none;
  }

  .joke, .cell, .key {
    text-shadow: none !important;
  }

  .game-container {
    box-shadow: none;
  }
}
.key, .btn, .cell {
  will-change: transform;
}

body {
    font-family: 'Comic Sans MS', sans-serif;
    text-align: center;
    background-image: url('bg.png');
    background-repeat: no-repeat;
    /*background: #ffe6f2;*/
    color: #c9184a;
  }
  
  
  .game-container {
    background-image: url(icons/kittybg.webp);
    background-size: cover;
    max-width: 400px;
    min-width: 300px;
    margin: auto;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgb(189, 54, 77);
    position: absolute;
  }
  
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }

  h1 {
    font-size: 24px;
  }
  
  .cute-icon {
    width: 80px;
    display: block;
    margin: 10px auto;
  }
  
  /* The board is now a grid with 5 columns */
  .board {
    display: grid;
    grid-template-columns: repeat(5, 50px);
    gap: 15px;
    margin-bottom: 15px;
    justify-content: center;
  }
  
  .cell {
    width: 50px;
    height: 50px;
    border: 3px solid rgb(170, 55, 84);
    box-shadow: 0 0 5px rgba(255, 105, 180, 0.8), /* Pink glow */
               0 0 6px rgba(155, 38, 73, 0.6); /* Softer outer glow */
    border-radius: 15px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    background: white;
  }
  
  /* Board cell colors */
  .correct { background: #f15c81; color: white; }
  .present { background: rgb(214, 171, 91); color: white; }
  .absent { background: rgb(207, 205, 205); color: white; }
  
  .keyboard {
    margin-top: 20px;
  }
    
  .key {
    display: inline-block;
    padding: 10px ;  /* Kept your preset's padding */
    margin: 0 4px;         /* Preset margin */
    font-size: 16px;     /* Preset font size */
    background: #f85586; /* Preset pink background */
    color: white;
    border: 1px solid rgb(155, 0, 21); /* Kept preset border */
    border-radius: 7px;  /* Combined: 7px from .btn-10 & 5px from preset */
    cursor: pointer;
    box-shadow: 0 3px 0px #ffd2ee; /* From btn-10 */
    transition: all 0.2s ease-in-out;
    position: relative;
    top: 0; /* Default position */
  }
  
  .keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
  }
  .enter {
    color: #a4133c;
    background-color: #ffffff;
    min-width: 50px;
    font-size: 1.em;
  }
  
  .backspace {
    color: #a4133c;
    background-color: #ffffff;
    min-width: 20px;
  }
  /* Click Effect from btn-10 */
  .key:active {
    top: 3px;
    box-shadow: 0 2px 0px #f0b5dc; /* Pressed-down shadow effect */
    transition: all 0.2s;
  }
  
  
  /* Absent keyboard key styling */
  .key.absent {
    background: rgb(201, 201, 201);
    color: white;
  }
  
  .icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  
  .btn {
    display: inline-block;
    padding: 10px 20px;  /* Kept your original padding */
    margin-top: 10px;    /* Your original margin */
    font-size: 18px;     /* Your original font size */
    background: #e05780; /* Your original pink background */
    color: white;
    border: none;
    border-radius: 10px; /* Your rounded edges */
    cursor: pointer;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 0px #dfc7dd; /* Shadow effect from btn-10 */
    transition: all 0.3s ease-in-out;
    top: 0; /* Default position */
  }
  
  /* Hover Effect from btn-4 */
  .btn:before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    background: rgba(254, 246, 255, 0.185);
    left: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
  }
  
  .btn:hover:before {
    width: 100%;
  }
  
  /* Click Effect from btn-10 */
  .btn:active {
    top: 3px;
    box-shadow: 0 2px 0px #d89ec7; /* Shrinking shadow effect */
    transition: all 0.2s;
  }
  
  .give-up {
    background: #ff3333;
  }
  
  
  /* Pop-up styles */
  .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }
  
  .popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
  }
  
/* CSS for the cute invalid word pop-up */
.invalid-popup {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Comic Sans MS', sans-serif; /* Cute font */
    font-size: 20px;
    color: #ff69b4; /* Pink color for cuteness */
    opacity: 0;
    animation: fadeInOut 2s forwards;
  }
  
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  * {
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For IE/Edge */
  }
  
  #backgroundSwitcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
  }
  
  #switcherButton {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }
  
  #dropdownMenu {
    position: absolute;
    top: 60px;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
  }
  
  #backgroundSwitcher:hover #dropdownMenu {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
  
  #colorOptions button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }

  #colorOptions button:hover {
    transform: scale(1.1);
  }
  
  #imageList img {
    width: 40px; /* Same size as color buttons */
    height: 40px;
    border-radius: 50%; /* Makes them circular */
    border: 2px solid white; /* Optional: Adds a border for better visibility */
    cursor: pointer;
    object-fit: cover; /* Ensures images fit well inside the circle */
    transition: transform 0.2s ease-in-out;
    
  }

  #imageList img:hover {
    transform: scale(1.1);
  }
  
  #imageList .delete-btn {
    position: absolute;
    background: red;
    color: white;
    font-size: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
    top: -5px;
    right: -5px;
  }