/* My Cats gallery — Storybook Paper (consumes tokens from style.css) */
.gallery-topbar { justify-content: space-between; }
.btn-back {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px 0 12px;
  font-weight: 700;
  font-size: 13.5px;
}
.btn-back span { font-size: 16px; }

.gallery-wrap {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 36px) 44px;
}
.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.gallery-title { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--ink); margin: 0; }
.gallery-sub { font-size: 13px; color: var(--ink2); margin: 3px 0 0; }
.gallery-next { text-align: right; flex: 1 1 200px; min-width: 200px; max-width: 280px; }
.gallery-next-label { font-size: 11px; color: var(--ink2); margin: 0 0 6px; font-weight: 600; }
.gallery-next .bar { height: 10px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
}
.cat-card {
  position: relative;
  border-radius: 16px;
  padding: 14px 8px 11px;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.cat-card[data-unlocked='true'] { cursor: pointer; transition: transform 0.14s; }
.cat-card[data-unlocked='true']:hover { transform: translateY(-3px); }
.cat-card img { width: 72px; height: 72px; object-fit: contain; }
.cat-name { font-weight: 700; font-size: 12px; color: var(--ink); margin: 4px 0 0; }
.cat-tag { font-size: 10.5px; color: var(--ink2); font-weight: 600; margin: 1px 0 0; }

/* Equipped ("Your buddy") */
.cat-card[data-selected='true'] {
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow);
}
.cat-card[data-selected='true'] .cat-tag { color: var(--accent); }

/* Locked — grayed teaser with point cost */
.cat-card[data-unlocked='false'] {
  background: #F1ECDF;
  border: 1px dashed #D9CDB4;
  box-shadow: none;
}
.cat-card[data-unlocked='false'] img { filter: grayscale(1) brightness(0.96) opacity(0.42); }
.cat-card[data-unlocked='false'] .cat-name,
.cat-card[data-unlocked='false'] .cat-tag { color: #B7B19C; }

@media (max-width: 820px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .gallery { grid-template-columns: repeat(3, 1fr); } }