/* Playground-Container */
.tennis-playground{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  margin: 1rem auto;
  user-select: none !important;
  touch-action: none !important; /* wir managen Pointer */
  display: block;
  box-sizing: border-box;
  padding: 0;
  border: 0;
}

/* Ball */
.tennis-ball{
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  background: transparent;
  border: none;
  padding: 0 !important;
  cursor: grab;
  will-change: transform;
  outline: none;
  border-radius: 999px !important;
  transform-origin: center center !important;
  box-sizing: border-box;
}

.tennis-ball:active { cursor: grabbing; }

.tennis-ball svg{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Nur mobil sichtbar; JS prüft zusätzlich via matchMedia */
@media (min-width: 769px){
  .tennis-playground { display:none; }
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  .tennis-ball{ transition: none; }
}

/* Stacking über Overlay & keine geerbten Transitions */
.elementskit-menu-container .tennis-playground{
  position: relative;
  z-index: 100;           /* über dem Offcanvas-Overlay liegen */
  contain: layout paint;  /* isoliert Layout/Paint, stabilisiert Animation */
}

.elementskit-menu-container .tennis-ball,
.elementskit-menu-container .tennis-ball *{
  transition: none !important;  /* neutralisiert Theme-Transitions */
  backface-visibility: hidden;  /* glättet Rotation */
}

/* Falls dein Overlay drüber liegt: notfalls erhöhen */
@media (max-width: 1024px){
  .elementskit-menu-container .tennis-playground{ z-index: 9999; }
}




/* Hint-Icon direkt unter Ball */
.tb-hint{
  position: absolute;
  top: 100%;             /* direkt unterhalb des Balls */
  left: 50%;
  transform: translateX(-50%) translateY(0px);
  opacity: .9;
  z-index: 2;
  pointer-events: none;
  animation: tb-pulse 1.4s ease-in-out infinite;
}
.tb-hint svg{
  width: 36px;
  height: 36px;
  stroke: #fff;      /* weiß einfärben */
  fill: none;
  display: block;
}
.tb-hint.is-hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  animation: none;
  transition: opacity .25s ease, transform .25s ease;
}

@keyframes tb-pulse{
  0%,100%{ transform: translateX(-50%) translateY(22px) }
  50%    { transform: translateX(-50%) translateY(20px) }
}

/* Nur mobil sichtbar */
@media (min-width: 769px){
  .tennis-playground { display:none; }
}