/* Base only: keep everything scoped via .jpms-* so it cannot ruin the page */
.jpms-cards-wrap,
.jpms-schedule-wrap,
.jpms-list-wrap,
.jpms-modal {
  box-sizing: border-box;
}

.jpms-cards-wrap *,
.jpms-schedule-wrap *,
.jpms-list-wrap *,
.jpms-modal * {
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Badges & pills (age-group badge, HEIM/AUSWÄRTS/LIVE pills) — shared by
   every layout that shows a game (flat cards, spotlight cards, the list).
   Lives in the base stylesheet, which every layout depends on and always
   loads, rather than jpms-cards-spotlight.css: that file is only enqueued
   for layout="spotlight", so layout="list" (jpms-list-css only depends on
   jpms-cards-css, not spotlight) was rendering these as plain unstyled text
   — no background, no padding, no radius — while still working correctly
   wherever spotlight also happened to be on the page.
   ------------------------------------------------------------------------- */
.jpms-badge,
.jpms-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 1px 7px;
  white-space: nowrap;
  line-height: 1.5;
}

.jpms-badge--team {
  background: var(--jpms-badge-bg, #14234b);
  color: var(--jpms-badge-text, #fff);
}

.jpms-pill--home {
  background: var(--jpms-pill-home-bg, rgba(47,131,247,0.12));
  color: var(--jpms-pill-home-text, #1d59b0);
  border: 1px solid var(--jpms-pill-home-border, rgba(47,131,247,0.30));
}

.jpms-pill--away {
  background: var(--jpms-pill-away-bg, rgba(100,116,139,0.10));
  color: var(--jpms-pill-away-text, #5c6a8a);
  border: 1px solid var(--jpms-pill-away-border, rgba(100,116,139,0.25));
}

.jpms-pill--live {
  background: var(--jpms-pill-live-bg, #e11d48);
  color: #fff;
  animation: jpms-live-pulse 1.8s ease-in-out infinite;
}

/* A live score needs to read as "happening right now", not just a red
   label — same pulse everywhere a LIVE pill appears (list rows, spotlight
   cards, the compact modal, the rich HockeyData overlay's own pill uses
   the same animation name — see game-report.css). */
@keyframes jpms-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .jpms-pill--live { animation: none; }
}