body{
font-family:"Helvetica Neue","Arial",sans-serif;
background:#1a1a1a;
color:white;
margin:0;
text-align:center;
}

.scorebug{
width:95%;
max-width:460px;
margin:20px auto;
background:#222;
border-radius:12px;
overflow:hidden;
}

.top{
display:flex;
}

.teams{
width:50%;
}

.team{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px;
border-bottom:1px solid #444;
}

.teamName{
font-size:28px;
font-weight:bold;
}

.score{
font-size:34px;
font-weight:bold;
}

.arrow{
width:0;
height:0;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
border-left:20px solid yellow;
margin-right:6px;
}

.hidden{
visibility:hidden;
}

.runner{
width:50%;
position:relative;
}

.bases{
position:relative;
height:70px;
}

.base{
width:18px;
height:18px;
border:2px solid white;
position:absolute;
transform:translate(-50%,-50%) rotate(45deg);
}

#base2{
top:20%;
left:50%;
}

#base1{
top:70%;
left:70%;
}

#base3{
top:70%;
left:30%;
}

.bso{
background:black;
display:flex;
justify-content:space-around;
padding:8px;
}

.bsoRow{
display:flex;
align-items:center;
gap:4px;
}

.dot{
width:14px;
height:14px;
border-radius:50%;
background:#555; /* グレー */
display:inline-block;
}

.ball{background:lime;}
.strike{background:yellow;}
.out{background:red;}

.controls{
width:95%;
max-width:460px;
margin:auto;
}

button{
margin:4px;
padding:10px;
font-size:16px;
}

input{
padding:6px;
font-size:16px;
width:70px;
text-align:center;
}