/**
 * Solitaire Game Styles
 *
 * Game-specific CSS for Klondike solitaire layout and card interactions.
 * Requires main.css for design tokens and base styles.
 *
 * CONTENTS:
 * 1. Game Layout (top area, tableau)
 * 2. Card Piles (foundations, stock, waste)
 * 3. Tableau Columns & Stacking
 * 4. Card Interactions (selection, hover, drag)
 * 5. Card Animations & Transitions
 * 6. Win Celebration
 */

/* ============================================================================
   1. GAME LAYOUT
   ============================================================================ */

.game-page {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* Top Area: Foundations + Stock/Waste */
.game-top-area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-xs) var(--space-2xs);
}

/* Tableau Area (7 columns) */
.tableau {
  display: flex;
  justify-content: center;
  gap: var(--card-gap);
  flex: 1;
}

/* Divider between top area and tableau */
.game-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
}

/* ============================================================================
   2. CARD PILES
   ============================================================================ */

/* Generic pile container */
.pile {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-radius);
  position: relative;
  transition: all var(--transition-base);
}

/* Empty pile placeholder */
.pile-empty {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pile-empty .pile-suit {
  font-size: 20px;
  opacity: 0.3;
}

.pile-empty.pile-hearts .pile-suit,
.pile-empty.pile-diamonds .pile-suit {
  color: var(--color-card-red);
}

.pile-empty.pile-spades .pile-suit,
.pile-empty.pile-clubs .pile-suit {
  color: var(--color-text-primary);
}

/* Foundations (4 piles) */
.foundations {
  display: flex;
  gap: var(--card-gap);
}

.foundation-pile {
  position: relative;
}

.foundation-pile .pile-suit {
  font-size: 20px;
  opacity: 0.3;
}

.foundation-pile[data-foundation="h"] .pile-suit,
.foundation-pile[data-foundation="d"] .pile-suit {
  color: var(--color-card-red);
}

.foundation-pile[data-foundation="c"] .pile-suit,
.foundation-pile[data-foundation="s"] .pile-suit {
  color: var(--color-text-primary);
}

.foundation-pile .cards-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Stock pile */
.stock-waste {
  display: flex;
  gap: var(--card-gap);
}

.stock {
  cursor: pointer;
}

.stock:hover {
  transform: translateY(-2px);
}

.stock:active {
  transform: translateY(0) scale(0.98);
}

.stock .cards-card {
  width: 100%;
  height: 100%;
}

.stock-count {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-gold);
  color: var(--color-text-dark);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Stock empty state - recycle indicator */
.stock.pile-empty {
  border-color: rgba(212, 175, 55, 0.3);
}

.stock.pile-empty::after {
  content: '↻';
  font-size: 24px;
  color: var(--color-gold);
  opacity: 0.5;
}

.recycle-indicator {
  font-size: 24px;
  color: var(--color-gold);
  opacity: 0.5;
}

/* Waste pile */
.waste {
  position: relative;
}

.waste-cards {
  display: flex;
  position: relative;
  width: calc(var(--card-width) + 44px);
  height: var(--card-height);
}

.waste-cards .solitaire-card {
  position: absolute;
  transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Position based on data attribute for smooth animations */
.waste-cards .solitaire-card[data-waste-position="0"] { left: 0; z-index: 1; }
.waste-cards .solitaire-card[data-waste-position="1"] { left: 20px; z-index: 2; }
.waste-cards .solitaire-card[data-waste-position="2"] { left: 40px; z-index: 3; }

.waste-cards .solitaire-card.tappable {
  cursor: pointer;
}

.waste-cards .solitaire-card.tappable:hover .cards-card {
  transform: translateY(-4px);
}

/* ============================================================================
   3. TABLEAU COLUMNS & STACKING
   ============================================================================ */

/* Tableau Column - fixed width to prevent jiggle */
.tableau-column {
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  min-height: calc(var(--card-height) + 150px);
  position: relative;
}

/* Empty column placeholder */
.tableau-column.empty {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--card-radius);
  height: var(--card-height);
  background: rgba(0, 0, 0, 0.1);
}

/* Stacked cards in tableau */
.tableau-column .stacked-card {
  position: absolute;
  left: 0;
  width: 100%;
  transition: transform var(--transition-fast);
}

/* Face-down cards have smaller overlap */
.tableau-column .stacked-card.facedown {
  --offset: var(--card-overlap-facedown);
}

/* Face-up cards have larger overlap */
.tableau-column .stacked-card.faceup {
  --offset: var(--card-overlap-faceup);
}

/* Card positioning via CSS custom property */
.tableau-column .stacked-card:nth-child(1) { top: 0; }
.tableau-column .stacked-card:nth-child(2) { top: calc(var(--card-overlap-facedown) * 1); }
.tableau-column .stacked-card:nth-child(3) { top: calc(var(--card-overlap-facedown) * 2); }
.tableau-column .stacked-card:nth-child(4) { top: calc(var(--card-overlap-facedown) * 3); }
.tableau-column .stacked-card:nth-child(5) { top: calc(var(--card-overlap-facedown) * 4); }
.tableau-column .stacked-card:nth-child(6) { top: calc(var(--card-overlap-facedown) * 5); }
.tableau-column .stacked-card:nth-child(7) { top: calc(var(--card-overlap-facedown) * 6); }

/* Tableau stack component */
.tableau-stack {
  position: relative;
  min-height: var(--card-height);
}

.tableau-stack .solitaire-card {
  position: absolute;
  left: 0;
  transition: all var(--transition-fast);
}

/* Dynamic positioning using data attributes */
.tableau-stack .solitaire-card[data-index="0"] { top: 0; z-index: 1; }
.tableau-stack .solitaire-card[data-index="1"] { top: var(--card-overlap-facedown); z-index: 2; }
.tableau-stack .solitaire-card[data-index="2"] { top: calc(var(--card-overlap-facedown) * 2); z-index: 3; }
.tableau-stack .solitaire-card[data-index="3"] { top: calc(var(--card-overlap-facedown) * 3); z-index: 4; }
.tableau-stack .solitaire-card[data-index="4"] { top: calc(var(--card-overlap-facedown) * 4); z-index: 5; }
.tableau-stack .solitaire-card[data-index="5"] { top: calc(var(--card-overlap-facedown) * 5); z-index: 6; }
.tableau-stack .solitaire-card[data-index="6"] { top: calc(var(--card-overlap-facedown) * 6); z-index: 7; }
.tableau-stack .solitaire-card[data-index="7"] { top: calc(var(--card-overlap-facedown) * 7); z-index: 8; }
.tableau-stack .solitaire-card[data-index="8"] { top: calc(var(--card-overlap-facedown) * 8); z-index: 9; }
.tableau-stack .solitaire-card[data-index="9"] { top: calc(var(--card-overlap-facedown) * 9); z-index: 10; }
.tableau-stack .solitaire-card[data-index="10"] { top: calc(var(--card-overlap-facedown) * 10); z-index: 11; }
.tableau-stack .solitaire-card[data-index="11"] { top: calc(var(--card-overlap-facedown) * 11); z-index: 12; }
.tableau-stack .solitaire-card[data-index="12"] { top: calc(var(--card-overlap-facedown) * 12); z-index: 13; }

/* Face-up cards get more spacing */
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="0"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown));
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="1"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup));
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="2"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 2);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="3"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 3);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="4"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 4);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="5"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 5);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="6"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 6);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="7"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 7);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="8"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 8);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="9"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 9);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="10"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 10);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="11"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 11);
}
.tableau-stack .solitaire-card.faceup-card[data-faceup-index="12"] {
  top: calc(var(--facedown-count, 0) * var(--card-overlap-facedown) + var(--card-overlap-faceup) * 12);
}

