/* ==========================================================================
   Animated lane (pin deck & pinsetter cycle), shared by / and /bowling.
   Drawn on a 640x560 grid where 1 unit (--u) = 1/640 of the wrapper's width,
   so it scales with pure CSS.
   ========================================================================== */
.lane {
    width: 100%; aspect-ratio: 640 / 560; position: relative; overflow: hidden;
    container-type: inline-size;
    border-radius: 20px; border: 1px solid var(--line); background: #07080A;
}
.lane__stage { --u: calc(100cqw / 640); position: absolute; inset: 0; }
.lane__defs { position: absolute; }
.lane__scene { position: absolute; inset: 0; width: 100%; height: 100%; }

.lane__pin {
    position: absolute; transform-origin: 50% 100%;
    filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .55));
    animation: lane-pin 6s cubic-bezier(.25, .6, .35, 1) infinite;
}
.lane__pin svg { display: block; width: 100%; height: 100%; }
.lane__pin.f1  { --x: calc(-60 * var(--u));  --y: calc(-120 * var(--u)); --r: -70deg;  animation-delay: 0s; }
.lane__pin.f3  { --x: calc(90 * var(--u));   --y: calc(-90 * var(--u));  --r: 80deg;   animation-delay: .04s; }
.lane__pin.f2  { --x: calc(-110 * var(--u)); --y: calc(-70 * var(--u));  --r: -100deg; animation-delay: .08s; }
.lane__pin.f5  { --x: calc(20 * var(--u));   --y: calc(-140 * var(--u)); --r: 30deg;   animation-delay: .1s; }
.lane__pin.f6  { --x: calc(130 * var(--u));  --y: calc(-40 * var(--u));  --r: 110deg;  animation-delay: .1s; }
.lane__pin.f4  { --x: calc(-120 * var(--u)); --y: calc(-50 * var(--u));  --r: -120deg; animation-delay: .14s; }
.lane__pin.f9  { --x: calc(70 * var(--u));   --y: calc(-110 * var(--u)); --r: 60deg;   animation-delay: .15s; }
.lane__pin.f10 { --x: calc(110 * var(--u));  --y: calc(-20 * var(--u));  --r: 95deg;   animation-delay: .17s; }
.lane__pin.f8  { --x: calc(-60 * var(--u));  --y: calc(-120 * var(--u)); --r: -50deg;  animation-delay: .18s; }
.lane__pin.f7  { --x: calc(-100 * var(--u)); --y: calc(-10 * var(--u));  --r: -95deg;  animation-delay: .2s; }
@keyframes lane-pin {
    0%, 30% { transform: none; opacity: 1; }
    35% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 1; }
    39% { transform: translate(calc(var(--x) * 1.35), calc(var(--y) * 1.35)) rotate(calc(var(--r) * 1.4)); opacity: 0; }
    40%, 60% { transform: translateY(calc(-240 * var(--u))); opacity: 0; }
    61% { transform: translateY(calc(-240 * var(--u))); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    69% { transform: translateY(0); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

.lane__ball {
    position: absolute; left: calc(298 * var(--u)); top: calc(260 * var(--u)); width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: 50%; overflow: hidden;
    box-shadow: 0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .6);
    animation: lane-approach 6s infinite;
}
@keyframes lane-approach {
    0% { transform: translate(calc(30 * var(--u)), calc(330 * var(--u))) scale(2.2); opacity: 1; animation-timing-function: cubic-bezier(.3, .3, .6, 1); }
    30% { transform: translate(0, 0) scale(1); opacity: 1; }
    36%, 100% { transform: translate(calc(-4 * var(--u)), calc(-34 * var(--u))) scale(.82); opacity: 0; }
}
.lane__core {
    position: absolute; inset: -20%;
    animation: lane-spin .9s linear infinite;
    background:
        radial-gradient(ellipse 40% 20% at 34% 62%, rgba(76, 201, 240, .9), transparent 70%),
        radial-gradient(ellipse 28% 44% at 68% 36%, rgba(6, 34, 51, .95), transparent 70%),
        radial-gradient(ellipse 24% 16% at 60% 74%, rgba(197, 241, 253, .55), transparent 70%),
        conic-gradient(from 20deg at 50% 50%, #062233, #1F8FB5, #031019, #4CC9F0 30%, #0A4F66, #02090F 55%, #2BA6D0, #062233 80%, #0A4F66);
}
@keyframes lane-spin { to { transform: rotate(-360deg); } }
.lane__hole {
    position: absolute; width: 9%; height: 9%; border-radius: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 62%, #000 0 52%, #1A1A1A 72%, #3C3C3C 100%);
    box-shadow: inset 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .95);
}
.lane__gloss {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .3) 7%, transparent 20%),
        radial-gradient(circle at 42% 40%, transparent 38%, rgba(0, 0, 0, .7) 100%);
}

