/* Word Search */

.search-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.search-status {
  margin: 0;
  width: min(100%, 720px);
  font-weight: 800;
  color: var(--ink-soft);
  text-align: center;
}

.search-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: min(100%, 720px);
}

.search-preview-item {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
}

.search-stage {
  width: min(100%, 720px);
}

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 0.7fr);
  gap: 14px;
  align-items: start;
}

.search-grid {
  --search-size: 10;
  display: grid;
  grid-template-columns: repeat(var(--search-size), minmax(0, 1fr));
  gap: 0;
  background: var(--floor);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
}

.search-cell {
  aspect-ratio: 1;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(36, 48, 55, 0.1);
  background: var(--floor);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.8vw, 1.15rem);
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
}

.search-cell.is-selecting {
  background: rgba(255, 107, 74, 0.35);
  color: var(--coral-deep);
}

.search-cell.is-found {
  background: color-mix(in srgb, var(--hl, #ff6b4a) 28%, white);
  color: var(--ink);
  font-weight: 800;
}

.search-cell.is-hint {
  animation: search-hint 0.5s ease 3;
  background: rgba(255, 200, 87, 0.45);
}

.search-cell.is-pulse {
  animation: search-pulse 0.35s ease;
}

@keyframes search-hint {
  50% { transform: scale(1.08); }
}

@keyframes search-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.search-words {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(70vh, 560px);
  overflow: auto;
}

.search-word {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.search-word.is-found {
  border-color: var(--hl, var(--teal));
  background: color-mix(in srgb, var(--hl, #1f8a7e) 18%, transparent);
}

.search-word.is-found .search-word-text {
  text-decoration: line-through;
  opacity: 0.75;
}

.search-word-emoji {
  font-size: 1.1rem;
}

.search-word-check {
  margin-left: auto;
  color: #2f9e44;
  font-weight: 800;
}

.search-found-toast {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0);
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--modal-bg);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}

.search-found-toast.show {
  animation: search-toast 1.2s ease forwards;
}

@keyframes search-toast {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -16px); }
}

.search-print-grid {
  display: grid;
  grid-template-columns: repeat(var(--search-size, 10), minmax(0, 1fr));
  width: min(100%, 480px);
  margin: 10px auto;
  border: 1px solid #243037;
}

.search-print-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #ccc;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

.search-print-cell.is-answer {
  background: #ffe8c8;
  font-weight: 800;
}

.search-print-words {
  text-align: center;
  font-weight: 700;
  color: #243037;
}

.search-print-batch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .search-layout {
    grid-template-columns: 1fr;
  }

  .search-words {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    max-height: none;
  }

  .search-cell {
    min-height: 40px;
  }
}

@media (pointer: coarse) {
  .search-cell {
    min-height: 44px;
    font-size: clamp(0.85rem, 3.2vw, 1.2rem);
  }
}

@media print {
  .search-print-batch {
    break-inside: avoid;
  }
}