/* Things that move: the bubbles that pop up after a move, the card following your finger while
   you drag it (see drag/), card flights (see animation/card-flight.js), and a card that shakes. */

/* "Skipped!", "+2", "Reverse!": pops up over a player or the piles, floats up, and fades */
.bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  padding: 8px 18px;
  border-radius: 999px;
  background: white;
  color: var(--alert);
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: bubble 1.6s ease-out forwards;
}
.bubble[data-color] { top: 78%; background: var(--glow); color: white; }
.bubble.evolved { top: 22%; background: var(--evolve); color: white; }
.bubble.interrupted { background: var(--evolve); color: white; }
.bubble.reshuffled { top: calc(100% + 24px); } /* under the cards flying back into the deck, which arc up */
.bubble[data-color="yellow"] { color: var(--ink-on-yellow); }
.bubble.uno { background: var(--yellow); color: var(--ink-on-yellow); }
/* Interrupting with your second-to-last card: "Uno!" pops up just under "Interruption!" */
.bubble.interrupted ~ .bubble.uno { top: calc(50% + 48px); }
@keyframes bubble {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1); }
  75% { transform: translate(-50%, -75%); opacity: 1; }
  100% { transform: translate(-50%, -95%); opacity: 0; }
}

/* The card following your finger */
.drag-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
  transition: none;
}
body.dragging-card, body.dragging-card * { cursor: grabbing; }
/* While a card is being dragged, the cards it passes over don't lift */
body.dragging-card .hand .card:hover, body.dragging-card .deck:hover { transform: none; }
body.dragging-card .hand.show-hints .card.playable:hover { transform: translateY(-14px); }

/* A card flying from a hand to the pile, or from the deck to a hand: layers that each move in
   their own way (see card-flight.js). The card it's flying to stays hidden until it lands. */
.flight {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  aspect-ratio: var(--card-image-width) / var(--card-image-height);
  pointer-events: none;
}
.flight-body, .flight-flip, .flight-spin, .flight-shadow, .flight-shadow-flip, .flight-shadow-spin, .flight-shadow-shape {
  position: absolute;
  inset: 0;
}
.flight-body, .flight-flip, .flight-spin { transform-style: preserve-3d; }
/* The back and front of the card, back to back: you only see the side facing you. The shadow
   layer does the casting, so the card's own shadow is off. */
.flight .card {
  position: absolute;
  inset: 0;
  width: 100%;
  backface-visibility: hidden;
  box-shadow: none;
  transition: none;
}
/* The shadow on the table, drawn flat (no depth), so it keeps the card's outline as it turns */
.flight-shadow { opacity: 0; }
.flight-shadow-shape { border-radius: 7px; background: black; box-shadow: 0 0 10px 3px black; }
.card.arriving { visibility: hidden; }

.card.shake { animation: shake 0.3s; }
@keyframes shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@media (max-width: 640px) {
  .bubble { font-size: 1.2rem; padding: 6px 14px; }
}