.back-link {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.3rem;
  color: #fff;
  background: var(--panel);
  border: 2px solid var(--panel-edge);
}
.gallery-wrap { padding: 8px clamp(16px, 4vw, 42px) 40px; }
.gallery-sub {
  text-align: center;
  color: #d7ccff;
  font-size: 1.05rem;
  max-width: 620px;
  margin: 4px auto 24px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.cat-card {
  position: relative;
  padding: 16px 12px 14px;
  border-radius: 20px;
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.16s, box-shadow 0.16s;
}
.cat-card[data-unlocked='true'] { cursor: pointer; }
.cat-card[data-unlocked='true']:hover { transform: translateY(-4px); box-shadow: var(--shadow), 0 0 26px rgba(255, 206, 77, 0.3); }
.cat-card[data-selected='true'] {
  border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 0 3px rgba(255, 206, 77, 0.4), 0 0 30px rgba(255, 206, 77, 0.45);
}
.cat-card img {
  width: 80%;
  max-width: 130px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(10, 4, 30, 0.5));
}
.cat-card[data-unlocked='false'] img {
  filter: grayscale(1) brightness(0.35) drop-shadow(0 8px 12px rgba(10, 4, 30, 0.5));
  opacity: 0.6;
}
.cat-card .cat-name {
  margin: 8px 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff2cf;
}
.cat-card[data-unlocked='false'] .cat-name { color: #8d80bd; }
.cat-card .cat-tag {
  font-size: 0.78rem;
  color: #b9abe0;
}
.cat-card[data-selected='true'] .cat-tag { color: var(--gold); font-weight: 700; }
.cat-card .cat-lock {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 1rem;
}