/* tappables (round 4) */
/* Tappable map letters: they say their sound and do a trick. Letters are NEVER mirrored (a flipped b reads as d). */
.map-letter.tappable { pointer-events: auto; cursor: pointer; z-index: 3; }
.map-letter.tappable img, .map-letter.tappable svg { transform-origin: 50% 100%; }
.trick-zoom img, .trick-zoom svg { animation: tkZoom .9s cubic-bezier(.34,1.56,.64,1); }
.trick-spin img, .trick-spin svg { animation: tkSpin 1s ease-in-out; transform-origin: 50% 60%; }
.trick-run { animation: tkRun 1.4s ease-in-out; }
.trick-jump img, .trick-jump svg { animation: tkJump .9s cubic-bezier(.3,1.4,.5,1); }
.trick-wobble img, .trick-wobble svg { animation: tkWobble .9s ease-in-out; }
@keyframes tkZoom { 0% { transform: scale(1); } 35% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes tkSpin { to { transform: rotate(360deg); } }
@keyframes tkRun { 0% { transform: none; } 20% { transform: translateX(80px) translateY(-14px) rotate(6deg); } 40% { transform: translateX(160px); } 50% { transform: translateX(160px) translateY(-30px) rotate(-10deg); } 70% { transform: translateX(80px) translateY(-14px) rotate(-6deg); } 90% { transform: translateX(0); } 100% { transform: none; } }
@keyframes tkJump { 0% { transform: none; } 20% { transform: scale(1.1, .85); } 55% { transform: translateY(-90px) rotate(-8deg); } 85% { transform: scale(1.06, .94); } 100% { transform: none; } }
@keyframes tkWobble { 0%, 100% { transform: none; } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.sound-btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(34,23,80,.72); color: #FFFFFF; font-size: 32px; display: grid; place-items: center; }
.sound-btn.off { background: rgba(34,23,80,.4); }
.rail-icon img { object-fit: contain !important; object-position: 50% 100% !important; width: 104px; height: 104px; margin-top: 18px; }
/* round 5: more letter tricks (never mirrored) */
.trick-twirl img, .trick-twirl svg { animation: tkTwirl 1.2s cubic-bezier(.3,1.2,.5,1); transform-origin: 50% 60%; }
.trick-peek img, .trick-peek svg { animation: tkPeek 1.3s ease-in-out; }
.trick-boing img, .trick-boing svg { animation: tkBoing 1.2s cubic-bezier(.3,1.5,.5,1); }
.trick-giggle img, .trick-giggle svg { animation: tkGiggle 1s ease-in-out; }
@keyframes tkTwirl { 0% { transform: none; } 50% { transform: translateY(-60px) rotate(540deg) scale(1.3); } 100% { transform: rotate(720deg); } }
@keyframes tkPeek { 0% { transform: none; } 30% { transform: translateY(70%) scaleY(.4); opacity: .3; } 55% { transform: translateY(70%) scaleY(.4); opacity: .3; } 75% { transform: translateY(-30px) scaleY(1.15); opacity: 1; } 100% { transform: none; } }
@keyframes tkBoing { 0% { transform: none; } 15% { transform: scale(1.25, .7); } 35% { transform: translateY(-120px) scale(.85, 1.2); } 55% { transform: scale(1.2, .8); } 70% { transform: translateY(-50px); } 85% { transform: scale(1.08, .94); } 100% { transform: none; } }
@keyframes tkGiggle { 0%, 100% { transform: none; } 10%, 30%, 50%, 70% { transform: translateX(-8px) rotate(-5deg); } 20%, 40%, 60%, 80% { transform: translateX(8px) rotate(5deg); } }