
.gc-wrap{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
background:linear-gradient(to bottom,#1f1f1f 0%,#000 50%,#181818 100%);
border:2px solid rgba(255,255,255,.25);
border-radius:32px;
padding:14px 18px 20px;
box-shadow:0 12px 30px rgba(0,0,0,.45);
margin-bottom:24px;
overflow:hidden;
color:#fff;
}

.gc-team{
width:220px;
}

.gc-logo{
width:100%;
height:151px;
object-fit:contain;
border:5px solid #fff;
border-radius:24px;
padding:0;
background:#0a0a0a;
box-sizing:border-box;
transition:border-color .35s ease;
}

.gc-logo.flash-green{
border-color:#17f217;
}

.gc-logo.flash-red{
border-color:#ff2a2a;
}

.gc-team-name{
font-size:clamp(16px,2vw,26px);
margin-top:8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.gc-side{
font-size:16px;
opacity:.8;
margin-top:4px;
}

.left-text{text-align:left;}
.right-text{text-align:right;}

.gc-score{
align-self:center;
font-size:clamp(72px,7vw,110px);
font-weight:700;
line-height:1;
margin-top:6px;
transition:color .35s ease;
}

.gc-score.updated{
color:#1af21a;
}

.away-score{
padding-right:18px;
}

.gc-center{
text-align:center;
width:220px;
}

.gc-inning{
font-size:34px;
margin-bottom:20px;
}

.gc-diamond{
position:relative;
width:120px;
height:90px;
margin:0 auto;
}

.base{
position:absolute;
width:30px;
height:30px;
border:4px solid #fff;
transform:rotate(45deg);
background:#000;
}

.base.active{
background:#1bf31b;
}

.second{top:10px;left:45px;}
.third{bottom:10px;left:28px;}
.first{bottom:10px;right:28px;}

.gc-outs{
display:flex;
justify-content:center;
gap:10px;
margin-top:22px;
}

.out{
width:24px;
height:24px;
border-radius:50%;
border:4px solid #fff;
background:#000;
}

.out.active{
background:#ff1d1d;
}

.gc-bottom{
margin-top:18px;
font-size:18px;
}

.gc-bottom span{
margin:0 6px;
}

.live{
color:#00f06c;
font-weight:700;
}

.controls{
background:#efefef;
border:1px solid #ccc;
border-radius:20px;
padding:20px;
}

.full-inning-panel,.score-panel,.mini-panel{
background:#f7f7f7;
border:1px solid #ccc;
border-radius:16px;
padding:20px;
}

.full-inning-panel{
margin-bottom:20px;
}

.lower-row{
display:grid;
grid-template-columns:2fr 2fr 1.3fr 1.4fr;
gap:20px;
}

.title{
text-align:center;
font-size:18px;
font-weight:700;
margin-bottom:16px;
color:#071553;
}

.inning-layout{
display:flex;
justify-content:center;
align-items:center;
gap:14px;
flex-wrap:wrap;
}

.score-input,.inning-input,.mini-input{
background:#fff;
border:1px solid #bbb;
border-radius:12px;
padding:14px;
font-size:54px;
font-weight:800;
text-align:center;
color:#071553;
}

.score-input{
width:100%;
box-sizing:border-box;
}

.inning-input{
width:120px;
}

.mini-input{
width:70px;
}

.btn-row,.outs-layout{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
margin-top:18px;
}

.plus,.minus,.toggle,.base-btn,.clear-btn{
border:none;
border-radius:12px;
cursor:pointer;
font-weight:800;
color:#fff;
box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.plus,.minus{
width:82px;
height:82px;
font-size:44px;
}

.plus{
background:#11b865;
}

.minus{
background:#df001c;
}

.toggle{
padding:18px 28px;
font-size:22px;
background:#d8d8d8;
color:#111;
}

.active-toggle{
background:linear-gradient(to bottom,#2c2c2c,#111);
color:#ffe600;
}

.base-btn{
background:#14b765;
padding:14px 26px;
font-size:20px;
min-width:110px;
}

.clear-btn{
background:#1878ff;
padding:14px 24px;
font-size:20px;
}

.bases-layout{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}

.base-row{
display:flex;
gap:18px;
}

@media(max-width:1000px){

.lower-row{
grid-template-columns:1fr;
}

.plus,.minus{
width:64px;
height:64px;
font-size:34px;
}

.score-input,.inning-input,.mini-input{
font-size:34px;
}

.gc-logo{
height:82px;
}

.gc-score{
font-size:52px;
margin-top:0;
}

}
