/**
* Wordfind.js Mobile CSS
* Mobile-optimized styles for touch interaction
*/

/* Viewport container for puzzle - contains the zoomable/pannable puzzle */
#puzzle-viewport {
  position: relative;
  width: 100%;
    max-width: 700px;
  max-height: 710px;
    box-sizing: border-box; /* Include border in width calculation */
  overflow: hidden; /* Hide overflow - we handle panning with translate */
  margin: 0;
  padding: 0;
  touch-action: none; /* We handle all gestures in JS */
  
  /* Always have border present to prevent layout shift */
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

/* Green border when actively zooming/panning with two fingers */
#puzzle-viewport.zooming {
  border-color: #00cc00;
}

/* Puzzle container with custom zoom */
#puzzle {
    padding: 0px 10px 10px 10px;
  margin: 10px auto 0px auto;
    width: fit-content;
  touch-action: none; /* We handle touch gestures in JS */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 1;
  overflow: visible; /* Allow SVG outlines to show */
  transition: none; /* No transition for smoother real-time panning */
  transform-origin: center center;
  will-change: transform; /* Optimize for frequent transform changes */
}

/* SVG overlay for word outlines */
#puzzle .word-outline-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

#puzzle div.puzzle-row {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  touch-action: none;
  pointer-events: none;
}

/* Mobile-optimized puzzle squares with dynamic sizing */
#puzzle .puzzleSquare {
  /* Dynamic responsive sizing based on number of columns */
  /* Uses CSS variable --grid-cols set by JavaScript */
    /* Desktop: smaller cells calculated based on constrained 700px viewport */
  --cell-size: clamp(20px, calc((700px - 30px) / var(--grid-cols, 10)), 40px);
  font-size: calc(var(--cell-size) * 0.45);
    height: var(--cell-size);
  width: var(--cell-size);
  
  text-transform: uppercase;
  background-color: white;
  border: 0px solid black;
  padding: 0;
  margin: 0;
  
  /* Font size scales with cell size */
  font-weight: bold;
  font-family: sans-serif;
  line-height: 1;
  
  /* Touch optimization */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  
  /* Smooth transitions */
  transition: background-color 0.15s ease, transform 0.1s ease;
}

/* Remove Firefox button inner border */
button::-moz-focus-inner {
  border: 0;
}

/* Prevent pointer events on child elements to ensure elementFromPoint works */
#puzzle .puzzleSquare > * {
  pointer-events: none;
}

/* Indicates when a square has been selected */
/* Use !important to override .found class during selection */
#puzzle .selected {
  border-radius: 5px;
  background-color: orange !important;
  transform: scale(1.05);
}

/* Flash green for correct word */
#puzzle .flash-correct {
  border-radius: 5px;
  background-color: #00cc00 !important;
  color: white !important;
  animation: flash-correct 0.5s ease-out;
}

/* Flash red for incorrect word */
#puzzle .flash-incorrect {
  border-radius: 5px;
  background-color: #ff3333 !important;
  animation: flash-incorrect 0.5s ease-out;
}

/* Indicates that the square is part of a word that has been found */ 
/* Only used if USE_CELL_FILL is true in JS */
#puzzle .found {
  border-radius: 0px;
  background-color: rgba(0, 102, 204, 0.2);
  color: inherit;
  transform: scale(1);
}

/* Animation for correct word - green flash then fade */
@keyframes flash-correct {
  0% {
    background-color: #00cc00;
    transform: scale(1.1);
  }
  50% {
    background-color: #00cc00;
    transform: scale(1.1);
  }
  100% {
    background-color: blue;
    transform: scale(1);
  }
}

/* Animation for incorrect word - red flash then fade out */
@keyframes flash-incorrect {
  0% {
    background-color: #ff3333;
    transform: scale(1.05);
  }
  50% {
    background-color: #ff3333;
    transform: scale(1.05);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Solved state (when using solve button) */
/* Only used if USE_CELL_FILL is true in JS */
#puzzle .solved {
  background-color: rgba(204, 0, 0, 0.2);
  color: inherit;
}

/* Indicates that all words have been found */
#puzzle .complete {
  background-color: green;
}

/**
* Mobile-optimized word list styles
*/
#words {
  /* Scrollable container */
    width: 90%;
  max-width: 600px;
  max-height: 400px;
    clear: both;
  margin: 10px auto;
  padding: 10px;
  
  /* Make scrollable to keep visible with puzzle */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
  
  /* Visual scroll indicator */
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

#words ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
    /* Three columns for desktop */
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  }

#words li {
  padding: 6px 10px;
  font-size: 1.1em;
  font-weight: bold;
  font-family: sans-serif;
  text-align: left;
  
  /* Touch optimization */
  user-select: none;
  -webkit-user-select: none;
}

/* Indicates that the word has been found */
#words .wordFound {
  text-decoration: line-through;
  font-weight: normal;
  color: gray;
}

/**
* Mobile-optimized button styles
*/
#solve {
  margin: 0 20px;
  padding: 10px;
  text-align: center;
}

#solve a {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1.1em;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}