/* A progressively enhanced, circular badge showcase. The grid is the fallback. */
.badge-carousel.is-enhanced { position: relative; }
/* Mobile browsers may highlight the clickable track instead of its buttons. */
.badge-carousel.is-enhanced,
.badge-carousel.is-enhanced * { -webkit-tap-highlight-color: transparent; }
.badge-carousel.is-enhanced .collectible-grid {
  display: block; position: relative; height: 260px; overflow: hidden;
  perspective: 1000px; touch-action: pan-y; isolation: isolate; cursor: pointer;
  background: radial-gradient(ellipse at 50% 50%,#3ddfff12,transparent 64%);
}
.badge-edge {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 20;
  padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
.badge-edge-left { left: 0; }
.badge-edge-right { right: 0; }
.badge-edge::after {
  content: ""; position: absolute; top: calc(48% - 38px); width: 32px; height: 76px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 80'%3E%3Cpath d='M4 5L14 40L4 75M18 5L28 40L18 75' fill='none' stroke='%238af3ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='miter'/%3E%3C/svg%3E");
  opacity: .35; filter: drop-shadow(0 0 3px #bafaff) drop-shadow(0 0 10px #3de6ffb3);
  animation: badge-edge-hint 4s ease-in-out infinite paused;
}
.badge-edge::before {
  content: ""; position: absolute; top: calc(48% - 20px); width: 40px; height: 40px;
  transform: rotate(45deg); border: 1px solid #8af3ff26;
  background: radial-gradient(ellipse, #6aeaff24, #3de6ff08 55%, transparent 75%);
  box-shadow: 0 0 16px #3de6ff18, inset 0 0 12px #3de6ff12;
  pointer-events: none;
}
.badge-edge-left::after { left: 10px; transform: rotate(180deg); }
.badge-edge-right::after { right: 10px; }
.badge-edge-left::before { left: 7px; }
.badge-edge-right::before { right: 7px; }
.hints-active .badge-edge::after { animation-play-state: running; }
.badge-edge:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.badge-edge:focus-visible::after { opacity: 1; animation: none; }
@media (hover: hover) {
  .badge-edge:hover::after { opacity: .85; animation: none; }
}
@keyframes badge-edge-hint { 0%,100% { opacity: .22; } 50% { opacity: .6; } }
.badge-carousel.is-enhanced .collectible-grid::before {
  content: ""; position: absolute; width: 70%; height: 1px; bottom: 21px; left: 15%;
  background: linear-gradient(90deg,transparent,#4ce8ff66,transparent);
}
.badge-carousel.is-enhanced .collectible-grid::after {
  content: ""; position: absolute; width: 300px; height: 38px; bottom: 20px; left: 50%;
  transform: translateX(-50%); background: radial-gradient(ellipse,#42cde34d,transparent 70%);
  pointer-events: none;
}
.badge-carousel.is-enhanced .collectible-card {
  position: absolute; top: 48%; left: 50%; width: 248px; border: 0; border-radius: 50%;
  background: none; overflow: visible; cursor: pointer;
  transform: translate(-50%,-50%) translateX(var(--badge-x)) translateY(var(--badge-y)) scale(var(--badge-scale)) rotateY(var(--badge-turn));
  opacity: var(--badge-opacity); z-index: var(--badge-depth);
  transition: transform 850ms cubic-bezier(.22,.68,.2,1), opacity 750ms ease;
  will-change: transform;
}
.badge-carousel.is-enhanced .collectible-card[data-visible="false"] { pointer-events: none; }
.badge-carousel.is-enhanced .collectible-card::before { content: ""; position: absolute; inset: 9%; z-index: -1; border-radius: 50%; background: var(--badge-accent); opacity: .16; filter: blur(26px); pointer-events: none; }
.badge-carousel.is-enhanced .collectible-card.is-current::before { inset: 5%; opacity: .3; filter: blur(30px); }
.badge-carousel.is-enhanced .collectible-art { padding: 16px; background: radial-gradient(ellipse,var(--badge-glow),transparent 74%); }
.badge-carousel.is-enhanced .collectible-art img { width: 100%; max-width: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 14px #000c) drop-shadow(0 0 12px var(--badge-glow)); }
.badge-carousel.is-enhanced .is-current .collectible-art img { filter: drop-shadow(0 22px 16px #000d) drop-shadow(0 0 24px var(--badge-glow)); }
.badge-carousel.is-enhanced .collectible-card figcaption { display: none; }
.badge-carousel-caption { text-align: center; min-height: 86px; padding-inline: 12px; }
.badge-carousel-caption .collectible-category { color: var(--selected-accent, var(--cyan)); margin-bottom: 8px; }
.badge-carousel-caption h3 { font-size: clamp(19px,2.5vw,24px); }
.badge-carousel-caption p { font-size: 12px; color: var(--muted); margin-top: 8px; }
.badge-carousel-caption[hidden] { display: none; }
.badge-image-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 579px) {
  .badge-carousel.is-enhanced .collectible-grid { height: 215px; }
  .badge-carousel.is-enhanced .collectible-card { width: 190px; }
  .badge-carousel.is-enhanced .collectible-art { padding: 12px; }
  .badge-carousel-caption { min-height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-carousel.is-enhanced .collectible-card { transition: none; }
  .badge-edge::after { animation: none; }
}