/* ── Animal detail pages ── */
.animal-page {
  padding-bottom: 48px;
}
.animal-scientific-name {
  color:         rgba(255, 255, 255, 0.45);
  font-size:     14px;
  font-style:    italic;
  margin-bottom: 24px;
  margin-top:    0;
}
.animal-img-wrap {
  border-radius: 12px;
  margin-bottom: 24px;
  overflow:      hidden;
  position:      relative;
  width:         100%;
}
.animal-img-wrap--playable {
  cursor: pointer;
}
.animal-img-play-hint {
  background:      rgba(0, 0, 0, 0.55);
  bottom:          0;
  color:           rgba(255, 255, 255, 0.9);
  font-size:       13px;
  font-weight:     600;
  left:            0;
  letter-spacing:  0.04em;
  opacity:         0;
  padding:         10px 0;
  position:        absolute;
  text-align:      center;
  text-transform:  uppercase;
  transition:      opacity 0.2s ease;
  width:           100%;
}
.animal-img-wrap--playable:hover .animal-img-play-hint {
  opacity: 1;
}
.animal-img {
  display:    block;
  height:     auto;
  max-height: 420px;
  object-fit: cover;
  width:      100%;
}
.animal-play-btn {
  background:      rgba(255, 255, 255, 0.14);
  border:          1px solid rgba(255, 255, 255, 0.3);
  border-radius:   8px;
  color:           rgba(255, 255, 255, 0.95);
  cursor:          pointer;
  display:         block;
  font-family:     inherit;
  font-size:       17px;
  font-weight:     600;
  margin-bottom:   24px;
  padding:         14px 20px;
  text-align:      center;
  text-decoration: none;
  transition:      background 0.15s;
  width:           100%;
}
.animal-play-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color:      rgba(255, 255, 255, 1);
}
.animal-collection-link {
  color:           rgba(255, 255, 255, 0.55);
  display:         block;
  font-size:       12px;
  margin-bottom:   24px;
  text-align:      center;
  text-decoration: none;
}
.animal-collection-link:hover {
  color: rgba(255, 255, 255, 0.85);
}
.animal-classification {
  margin-bottom: 28px;
}
.animal-tax-row {
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  display:     flex;
  gap:         16px;
  padding:     10px 0;
}
.animal-tax-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.animal-tax-rank {
  color:          rgba(255, 255, 255, 0.4);
  flex-shrink:    0;
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width:          72px;
}
.animal-tax-val {
  color:     rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.animal-variation {
  color:         rgba(255, 255, 255, 0.5);
  font-size:     13px;
  font-style:    italic;
  margin-bottom: 20px;
  margin-top:    -4px;
}

/* ── Animal page: single-column layout ── */
.animal-page-wrap {
  box-sizing:  border-box;
  color:       rgba(255, 255, 255, 0.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  margin:      0 auto;
  max-width:   640px;
  padding:     40px 28px 60px;
}
@media (max-width: 600px) {
  .animal-page-wrap { padding: 72px 20px 48px; }
}
.animal-main-col { min-width: 0; }
.animal-h1 {
  color:         rgba(255, 255, 255, 0.85);
  font-size:     26px;
  font-style:    italic;
  font-weight:   600;
  margin:        0 0 6px;
}

/* ── Animal side column: play button ── */
.animal-play-btn {
  background:      rgba(255, 255, 255, 0.14);
  border:          1px solid rgba(255, 255, 255, 0.3);
  border-radius:   8px;
  color:           rgba(255, 255, 255, 0.95);
  cursor:          pointer;
  display:         block;
  font-family:     inherit;
  font-size:       16px;
  font-weight:     600;
  margin-bottom:   24px;
  padding:         13px 20px;
  text-align:      center;
  text-decoration: none;
  transition:      background 0.15s;
}
.animal-play-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color:      rgba(255, 255, 255, 1);
}

/* ── Animal side column: merch ── */
.animal-merch-section {
  border-top:  1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
}
.animal-merch-card {
  align-items:     flex-start;
  border-radius:   8px;
  color:           inherit;
  display:         flex;
  gap:             10px;
  margin-bottom:   14px;
  padding:         10px;
  text-decoration: none;
  transition:      background 0.15s;
}
.animal-merch-card:hover {
  background: rgba(255, 255, 255, 0.06);
}
.animal-merch-img {
  border-radius: 4px;
  flex-shrink:   0;
  height:        64px;
  object-fit:    cover;
  width:         44px;
}
.animal-merch-info {
  min-width: 0;
}
.animal-merch-title {
  color:       rgba(255, 255, 255, 0.85);
  font-size:   13px;
  font-weight: 500;
  line-height: 1.35;
}
.animal-merch-author {
  color:      rgba(255, 255, 255, 0.4);
  font-size:  11px;
  margin-top: 3px;
}
.animal-merch-price {
  color:      rgba(255, 255, 255, 0.55);
  font-size:  11px;
  margin-top: 4px;
}

/* ── Collection animal grid ── */
.collection-animal-grid {
  display:               grid;
  gap:                   16px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-top:            8px;
}
.collection-animal-card {
  border-radius:   8px;
  color:           rgba(255, 255, 255, 0.8);
  display:         block;
  overflow:        hidden;
  text-decoration: none;
  transition:      background 0.15s, transform 0.15s;
}
.collection-animal-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform:  translateY(-2px);
}
.collection-animal-thumb {
  aspect-ratio: 1;
  display:      block;
  object-fit:   cover;
  width:        100%;
}
.collection-animal-thumb--empty {
  background: rgba(255, 255, 255, 0.05);
}
.collection-animal-name {
  font-size:   12px;
  line-height: 1.3;
  padding:     7px 8px 8px;
}

/* ── How It Works: collection link ── */
.info-collection-link {
  color:           rgba(255, 255, 255, 0.65);
  font-size:       13px;
  text-decoration: none;
  transition:      color 0.15s;
}
.info-collection-link:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ── Homepage: view collection link ── */
.collection-view-link {
  color:           rgba(255, 255, 255, 0.72);
  font-size:       inherit;
  text-decoration: none;
  transition:      color 0.15s;
}
.collection-view-link:hover {
  color: rgba(255, 255, 255, 0.98);
}