.track{
    position:relative;
    background:#2f2f2f;            /* асфальт */
    /*border-radius:20px;*/
    overflow:hidden;
}

/* разметка дороги */
.track::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:6px;
    transform:translateY(-50%);

    background:repeating-linear-gradient(
            to right,
            white 0px,
            white 40px,
            transparent 40px,
            transparent 70px
    );
}

.track {
    width: 100%;
    height: 10dvh;
    border-top: 4px solid #555;
    border-bottom: 4px solid #555;
    position: relative;
    margin: 0 0 20px 0;
}

.lane {
    position: relative;
    height: 100%;
}

.car {
    position: absolute;
    left: 0;
    top: 60%;
    font-size: 4rem;
    transition: left 0.5s ease;
    transform: translateY(-50%) scaleX(-1);
    z-index: 150;
}

.finish-line{
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    z-index: 100;
    background:
            repeating-conic-gradient(
                    #fff 0% 25%,
                    #000 0% 50%
            ) 50% / 20px 20px;
}

#victory-screen{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;

    opacity:0;
    pointer-events:none;
    transition:opacity 0.35s ease;
}

#victory-screen.show{
    opacity:1;
    pointer-events:auto;
}

.victory-card{
    background:linear-gradient(180deg,#fff9c4,#ffe082);
    border-radius:28px;

    padding:40px 60px;
    text-align:center;

    box-shadow:
            0 20px 60px rgba(0,0,0,0.35),
            inset 0 0 0 4px #ffd54f;

    animation:winPop 0.45s ease;
}

.victory-emoji{
    font-size:clamp(60px,8vw,100px);
    margin-bottom:10px;
}

.victory-title{
    font-size:clamp(36px,6vw,64px);
    font-weight:800;
    color:#e65100;
    letter-spacing:2px;
}

.victory-text{
    font-size:clamp(20px,3vw,32px);
    margin-top:10px;
    color:#5d4037;
}

.victory-btn{
    margin-top:25px;

    font-size:clamp(18px,2.5vw,26px);
    padding:14px 30px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#ff7043,#ff5722);
    color:white;
    cursor:pointer;

    box-shadow:0 6px 14px rgba(0,0,0,0.25);

    transition:transform .15s, box-shadow .15s;
}

.victory-btn:hover{
    transform:scale(1.07);
    box-shadow:0 10px 22px rgba(0,0,0,0.35);
}

@keyframes winPop{
    0%{transform:scale(.7); opacity:0;}
    70%{transform:scale(1.05);}
    100%{transform:scale(1); opacity:1;}
}

#confetti{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2000;
}

.error-effect{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    font-size:120px;
    animation:errorPop 0.8s ease;
}

@keyframes errorPop{
    0%{
        transform:translate(-50%,-50%) scale(0.5);
        opacity:0;
    }
    40%{
        transform:translate(-50%,-50%) scale(1.3);
    }
    100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0;
    }
}

.shake{
    animation:shake 0.3s;
}

@keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-2px)}
    50%{transform:translateX(2px)}
    75%{transform:translateX(-2px)}
    100%{transform:translateX(0)}
}

.error-flash{
    position:fixed;
    inset:0;
    background:red;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s;
    z-index:999;
}

.error-flash.show{
    opacity:0.25;
}