/* EL ARCO (Puro CSS, sin depender de PNGs, 80% del ancho) */
#goal-box {
    position: absolute; 
    bottom: 45%; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 80vw; 
    max-width: 600px; 
    aspect-ratio: 3 / 1; 
    border: 5px solid #f8fafc; /* Postes blancos reales */
    border-bottom: none; 
    z-index: 4; 
    background-color: rgba(255, 255, 255, 0.03);
    /* Efecto de red realista, más separada y tenue */
    background-image: 
        linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: 0 0 10px rgba(255,255,255,0.2), inset 0 0 25px rgba(0,0,0,0.7);
    pointer-events: none;
}