.controls {
    display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center;
    background: #f5f7fb; padding: 10px; border-radius: 12px; box-shadow: var(--shadow);
    position: sticky; top: 8px; z-index: 5;
}
.controls input, .controls select {
    padding: 8px 10px; border: 1px solid var(--ring); border-radius: 10px; background: #fff;
}
.count { color: var(--subtle); font-size: 13px; }

.grid {
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(4, 1fr); /* ~4 per row on desktop */
    align-items: start;
    margin-top: 16px;
}

.thumb {
    width: 100%; aspect-ratio: 4/3; border-radius: 10px; background: #eef1f7;
    display: grid; place-items: center; font-size: 12px; color: var(--subtle);
    border: 1px dashed #dfe3ea;
}

/* Nav row for forward/back buttons */
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.toggle-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.toggle-btn {
  padding: 6px 14px;
  font-size: 20px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
}

.toggle-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}


.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.nav-controls {
  display: flex;
  align-items: right;
  flex-direction: column;
  gap: 8px;
  margin-left: auto; /* push controls to the right */
  font-size: 13px;
}

.nav-controls label {
  display: flex;
  align-items: center;
  gap: 4px;
}

#cardMode,
#cardIndex {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

.hideCardDex {
  background-color: #ff7700;
  width: 150px;
  align-self: right;
}

.grid-card{
   max-width:23vw;
}

/* Blur the image for encountered cards */
.blurred-image {
  filter: blur(4px);
}

/* Blur text (flavor, parents, creator) */
.blurred-text {
  filter: blur(5px);
}

/* Optional: show that it's intentionally hidden */
.encountered-card .blurred-text::after {
  content: " Locked";
  font-weight: bold;
  margin-left: 0.25em;
  text-shadow: none;
}

.card-image-q {
  display: block;
  width: 100%;
  object-fit: contain;
}


@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(1, 1fr); /* ~4 per row on desktop */
  }
  
  .grid-card{
    max-width:90vw;
    display: block !important;
  }
}