/* The crew's table on the Crew works tab (coin-pile.js): every crew member's coin, in loose piles by business with only room between them. A
   coin at work floats and turns (coins.js turns it); its shadow on the table breathes with it. One whose work asks Chris glows gold. */
.cp-table { position: relative; margin: 8px 0 16px; --cp-d: 62px; }
.cp-coin {
  position: absolute; width: var(--cp-d); height: var(--cp-d); min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease;
}
.cp-coin:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cp-lift, .cp-face { position: absolute; inset: 0; display: block; border-radius: 50%; }
.cp-face > svg { display: block; width: 100%; height: 100%; }
.cp-shadow {
  position: absolute; left: 14%; right: 14%; bottom: -9%; height: 16%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}
.cp-coin.working .cp-shadow { opacity: 0.8; }
/* One that asks him: a soft gold glow behind his coin. */
.cp-coin.asks .cp-lift::before {
  content: ''; position: absolute; inset: -9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229, 175, 79, 0.6), rgba(229, 175, 79, 0));
}
@media (prefers-reduced-motion: no-preference) {
  /* in the clock's beat (coin-pile.js --cp-phase, --cp-glow), so a table drawn again goes on where the last one was */
  .cp-coin.working .cp-lift { animation: cp-float 3.2s ease-in-out var(--cp-phase, 0s) infinite; }
  .cp-coin.working .cp-shadow { animation: cp-shade 3.2s ease-in-out var(--cp-phase, 0s) infinite; }
  .cp-coin.asks .cp-lift::before { animation: cp-glow 2.4s ease-in-out var(--cp-glow, 0s) infinite; }
  .cp-coin:hover { transform: translateY(-2px); }
}
@keyframes cp-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-11px); } }
@keyframes cp-shade { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(0.68); opacity: 0.42; } }
@keyframes cp-glow { 50% { opacity: 0.45; } }