/* Empty tableau column - use outline instead of border to prevent width jiggle */
.tableau-empty {
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-radius);
  background: rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
  cursor: pointer;
  outline: 2px dashed rgba(255, 255, 255, 0.15);
  outline-offset: -2px;
}

.tableau-empty:hover {
  outline-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.05);
}

/* ============================================================================
   4. CARD INTERACTIONS
   ============================================================================ */

/* Solitaire card sizing */
.solitaire-card {
  width: var(--card-width);
  height: var(--card-height);
}

.solitaire-card .cards-card {
  width: 100% !important;
  height: 100% !important;
  font-size: clamp(14px, 4vw, 18px) !important;
}

/* Card selection and interaction */
.solitaire-card.tappable {
  cursor: grab;
}

/* Undo button */
.btn-undo {
  font-size: 18px;
  opacity: 0.7;
}

.btn-undo:hover {
  opacity: 1;
}

/* Invalid move feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.4s ease-out;
}

/* ============================================================================
   5. CARD ANIMATIONS & TRANSITIONS
   ============================================================================ */

/*
 * Card Jostle System
 * Cards have subtle random rotation and offset for organic, hand-placed feel
 */
.solitaire-card {
  --jostle-rotation: 0deg;
  --jostle-x: 0px;
  --jostle-y: 0px;
  transform:
    translate(var(--jostle-x), var(--jostle-y))
    rotate(var(--jostle-rotation));
  transform-origin: center center;
}

