/* Badges section — medallions + horizontal marquee.
   Colors are precomputed from the app's BadgePalette(hue:) recipe in
   ios/Present/Badges.swift so web medals match the app exactly. */

.badge-marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.badge-row { overflow: hidden; width: 100%; }
.badge-track {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: fit-content;
  animation: badges-left 32s linear infinite;
}
.badge-marquee:hover .badge-track { animation-play-state: paused; }
@keyframes badges-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .badge-track { animation: none; }
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 200px;
  background-color: #121214;
  border: 1px solid #FFFFFF1A;
  border-radius: 20px;
  padding: 26px 18px 22px 18px;
}
.badge-name {
  color: #FFFFFF;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.badge-detail {
  margin-top: -6px;
  color: #8E8E93;
  font-family: Figtree, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
}

/* Medallion: conic rim, dished face, stamped icon, specular sweep */
.badge-medal {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(from -45deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r1));
  box-shadow: 0 0 26px var(--glow);
}
.badge-medal::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--f1), var(--f2));
  box-shadow: inset 0 1px 1px #FFFFFF59, 0 2px 4px #00000059;
}
.badge-medal::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFFFFF46, #FFFFFF00 55%);
  pointer-events: none;
}
.badge-medal svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  z-index: 1;
  color: var(--eng);
  filter: drop-shadow(0 1px 0 #FFFFFF4D);
}

/* Palettes: rim stops r1–r4 (bright/deep/bright/deep), face f1–f2,
   engraving, glow at 35% alpha. */
.medal-kindling  { --r1:#FFD3B2; --r2:#99521F; --r3:#F2AC79; --r4:#7A3E12; --f1:#EBA06A; --f2:#85471B; --eng:#47240B; --glow:#E6965C59; }
.medal-onfire    { --r1:#FFB2BC; --r2:#991F2D; --r3:#F27988; --r4:#7A121F; --f1:#EB6A79; --f2:#851B27; --eng:#470B12; --glow:#E65C6C59; }
.medal-unbroken  { --r1:#FFEEB2; --r2:#997E1F; --r3:#F2D879; --r4:#7A6412; --f1:#EBCE6A; --f2:#856D1B; --eng:#473A0B; --glow:#E6C75C59; }
.medal-regular   { --r1:#B2E8FF; --r2:#1F7499; --r3:#79CEF2; --r4:#125B7A; --f1:#6AC4EB; --f2:#1B6585; --eng:#0B3547; --glow:#5CBCE659; }
.medal-devoted   { --r1:#B2C3FF; --r2:#1F3A99; --r3:#7994F2; --r4:#12297A; --f1:#6A86EB; --f2:#1B3285; --eng:#0B1847; --glow:#5C7AE659; }
.medal-centurion { --r1:#DDB2FF; --r2:#631F99; --r3:#BD79F2; --r4:#4D127A; --f1:#B26AEB; --f2:#561B85; --eng:#2D0B47; --glow:#A95CE659; }
.medal-present   { --r1:#B2FFBF; --r2:#1F9932; --r3:#79F28D; --r4:#127A23; --f1:#6AEB7E; --f2:#1B852B; --eng:#0B4714; --glow:#5CE67259; }
.medal-deepend   { --r1:#B2FFED; --r2:#1F997C; --r3:#79F2D5; --r4:#127A61; --f1:#6AEBCC; --f2:#1B856B; --eng:#0B4739; --glow:#5CE6C459; }
.medal-monkmode  { --r1:#FFB2EA; --r2:#991F77; --r3:#F279D0; --r4:#7A125D; --f1:#EB6AC6; --f2:#851B67; --eng:#470B36; --glow:#E65CBF59; }