.badge-board { position: relative; width: calc(100% - 12px); min-height: 500px; margin: 0 0 12px; overflow: hidden; border: 2px solid var(--ink); background-color: var(--white); background-image: radial-gradient(#c7c7c7 1.2px, transparent 1.3px); background-size: 16px 16px; box-shadow: 12px 12px 0 var(--ink); }

.badge-button { position: absolute; top: var(--badge-y, 0); left: var(--badge-x, 0); border: 0; padding: 0; background: transparent; cursor: pointer; }
.badge-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.badge { display: block; height: auto; object-fit: contain; filter: drop-shadow(2px 3px 1px rgba(0, 0, 0, .25)); transform: none; }
.badge--cape-town { width: 132px; }
.badge--pickleball { width: 128px; }
.badge--book { width: 88px; border: 2px solid var(--ink); background: var(--white); padding: 2px; box-shadow: 3px 3px 0 var(--ink); filter: none; }
.badge--cards { width: 124px; }
.badge--chess { width: 84px; }
.badge--crown { width: 100px; }
.badge--vim { width: 104px; }
.board-pin { position: absolute; z-index: 3; top: calc(50% - var(--pin-offset, 65px)); left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border: 3px solid var(--ink); border-radius: 50%; background: #f7f3e8; box-shadow: 1px 2px 0 var(--ink); cursor: grab; touch-action: none; }
.badge-button.is-dragging .badge-caption { display: none !important; }
.badge-button.is-dragging .badge { animation: none !important; }
.badge-button--cape-town { --pin-offset: 59px; --badge-x: 14%; --badge-y: 20%; }
.badge-button--pickleball { --pin-offset: 76px; --badge-x: 36%; --badge-y: 20%; }
.badge-button--book { --pin-offset: 72px; --badge-x: 56%; --badge-y: 15%; }
.badge-button--cards { --pin-offset: 64px; --badge-x: 75%; --badge-y: 18%; }
.badge-button--chess { --pin-offset: 68px; --badge-x: 21%; --badge-y: 65%; }
.badge-button--crown { --pin-offset: 58px; --badge-x: 43%; --badge-y: 69%; }
.badge-button--vim { --pin-offset: 71px; --badge-x: 64%; --badge-y: 64%; }

.badge-caption { position: absolute; z-index: 5; top: -12px; left: 50%; display: none; width: min(190px, calc(100vw - 40px)); transform: translate(-50%, -100%) rotate(-1.5deg); border: 2px solid var(--ink); background: var(--white); box-shadow: 3px 3px 0 var(--ink); padding: 8px 10px; color: var(--acid); font-size: 11px; font-weight: 800; line-height: 1.35; text-align: center; white-space: normal; pointer-events: none; }
.badge-button.is-hovered .badge-caption { display: block; position: fixed; left: var(--bubble-x); top: var(--bubble-y); transform: translate(-50%, -50%) rotate(-1.5deg); }
.badge-button:hover .badge-caption, .badge-button:focus-visible .badge-caption { display: block; }
.badge-button:hover .badge, .badge-button:focus-visible .badge, .badge-button.is-hovered .badge { transform-origin: top center; animation: badge-swing 1.1s ease-in-out infinite; }

@keyframes badge-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }

@media (max-width: 680px) {
  .badge-board { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); align-items: center; min-height: 440px; }
  .badge--cape-town { width: 108px; }
  .badge--pickleball { width: 106px; }
  .badge--book { width: 75px; }
  .badge--cards { width: 104px; }
  .badge--chess { width: 72px; }
  .badge--crown { width: 82px; }
  .badge--vim { width: 84px; }
  .badge-caption { font-size: 10px; }
  .badge-button { position: relative; top: 0; left: 0; justify-self: center; }
  .board-pin { cursor: default; }
}