/* Touch-Specific Styles for Devices with Coarse Pointers (Touch) */
@media (pointer: coarse) {

  body, #game-container, button {
    /*overflow: hidden;*/
    /*touch-action: none; Prevent scrolling/zooming */

touch-action: none;
    -webkit-tap-highlight-color: transparent; /* Remove touch highlight */
    -moz-tap-highlight-color: transparent; /* Firefox-specific */
     user-select: none; /* Prevent text selection */
 
     overflow-x: hidden;
  }


  .puzzle-piece {
    touch-action: manipulation; /* Allow touch events */
    transition: box-shadow 0.1s ease, border 0.1s ease; /* Smooth visual feedback */
  }

  .puzzle-piece.rotating {
    box-shadow: 0 0 20px rgba(0, 255, 204, 1); /* Neon glow */
    border: 2px solid #ffffff; /* White border */
    transition: box-shadow 0.1s ease, border 0.1s ease;
  }

  .puzzle-piece.correct .rotate-indicator {
    display: none; /* Hide indicator for locked pieces */
  }

  .rotate-indicator {
    width: 28px;
    height: 28px;
    opacity: 0;
    transition: opacity 0.1s ease;
  }

  .puzzle-piece.rotating .rotate-indicator {
    opacity: 0.9; /* Show during rotation */
  }



 .share-btn {
            padding: 6px 12px;
            text-decoration: none;
            color: #fff;
            border-radius: 5px;
            font-size: 0.6em;
            transition: background-color 0.3s ease;
        }

 .footer-links {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 0.6em;
            justify-content: center;
        }



}









/* Styles for Long Screens (Tall and Narrow) */
@media (min-aspect-ratio: 1/2) {
  #menu-area {
    padding: 3px;
  }

  #header-row {
    max-width: 100%;
  }

  #score, #timer, #highscore, #level {
    font-size: 0.7em;
  }

  #button-row {
    gap: 3px;
  }

  button {
    padding: 5px 10px;
    font-size: 0.7em;
  }

  #sound-btn {
    padding: 5px;
    width: 35px;
    font-size: 0.9em;
  }

  #instructions-popup, #highscore-popup, #difficulty-warning-popup, #popup {
    padding: 15px;
    max-width: 95%;
  }

  #instructions-popup p, #difficulty-warning-popup p {
    font-size: 0.9em;
  }

  #highscore-popup h2 {
    font-size: 1.1em;
  }

  #highscore-table th, #highscore-table td {
    padding: 3px;
    font-size: 0.8em;
  }



}

/* Styles for Horizontal but Not High Screens (Wide and Short) */
@media (max-aspect-ratio: 2/1) { /* Corrected */


  #menu-area {
    padding: 4px;
  }

  #header-row {
    max-width: 95%;
  }

  #score, #timer, #highscore, #level {
    font-size: 0.75em;
  }

  #button-row {
    gap: 4px;
  }

  button {
    padding: 6px 12px;
    font-size: 0.75em;
  }

  #sound-btn {
    padding: 6px;
    width: 40px;
    font-size: 1em;
  }

  #game-container {
    padding: 8px;
  }

  #instructions-popup, #highscore-popup, #difficulty-warning-popup, #popup {
    padding: 18px;
    max-width: 90%;
  }

  #instructions-popup p, #difficulty-warning-popup p {
    font-size: 0.95em;
  }

  #highscore-popup h2 {
    font-size: 1.15em;
  }

  #highscore-table th, #highscore-table td {
    padding: 4px;
    font-size: 0.85em;
  }





}




/* Global Highlight Suppression */
@media (pointer: coarse) {

  * {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    outline: none;
  }

}