.lane__sweep {
    position: absolute; left: calc(40 * var(--u)); top: calc(350 * var(--u)); width: calc(560 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(4 * var(--u));
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 calc(10 * var(--u)), transparent calc(10 * var(--u)) calc(20 * var(--u))), linear-gradient(180deg, #262A31, #15181D);
    border-top: calc(1 * var(--u)) solid rgba(255, 255, 255, .2); border-bottom: calc(2 * var(--u)) solid #4CC9F0;
    box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .6);
    transform: translateY(calc(-260 * var(--u)));
    animation: lane-sweep 6s cubic-bezier(.45, 0, .4, 1) infinite;
}
@keyframes lane-sweep {
    0%, 38% { transform: translateY(calc(-260 * var(--u))) scale(1); }
    44% { transform: translateY(0) scale(1); }
    50% { transform: translateY(calc(-58 * var(--u))) scale(.8); }
    56%, 74% { transform: translateY(0) scale(1); }
    81%, 100% { transform: translateY(calc(-260 * var(--u))) scale(1); }
}

.lane__table {
    position: absolute; left: calc(130 * var(--u)); top: calc(146 * var(--u)); width: calc(380 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(6 * var(--u));
    background: radial-gradient(circle, #050506 0 calc(5 * var(--u)), transparent calc(6 * var(--u))) 0 0 / calc(38 * var(--u)) calc(46 * var(--u)) repeat-x, linear-gradient(180deg, #1E2126, #101215);
    border-bottom: calc(2 * var(--u)) solid rgba(76, 201, 240, .6);
    box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, .6);
    transform: translateY(calc(-240 * var(--u)));
    animation: lane-table 6s infinite;
}
@keyframes lane-table {
    0%, 60% { transform: translateY(calc(-240 * var(--u))); }
    61% { transform: translateY(calc(-240 * var(--u))); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    69% { transform: translateY(0); }
    73% { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    80%, 100% { transform: translateY(calc(-240 * var(--u))); }
}

.lane__header {
    position: absolute; left: 0; top: 0; width: calc(640 * var(--u)); height: calc(150 * var(--u));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #0B0C0F, #14171C);
    border-bottom: calc(2 * var(--u)) solid #4CC9F0; box-shadow: 0 calc(4 * var(--u)) calc(28 * var(--u)) rgba(76, 201, 240, .28);
}
/* Strike mark: pops in and draws its two strokes the moment the ball hits the pins (30% of the loop). */
.lane__x {
    width: calc(76 * var(--u)); height: calc(76 * var(--u)); overflow: visible;
    fill: none; stroke: #4CC9F0; stroke-width: 5; stroke-linecap: round;
    filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(76, 201, 240, .8));
    opacity: 0; animation: lane-x 6s infinite;
}
.lane__x path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lane-x-draw 6s infinite; }
.lane__x path + path { animation-name: lane-x-draw2; }
@keyframes lane-x {
    0%, 29.9% { opacity: 0; transform: scale(.4); }
    30% { opacity: 1; transform: scale(.4); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
    35% { opacity: 1; transform: scale(1); }
    54% { opacity: 1; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1.15); }
}
@keyframes lane-x-draw  { 0%, 30% { stroke-dashoffset: 1; } 32.5%, 100% { stroke-dashoffset: 0; } }
@keyframes lane-x-draw2 { 0%, 31.5% { stroke-dashoffset: 1; } 34%, 100% { stroke-dashoffset: 0; } }