/* Shared by every overlay page. Colours come from the active kit as CSS variables. */
:root {
  --primary: #7ED957;
  --accent: #FF8AC5;
  --bg: rgba(18, 36, 24, 0.78);
  --bg-row: rgba(255, 255, 255, 0.08);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.72);
  --glow: rgba(126, 217, 87, 0.55);
  --font: 'Mitr', 'Noto Sans Thai', 'Segoe UI', sans-serif;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: transparent !important; overflow: hidden;
  font-family: var(--font); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
.hidden { display: none !important; }

.avatar {
  width: var(--avatar, 40px); height: var(--avatar, 40px); border-radius: 50%;
  object-fit: cover; background: var(--bg-row); border: 2px solid var(--primary);
  flex: none;
}
.avatar.fallback {
  display: flex; align-items: center; justify-content: center; font-weight: 600;
  font-size: calc(var(--avatar, 40px) * 0.45); background: var(--accent); color: #fff;
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.4; background: var(--bg-row); color: var(--text);
  white-space: nowrap;
}
.badge img { width: 18px; height: 18px; }
.badge.tier-trex { background: linear-gradient(90deg, #ffd166, #ff9f1c); color: #3b2300; }
.badge.tier-raptor { background: var(--primary); color: #0e2a12; }
.badge.tier-hatchling { background: var(--accent); color: #3a0a22; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; background: var(--bg-row); color: var(--muted);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-primary, var(--primary)); }

@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 var(--glow); } 100% { box-shadow: 0 0 0 14px rgba(0,0,0,0); } }
@keyframes slide-in { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-out { to { transform: translateY(-24px); opacity: 0; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }