/*
  Halloween cosmetics (parts/cosmetics.js): badges, name colours, face frames.
  Loaded with the shell (index.html) because chat and the header use them on
  every page. Each look is keyed by the item's key in shared/mob-wars.ts.
*/

/* ---- badge: a small picture before the name ---- */
.cos-badge {
  display: inline-block; width: 16px; height: 16px; flex: none; object-fit: contain; vertical-align: -3px; margin-right: 3px;
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, .55));
}

/* ---- name colours ---- */
.cos-name.cos-color_pumpkin { color: #fb923c !important; }
.cos-name.cos-color_witch { color: #c084fc !important; }
.cos-name.cos-color_slime { color: #4ade80 !important; }
.cos-name.cos-color_blood { color: #f87171 !important; text-shadow: 0 0 6px rgba(239, 68, 68, .45); }
.cos-name.cos-color_ghost { color: #f5f3ff !important; text-shadow: 0 0 6px rgba(196, 181, 253, .9), 0 0 12px rgba(167, 139, 250, .6); }
.cos-name.cos-color_candy {
  color: transparent !important; background: linear-gradient(90deg, #f97316, #c084fc, #facc15, #f97316) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: cos-swirl 4s linear infinite;
}
@keyframes cos-swirl { to { background-position: 300% 0; } }

/* ---- frames round the face ---- */
.cos-fr.cos-frame_pumpkin { box-shadow: 0 0 0 2px #f97316, 0 0 10px 1px rgba(249, 115, 22, .7); }
.cos-fr.cos-frame_slime { box-shadow: 0 0 0 2px #4ade80, 0 0 0 4px rgba(22, 101, 52, .9), 0 0 12px 2px rgba(74, 222, 128, .55); }
.cos-fr.cos-frame_spectral { box-shadow: 0 0 0 2px #c4b5fd, 0 0 14px 3px rgba(167, 139, 250, .7); animation: cos-spectral 2.4s ease-in-out infinite; }
@keyframes cos-spectral {
  0%, 100% { box-shadow: 0 0 0 2px #c4b5fd, 0 0 10px 2px rgba(167, 139, 250, .5); }
  50% { box-shadow: 0 0 0 2px #ede9fe, 0 0 18px 5px rgba(167, 139, 250, .9); }
}
.cos-fr.cos-frame_inferno { animation: cos-inferno 1.6s linear infinite; }
@keyframes cos-inferno {
  0% { box-shadow: 0 0 0 2px #facc15, 0 0 0 4px #f97316, 0 0 14px 4px rgba(239, 68, 68, .7); }
  50% { box-shadow: 0 0 0 2px #f97316, 0 0 0 4px #ef4444, 0 0 20px 6px rgba(250, 204, 21, .6); }
  100% { box-shadow: 0 0 0 2px #facc15, 0 0 0 4px #f97316, 0 0 14px 4px rgba(239, 68, 68, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .cos-name.cos-color_candy, .cos-fr.cos-frame_spectral, .cos-fr.cos-frame_inferno { animation: none; }
}