/* Dokunma sürprizleri: havlama balonu, kemik, yaprak patlaması, top tekmesi, harf dalgası */
/* ---------- Easter egg'ler ---------- */
.tappable { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sun, .roamers svg, .hero-dog { pointer-events: auto; }
.roamers svg { cursor: pointer; }
h1 span { display: inline-block; }
@keyframes letterwave { 0%,100% { transform: none } 45% { transform: translateY(-16px) rotate(-7deg) } }
h1 span.wave { animation: letterwave .5s ease-in-out; }
.sun.excited svg { animation-duration: 2.5s; }
.sun.excited .core { animation: glow .6s ease-in-out infinite; }
.roamers svg.yip > g { animation: hop .5s ease-in-out 2 !important; }
.bark.free { position: absolute; top: auto; right: auto; z-index: 9; }
.tappable:focus-visible { outline: 2px dashed #8a4a24; outline-offset: 6px; border-radius: 12px; }

@keyframes happy {
  0%   { transform: none }
  30%  { transform: translateY(-18px) rotate(-5deg) }
  55%  { transform: translateY(0) rotate(4deg) }
  78%  { transform: translateY(-7px) rotate(-2deg) }
  100% { transform: none }
}
.hero-dog.happy > svg:first-of-type { animation: happy .85s cubic-bezier(.3,1.2,.5,1); }

@keyframes barkpop {
  0%   { opacity: 0; transform: scale(.6) translateY(6px) }
  25%  { opacity: 1; transform: scale(1) translateY(0) }
  70%  { opacity: 1 }
  100% { opacity: 0; transform: translateY(-16px) }
}
.bark {
  position: absolute; top: 4%; right: -6%; z-index: 3;
  background: #fff; color: #8a4a24; font-size: 14px; font-weight: 700;
  padding: 6px 13px; border-radius: 14px 14px 14px 4px;
  box-shadow: 0 4px 14px rgba(60,40,25,.14);
  animation: barkpop .9s ease forwards; pointer-events: none; white-space: nowrap;
}

@keyframes bonepop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-25deg) }
  22%  { opacity: 1; transform: translate(-50%,-60%) scale(1.06) rotate(4deg) }
  34%  { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-3deg) }
  46%  { opacity: 1; transform: translate(-50%,-53%) scale(1) rotate(3deg) }
  58%, 78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg) }
  100% { opacity: 0; transform: translate(-50%,-38%) scale(.9) rotate(10deg) }
}
.bone {
  position: absolute; left: 50%; top: 64%; z-index: 2;
  width: 26%; height: auto; aspect-ratio: 64 / 28; overflow: visible;
  transform: translate(-50%,-50%); transform-origin: 50% 50%;
  filter: drop-shadow(0 3px 5px rgba(60,40,25,.25));
  pointer-events: none;
  animation: bonepop 2.4s ease forwards;
}

@keyframes burst {
  0%   { opacity: .9; transform: translate(0,0) rotate(0deg) }
  100% { opacity: 0; transform: translate(var(--x,20px), 190px) rotate(var(--r,320deg)) }
}
.spark { position: absolute; width: 15px; height: 15px; pointer-events: none; animation: burst 1.9s ease-in forwards; }

.ball.kick svg { animation: bounce .24s ease-in infinite alternate, spin .3s linear infinite; }