/* Эффекты для игры в рогатку */

#slingshot-container, #slingshot-container * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.destructible {
    transition: opacity 0.5s ease, filter 0.3s ease, transform 0.1s ease;
    position: relative;
    user-select: none;
}

/* Эффект трещин: более хаотичный и заметный */
.hit-1::after, .hit-2::after, .hit-3::after, .hit-4::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background-size: 150% 150%;
    background-position: center;
    mix-blend-mode: overlay;
}

.hit-1::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50 L70 30 M50 50 L30 70 M50 50 L60 80' stroke='white' stroke-width='2' opacity='0.4'/%3E%3C/svg%3E");
}
.hit-2::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50 L70 30 M50 50 L30 70 M50 50 L60 80 M50 50 L20 20 M50 50 L80 80' stroke='white' stroke-width='3' opacity='0.6'/%3E%3C/svg%3E");
}
.hit-3::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L100 100 M100 0 L0 100 M50 0 L50 100 M0 50 L100 50' stroke='white' stroke-width='2' opacity='0.8'/%3E%3C/svg%3E");
}
.hit-4::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L100 100 M100 0 L0 100 M50 0 L50 100 M0 50 L100 50 M20 0 L80 100 M80 0 L20 100' stroke='white' stroke-width='4'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 2px white);
}

.broken {
    opacity: 0.25 !important;
    filter: grayscale(0.8) contrast(1.2);
    /* Теперь кликабельно, но визуально разрушено */
}

#slingshot-container {
    width: 100%;
    height: 180px; /* Немного уменьшил высоту для лучшего скролла */
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
    /* touch-action: none; - УДАЛЕНО, чтобы разрешить скролл страницы */
    overflow: visible !important;
}

#slingshot-svg {
    overflow: visible; /* Важно для длинной резины */
}

.projectile {
    filter: drop-shadow(0 0 8px #00d4ff);
    cursor: grab;
    transition: filter 0.3s ease;
}

.projectile:hover {
    filter: drop-shadow(0 0 15px #00d4ff);
}

.projectile:active {
    cursor: grabbing;
}

/* Анимация намека на стрельбу */
@keyframes sling-idle {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(0, 8px) scale(1.1); filter: drop-shadow(0 0 15px #00d4ff); }
}

.sling-idle {
    animation: sling-idle 2s ease-in-out infinite;
}