/**
 * TipArena — live zápas (futbal)
 */

/* ── Live zápas: mini ihrisko ── */
.live-pitch-scene {
    position: relative;
    width: 100%;
    height: 52px;
    margin: 8px 0 4px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(6, 40, 20, 0.5) 0%, rgba(4, 28, 14, 0.85) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    box-shadow: inset 0 0 24px rgba(34, 197, 94, 0.08);
}

.live-pitch-field {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 14px, transparent 14px 28px),
        linear-gradient(180deg, #1a6b38 0%, #145a2e 55%, #0f4523 100%);
}

.live-pitch-line {
    position: absolute;
    left: 18%;
    right: 18%;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.live-pitch-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.live-player {
    position: absolute;
    bottom: 6px;
    width: 22px;
    height: 28px;
    transform-origin: bottom center;
    z-index: 3;
}

/* Hráči blízko pri sebe — stoja ~26 % a ~74 % */
.live-player-a {
    left: 26%;
    margin-left: -11px;
    animation: liveKickA 1.5s ease-in-out infinite;
}

.live-player-b {
    left: 74%;
    margin-left: -11px;
    animation: liveKickB 1.5s ease-in-out infinite;
}

.live-player-head {
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: inset -1px -2px 0 rgba(0,0,0,0.25);
}

.live-player-head-b { background: #60a5fa; }

.live-player-torso {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 3px 3px 2px 2px;
    background: #ef4444;
}

.live-player-torso-b { background: #3b82f6; }

.live-player-leg {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 10px;
    border-radius: 2px;
    background: #1e293b;
    transform-origin: top center;
}

.live-player-a .live-player-leg-l { left: 4px; animation: liveLegKickL 1.5s ease-in-out infinite; }
.live-player-a .live-player-leg-r { right: 4px; animation: liveLegKickR 1.5s ease-in-out infinite; }
.live-player-b .live-player-leg-l { left: 4px; animation: liveLegKickR 1.5s ease-in-out infinite; }
.live-player-b .live-player-leg-r { right: 4px; animation: liveLegKickL 1.5s ease-in-out infinite; }

.live-ball {
    position: absolute;
    bottom: 10px;
    left: 28%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 19%),
        radial-gradient(circle at 65% 55%, #fff 0 12%, transparent 13%),
        #f8fafc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
    animation: liveBallBounce 1.5s ease-in-out infinite;
    z-index: 2;
}

.match-card.match-live .live-pitch-scene {
    animation: livePitchGlow 1.5s ease-in-out infinite;
}

/* Kop A pri 0 %, lopta letí doprava, kop B pri 50 %, späť */
@keyframes liveKickA {
    0%, 4% { transform: translateX(0) scaleX(1); }
    8%, 12% { transform: translateX(5px) scaleX(1); }
    20%, 100% { transform: translateX(0) scaleX(1); }
}

@keyframes liveKickB {
    0%, 48% { transform: translateX(0) scaleX(-1); }
    52%, 56% { transform: translateX(-5px) scaleX(-1); }
    64%, 100% { transform: translateX(0) scaleX(-1); }
}

@keyframes liveLegKickL {
    0%, 4%, 48%, 100% { transform: rotate(0deg); }
    8%, 12% { transform: rotate(-42deg); }
    52%, 56% { transform: rotate(38deg); }
}

@keyframes liveLegKickR {
    0%, 4%, 48%, 100% { transform: rotate(0deg); }
    8%, 12% { transform: rotate(38deg); }
    52%, 56% { transform: rotate(-42deg); }
}

/* Lopta: A (28 %) → stred (50 %) → B (72 %) → stred → A */
@keyframes liveBallBounce {
    0%, 100% {
        left: 28%;
        transform: translateY(0) scale(1);
    }
    10% {
        left: 34%;
        transform: translateY(-4px) scale(0.95);
    }
    25% {
        left: 50%;
        transform: translateY(-11px) scale(1);
    }
    40% {
        left: 66%;
        transform: translateY(-4px) scale(0.95);
    }
    50% {
        left: 72%;
        transform: translateY(0) scale(1);
    }
    60% {
        left: 66%;
        transform: translateY(-4px) scale(0.95);
    }
    75% {
        left: 50%;
        transform: translateY(-11px) scale(1);
    }
    90% {
        left: 34%;
        transform: translateY(-4px) scale(0.95);
    }
}

@keyframes livePitchGlow {
    0%, 100% { box-shadow: inset 0 0 24px rgba(34, 197, 94, 0.08), 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: inset 0 0 28px rgba(34, 197, 94, 0.14), 0 0 12px rgba(239, 68, 68, 0.12); }
}

.duel-open-card.duel-active-battle {
    border-color: rgba(255, 0, 85, 0.35);
    box-shadow: 0 0 24px rgba(255, 0, 85, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .live-pitch-scene,
    .live-pitch-scene * {
        animation: none !important;
    }
    .live-ball { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 640px) {
    .live-pitch-scene { height: 44px; }
}