/* Base card transitions - silky smooth */
.solitaire-card,
.solitaire-card .cards-card {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease-out,
    opacity 0.3s ease-out;
  will-change: transform;
}

/* Tableau stack cards need position transitions too */
.tableau-stack .solitaire-card {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* Waste cards slide smoothly */
.waste-cards .solitaire-card {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* Foundation cards pop in */
.foundation-pile .cards-card {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease-out,
    opacity 0.25s ease-out;
}

/*
 * Hover States - Only on devices with true hover (mouse)
 * Prevents sticky hover on touch devices
 */
@media (hover: hover) {
  .solitaire-card.tappable:hover .cards-card {
    transform: translateY(-3px);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.35),
      0 6px 12px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  /* Waste and foundation cards can have full hover effect with z-index */
  .waste-cards .solitaire-card.tappable:hover,
  .foundation-pile .solitaire-card.tappable:hover {
    --jostle-rotation: 0deg;
    transform:
      translate(var(--jostle-x), calc(var(--jostle-y) - 6px))
      rotate(0deg);
    z-index: 50;
  }
}

/* Active/pressed state - quick snap down */
.solitaire-card.tappable:active {
  transform:
    translate(var(--jostle-x), var(--jostle-y))
    rotate(var(--jostle-rotation))
    scale(0.97);
  transition-duration: 0.08s;
}

.solitaire-card.tappable:active .cards-card {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition-duration: 0.08s;
}

/*
 * Card Movement Animation
 * Used when cards fly to new positions
 */
.solitaire-card.animating-move {
  position: fixed !important;
  z-index: 1000 !important;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Faster animation for foundation moves */
.solitaire-card.animating-to-foundation {
  transition-duration: 0.35s;
}

/*
 * Card Flip Animation
 * 3D flip when revealing face-down cards - fast and snappy
 */
.solitaire-card.flipping {
  animation: card-flip 0.25s ease-out;
  transform-style: preserve-3d;
}

@keyframes card-flip {
  0% {
    transform:
      translate(var(--jostle-x), var(--jostle-y))
      rotate(var(--jostle-rotation))
      rotateY(0deg);
  }
  50% {
    transform:
      translate(var(--jostle-x), calc(var(--jostle-y) - 10px))
      rotate(0deg)
      rotateY(90deg)
      scale(1.02);
  }
  100% {
    transform:
      translate(var(--jostle-x), var(--jostle-y))
      rotate(var(--jostle-rotation))
      rotateY(0deg);
  }
}

/*
 * Card Deal Animation
 * Cards slide in from stock pile during initial deal
 */
.solitaire-card.dealing {
  animation: card-deal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes card-deal {
  0% {
    opacity: 0;
    transform:
      translate(200px, -100px)
      rotate(15deg)
      scale(0.8);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform:
      translate(var(--jostle-x), var(--jostle-y))
      rotate(var(--jostle-rotation))
      scale(1);
  }
}

/*
 * Draw from Stock Animation
 */
.solitaire-card.drawing-from-stock {
  animation: draw-from-stock 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes draw-from-stock {
  0% {
    opacity: 0;
    transform: translateX(calc(var(--card-width) + var(--card-gap))) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/*
 * Card to Foundation "Snap" Animation
 */
.solitaire-card.snapping-to-foundation {
  animation: snap-to-foundation 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes snap-to-foundation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/*
 * Shake Animation - Invalid move feedback
 */
@keyframes shake-card {
  0%, 100% {
    transform:
      translate(var(--jostle-x), var(--jostle-y))
      rotate(var(--jostle-rotation));
  }
  15% {
    transform:
      translate(calc(var(--jostle-x) - 8px), var(--jostle-y))
      rotate(calc(var(--jostle-rotation) - 3deg));
  }
  30% {
    transform:
      translate(calc(var(--jostle-x) + 8px), var(--jostle-y))
      rotate(calc(var(--jostle-rotation) + 3deg));
  }
  45% {
    transform:
      translate(calc(var(--jostle-x) - 6px), var(--jostle-y))
      rotate(calc(var(--jostle-rotation) - 2deg));
  }
  60% {
    transform:
      translate(calc(var(--jostle-x) + 6px), var(--jostle-y))
      rotate(calc(var(--jostle-rotation) + 2deg));
  }
  75% {
    transform:
      translate(calc(var(--jostle-x) - 3px), var(--jostle-y))
      rotate(calc(var(--jostle-rotation) - 1deg));
  }
}

.solitaire-card.shake {
  animation: shake-card 0.5s ease-out;
}

/*
 * Stock pile click ripple
 */
.stock::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.stock:active::after {
  opacity: 1;
  transform: scale(1.2);
  transition-duration: 0.1s;
}

/*
 * Valid drop target glow
 */
.tableau-empty.valid-target,
.foundation-pile.valid-target {
  animation: target-pulse 1s ease-in-out infinite;
}

@keyframes target-pulse {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
  }
  50% {
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
}

/*
 * Smooth transitions for game state changes
 */
.game-page {
  transition: opacity 0.3s ease-out;
}

.game-page.loading {
  opacity: 0.7;
  pointer-events: none;
}

/*
 * Dragging state
 */
.solitaire-card.dragging {
  cursor: grabbing !important;
  opacity: 0.95;
  pointer-events: none;
}

.solitaire-card.dragging .cards-card {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    0 10px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Valid drop target during drag */
.valid-target {
  animation: drop-target-pulse 0.5s ease-in-out infinite !important;
}

@keyframes drop-target-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.5), 0 0 15px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px var(--color-gold), 0 0 25px rgba(212, 175, 55, 0.5);
  }
}

.tableau-empty.valid-target,
.foundation-pile.valid-target {
  border-color: var(--color-gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
}

.solitaire-card.valid-target .cards-card {
  box-shadow:
    0 0 0 3px var(--color-gold),
    0 0 20px rgba(212, 175, 55, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================================
   6. WIN CELEBRATION
   ============================================================================ */

/* Win celebration animations */
.win-content {
  animation: win-content-bounce 0.6s ease-out;
}

@keyframes win-content-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.win-icon {
  font-size: 80px;
  animation: win-icon-bounce 1s ease-in-out infinite;
}

@keyframes win-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.win-subtitle {
  animation: win-subtitle-pulse 2s ease-in-out infinite;
}

@keyframes win-subtitle-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/*
 * Win Celebration - Cards fly off screen
 */
.solitaire-card.celebrating {
  animation: card-celebrate var(--celebrate-duration, 1.5s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--celebrate-delay, 0s);
}

@keyframes card-celebrate {
  0% {
    transform:
      translate(var(--jostle-x), var(--jostle-y))
      rotate(var(--jostle-rotation));
    opacity: 1;
  }
  30% {
    transform:
      translate(var(--jostle-x), calc(var(--jostle-y) - 50px))
      rotate(calc(var(--jostle-rotation) + var(--celebrate-spin, 180deg)))
      scale(1.1);
    opacity: 1;
  }
  100% {
    transform:
      translate(
        calc(var(--jostle-x) + var(--celebrate-x, 0px)),
        calc(var(--jostle-y) + var(--celebrate-y, 500px))
      )
      rotate(calc(var(--jostle-rotation) + var(--celebrate-spin, 720deg)))
      scale(0.5);
    opacity: 0;
  }
}

/* End Game Physics Animation */
.endgame-physics {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
}

.endgame-physics.hidden {
  display: none;
}

/* ============================================================================
   HINT HIGHLIGHT
   ============================================================================ */

.hint-highlight {
  animation: hint-pulse 0.5s ease-in-out 4;
  z-index: 50 !important;
}

@keyframes hint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    transform: translate(var(--jostle-x, 0), var(--jostle-y, 0)) rotate(var(--jostle-rotation, 0deg)) scale(1);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.6);
    transform: translate(var(--jostle-x, 0), var(--jostle-y, 0)) rotate(var(--jostle-rotation, 0deg)) scale(1.05);
  }
}