/* Shared Cobbleverse pieces drawn by cobble.js: faces, party icons, badges.
   Colours come from each page's tokens (--card, --text, --muted, --border). */

img.face { image-rendering: pixelated; border-radius: 4px; flex: none; }

.party { display: flex; flex-wrap: wrap; gap: 2px; }
.party .mon { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; }
/* The E19 icons are 64px with the Pokémon drawn in roughly the middle 40% (minimap icons have
   wide transparent margins). Scaling up fills the slot; the overflow is only transparent
   margin, so it never covers a neighbour visibly and the layout size stays the same. */
.party img { width: 40px; height: 40px; image-rendering: pixelated; transform: scale(1.8); }
.party .mon { margin: 0 2px; }
.party .sparkle {
  position: absolute;
  top: -2px;
  right: -1px;
  font-size: 0.75rem;
  line-height: 1;
  color: #e6a817;
  text-shadow: 0 0 2px var(--card), 0 0 2px var(--card);
}
.party .species { font-size: 0.75rem; font-weight: 600; line-height: 1.2; text-align: center; }
.party .lv { color: var(--muted); font-size: 0.7rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.party-none { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Badge case, like the in-game one: a dark case of eight slots. Earned badges in full colour,
   missing ones as faint silhouettes. The case stays dark in light mode too, as in the games. */
.badge-case {
  display: inline-grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  padding: 4px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2b3a55, #1d2740);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.badge-case .slot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
}
.badge-case img { width: 16px; height: 16px; object-fit: contain; filter: grayscale(1) brightness(0.5); opacity: 0.35; }
.badge-case .earned img { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5)); opacity: 1; }
.badge-case.large { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 14px; border-radius: 14px; }
.badge-case.large .slot { width: 46px; height: 46px; }
.badge-case.large img { width: 38px; height: 38px; }
.badges-text { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Favourite type as the game's label. */
img.type { height: 20px; width: auto; display: block; }
.type-text { font-size: 0.8rem; font-weight: 600; }

/* Online / offline dot. */
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.presence::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.presence.on { color: var(--text); }
.presence.on::before { background: #2e9e5b; }