body{

margin:0;

font-family:Arial,Helvetica,sans-serif;

background:
linear-gradient(
135deg,
#1565c0,
#7b1fa2
);

color:white;

text-align:center;

}



.titulo {

    font-size: 70px;
    font-weight: bold;
    color: white;
    text-align: center;

    margin-top: 30px;

    animation: saltoTitulo 1.8s infinite ease-in-out;

    text-shadow:
    0 5px 15px rgba(0,0,0,0.35);

}



.bola{

width:350px;

height:350px;

margin:30px auto;

border-radius:50%;

background:white;

color:#e91e63;

display:flex;

align-items:center;

justify-content:center;

font-size:120px;

font-weight:bold;

box-shadow:
0 10px 30px #0008;

}



.historial{

margin:20px;

}



.numero{

display:inline-flex;

width:70px;

height:70px;

margin:5px;

background:#ffca28;

color:#222;

border-radius:50%;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:bold;

}



.panel{

background:white;

color:#222;

width:90%;

max-width:1100px;

margin:30px auto;

padding:30px;

border-radius:30px;

}



.tablero{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:10px;

}



.celda{

background:#eeeeee;

padding:15px;

border-radius:10px;

font-size:20px;

font-weight:bold;

}




.salido{

background:#4caf50 !important;

color:white !important;

font-weight:bold;

}



button{

padding:15px 30px;

border:none;

border-radius:15px;

background:#ff9800;

color:white;

font-size:20px;

}

@keyframes saltoTitulo {


0% {

    transform: translateY(0px);

}


25% {

    transform: translateY(-12px);

}


50% {

    transform: translateY(0px);

}


75% {

    transform: translateY(-6px);

}


100% {

    transform: translateY(0px);

}


}