/* Subnautica 2 Creature Database — dark mode */

.sn2-root {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 22px;
  color: #e8eef4;
  margin: 24px 0;
}

.sn2-header { margin-bottom: 14px; }
.sn2-title  { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: #ffd86b; }
.sn2-sub    { margin: 0; font-size: 14px; color: rgba(232, 238, 244, 0.65); }

.sn2-search {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8eef4;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.sn2-chip-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px;
}
.sn2-chip-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(232, 238, 244, 0.55); margin-right: 4px; font-weight: 600;
}
.sn2-chip {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--chip);
  color: rgba(232, 238, 244, 0.55);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.55;
  font-weight: 600;
}
.sn2-chip.is-active {
  background: var(--chip);
  color: #0f1418;
  opacity: 1;
}

.sn2-count {
  font-size: 12px;
  color: rgba(232, 238, 244, 0.55);
  margin-top: 12px;
  margin-bottom: 10px;
}

.sn2-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 600px) { .sn2-results { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sn2-results { grid-template-columns: 1fr 1fr 1fr; } }

.sn2-empty {
  grid-column: 1/-1;
  padding: 30px;
  text-align: center;
  color: rgba(232, 238, 244, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.sn2-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--biome-color);
  border-radius: 8px;
}
.sn2-threat-leviathan {
  background: rgba(255, 91, 91, 0.06);
  border-color: rgba(255, 91, 91, 0.30);
  border-left-color: var(--biome-color);
}

.sn2-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px; gap: 8px;
}
.sn2-card-name { font-size: 16px; font-weight: 600; color: #ffd86b; }
.sn2-card-threat {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
}
.sn2-card-meta {
  font-size: 11px; color: rgba(232, 238, 244, 0.5); margin-bottom: 8px;
}
.sn2-card-blurb {
  font-size: 13px; line-height: 1.5; color: rgba(232, 238, 244, 0.85);
}

.sn2-cta-link {
  display: block;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #e8eef4;
  text-decoration: none;
}
.sn2-cta-link:hover { background: rgba(255, 255, 255, 0.12); color: #e8eef4; text-decoration: none; }
.sn2-cta-link strong { display: block; color: #ffd86b; margin-bottom: 2px; }
.sn2-cta-link span { font-size: 13px; color: rgba(232, 238, 244, 0.75); }

.sn2-foot {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(232, 238, 244, 0.45);
  line-height: 1.5;
}