/* ═══════════════════════════════════
   PETS PAGE — pets.css
   ═══════════════════════════════════ */

.pets-hero {
  background: linear-gradient(135deg, #0a1a0a 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
}
.pets-hero h1 { font-size: clamp(1.8rem,4vw,2.8rem); margin-bottom: 0.6rem; }
.accent { color: var(--accent); }
.pets-hero-sub { color: var(--text-muted); max-width: 600px; font-size: 1.05rem; margin-bottom: 1.2rem; }
.pets-hero-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stat-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 0.3rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }

/* ── Spotlight ── */
.pets-spotlight { margin: 2rem auto; }
.pets-spotlight h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.section-sub { color: var(--text-muted); margin-bottom: 1.2rem; font-size: 0.95rem; }
.spotlight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; }
.spot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem;
  border-top: 3px solid;
  text-align: center;
}
.spot-s { border-top-color: #cc00ff; }
.spot-a { border-top-color: #00aaff; }
.spot-emoji { font-size: 2rem; margin-bottom: 0.4rem; }
.spot-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.spot-rarity { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.5rem; }
.spot-ability { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.4rem; }
.spot-source { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

/* ── Controls ── */
.pets-controls { margin-bottom: 1rem; }
.pets-search-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-bottom: 0.6rem; }
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.9rem; pointer-events: none; }
.search-wrap input {
  width: 100%;
  padding: 0.65rem 0.75rem 0.65rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}
.search-wrap input:focus { border-color: var(--accent); }
.pets-search-row select { padding: 0.62rem 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.88rem; cursor: pointer; outline: none; }
.pets-search-row select:focus { border-color: var(--accent); }
.pets-result-count { font-size: 0.85rem; color: var(--text-muted); }
.pets-result-count span { font-weight: 700; color: var(--accent); }

/* ── Table ── */
.pets-table-wrap { overflow-x: auto; margin-bottom: 2.5rem; }
.pets-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9rem;
}
.pets-table thead th {
  background: var(--bg-alt);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pets-table tbody tr { border-bottom: 1px solid var(--border); }
.pets-table tbody tr:last-child { border-bottom: none; }
.pets-table tbody tr:hover { background: var(--bg-alt); }
.pets-table td { padding: 0.65rem 1rem; vertical-align: middle; }
.pet-ability-col { font-size: 0.83rem; color: var(--text-muted); max-width: 260px; }
@media (max-width: 640px) { .col-source-pet, .col-mut-pet { display: none; } }

/* Tier badges */
.ptier-badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 10px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ptier-s { background: #2a0044; color: #cc00ff; border: 1px solid #cc00ff; }
.ptier-a { background: #002244; color: #00aaff; border: 1px solid #00aaff; }
.ptier-b { background: #1a2a00; color: #88cc00; border: 1px solid #88cc00; }
.ptier-c { background: #2a2a00; color: #cccc00; border: 1px solid #cccc00; }
.ptier-d { background: #2a1a1a; color: #cc6666; border: 1px solid #cc6666; }

/* Rarity badges (shared) */
.rarity-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.rarity-common    { background:#3a4a2a; color:#7ec850; }
.rarity-uncommon  { background:#2a4a3a; color:#50e0a0; }
.rarity-rare      { background:#2a3a5a; color:#60a0f0; }
.rarity-epic      { background:#3a2a5a; color:#b060f0; }
.rarity-legendary { background:#4a3a1a; color:#f0c060; }
.rarity-mythical  { background:#4a1a4a; color:#e060e0; }
.rarity-divine    { background:#3a2010; color:#f08040; }

/* ── XP Guide ── */
.pets-xp-guide { margin-bottom: 2.5rem; }
.pets-xp-guide h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.xp-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.xp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem; }
.xp-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.xp-card p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ── Eggs ── */
.pets-eggs { margin-bottom: 2.5rem; }
.pets-eggs h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.eggs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; margin-top: 1.2rem; }
.egg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; }
.egg-icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
.egg-name { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; }
.egg-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }

/* ── FAQ ── */
.pets-faq { max-width: 780px; margin-bottom: 3rem; }
.pets-faq h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; }
.faq-item summary { padding: 0.85rem 1rem; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: "›"; font-size: 1.2rem; transform: rotate(90deg); transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(270deg); }
.faq-item p { padding: 0 1rem 0.85rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin: 0; }

.no-results { text-align: center; padding: 2rem; color: var(--text-muted); }