.liveframe{height: 300px;}

.statScore, .statScorebg{position:absolute;width:100%;left:0px;}
.statScore .soccer{}


.detailPanel{
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: #0006;
  min-height: 170px;
}

.detailPanel .team1Detail{
  margin-top: 30px;
  float: left;
  width: 33%;
  text-align: center;
}

.detailPanel .detailEventDate{
  margin-top: 30px;
  float: left;
  width: 33%;
  text-align: center;
}

.detailPanel .team2Detail{
  margin-top: 30px;
  float: right;
  width: 33%;
  text-align: center;
}

.inningStats{
  border: 1px solid #CCC;
  border-radius: 10px;
  display: inline-block;
  min-width: 400px;
  padding-bottom: 20px;
}

.inningStatsHeader{
  font-size: 15px;
}

.inningStatsBaseCont{
  position: absolute;
  margin-left: -23px;
}
.inningStats .basecircle{
  font-size: 20px;
}

.inningStats .basecircle.ball.on{
  color: green;
}
.inningStats .basecircle.strike.on{
  color: yellow;
}
.inningStats .basecircle.out.on{
  color: red;
}

.strHistory{overflow-y:auto;max-height: 150px;text-align: left;}
.historyContent{}


/* ── 야구 라이브스텟 (pingapi game.css 이식) ───────────── */
.liveframe.baseball { height: auto; }
#baseballBoard {
  --border:         rgba(255,255,255,.07);
  --accent:         #2d6cdf;
  --text-primary:   #e8edf5;
  --text-secondary: rgba(232,237,245,.55);
  --text-muted:     rgba(232,237,245,.3);
  --radius-sm:      5px;
  text-align: left;
}
.statscore-panel {
  margin: 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg,
    rgba(45,108,223,.06) 0%,
    rgba(0,0,0,.15) 100%);
  overflow: hidden;
}
.statscore-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  font-size: .74rem; font-weight: 700; color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  letter-spacing: .02em;
}
.statscore-header i { color: var(--accent); margin-right: 4px; }
.statscore-sub {
  font-size: .7rem; color: var(--text-secondary); font-weight: 600;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
@keyframes ssPop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
/* ── 야구 스코어보드 종합 패널 (baseball.jpg 스타일) ─────
   canvas(야구장 이미지) 아래에 붙어서 이닝 테이블 + 하단(이벤트/다이아몬드+BSO) 표시. */
.baseball-board {
  background: #1a2028;
  border-top: 1px solid var(--border);
}
.bsb-inning-wrap {
  padding: 8px 10px 4px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid var(--border);
}
.bsb-inning-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.bsb-inning-table th,
.bsb-inning-table td {
  height: 26px;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  color: var(--text-primary);
  border-radius: 3px;
}
.bsb-team-head {
  width: 68px;
  background: transparent;
  padding: 0 4px;
  text-align: center;
}
.bsb-tb-badge {
  display: inline-block;
  padding: 2px 6px;
  background: #4aa15b;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  border-radius: 3px;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 0 4px rgba(74,161,91,.4);
}
.bsb-head {
  background: #2f6f3a;                /* baseball.jpg 의 초록 헤더 */
  color: #ffffff;
  letter-spacing: .02em;
}
.bsb-head.bsb-current {
  background: #4aa15b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}
.bsb-team {
  width: 68px;
  padding: 0 6px;
  text-align: left;
  font-size: .72rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(255,255,255,.04);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsb-cell {
  background: rgba(255,255,255,.05);
  color: var(--text-primary);
}
.bsb-cell.bsb-current {
  background: rgba(74,161,91,.22);
}
.bsb-r-cell {
  background: rgba(255,255,255,.09);
}
.bsb-r-val {
  color: #ffd76a;                     /* R 총점 강조 */
  font-weight: 800;
}
@media (max-width: 640px) {
  .bsb-team-head, .bsb-team { width: 52px; }
  .bsb-inning-table th,
  .bsb-inning-table td { height: 22px; font-size: .68rem; }
}

/* ── 하단 좌우 (이벤트 로그 · 다이아몬드+BSO) ─── */
.bsb-bottom-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px 10px;
}
/* 좌: 이벤트 로그 (가변폭) */
.bsb-events {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  height: 160px;
  display: flex; flex-direction: column;
}
.bsb-events-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.bsb-events-head i { color: var(--accent); margin-right: 3px; }
.bsb-hits {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.bsb-hits-label {
  background: #f59e0b; color: #000;
  padding: 1px 5px; border-radius: 3px;
  font-weight: 800; font-size: .66rem;
  margin-right: 3px;
}
.bsb-hits-val { color: #fff; font-weight: 700; }
.bsb-hits-sep { color: var(--text-muted); }
.bsb-events-list {
  list-style: none; padding: 0; margin: 0;
  flex: 1 1 auto;
  min-height: 0;         /* flex 자식 스크롤 활성화 */
  overflow-y: auto;
}
.bsb-ev {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0;
  font-size: .72rem;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.bsb-ev:last-child { border-bottom: none; }
.bsb-ev-time {
  color: var(--text-secondary);
  font-size: .64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.bsb-ev-timer {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
  border-radius: 3px;
  min-width: 44px;
  text-align: center;
}
.bsb-ev-msg { color: var(--text-primary); flex: 1; }
.bsb-ev-empty {
  list-style: none;
  padding: 20px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: .72rem;
}

/* 우: 다이아몬드 + BSO (고정폭) */
.bsb-status {
  flex: 0 0 190px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  height: 160px;
}
.bsb-diamond {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.bsb-base {
  position: absolute;
  width: 20px; height: 20px;
  background: #2b3140;
  border: 1.5px solid #4b5568;
  transform: rotate(45deg);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.bsb-base-2 { top:  0;    left: 50%; margin-left: -10px; }  /* 2루 (상단) */
.bsb-base-3 { top: 50%;   left: 0;   margin-top: -10px; }   /* 3루 (좌) */
.bsb-base-1 { top: 50%;   right: 0;  margin-top: -10px; }   /* 1루 (우) */
.bsb-base-h {                                                /* 홈 (하단) */
  bottom: 0; left: 50%; margin-left: -8px;
  width: 16px; height: 16px;
  background: #d1d5db;                    /* 홈은 항상 밝게 표시 */
  border-color: #9ca3af;
}
.bsb-base.on {
  background: #facc15;
  border-color: #fde047;
  box-shadow: 0 0 8px rgba(250, 204, 21, .7);
  animation: ssPop .35s cubic-bezier(.2,.9,.35,1.2);
}

/* B/S/O 도트 (baseball.jpg 스타일) */
.bsb-bso {
  display: flex; flex-direction: column; gap: 5px;
}
.bsb-bso-row {
  display: flex; align-items: center; gap: 6px;
}
.bsb-bso-lbl {
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  width: 12px;
  text-align: center;
}
.bsb-bso-dots {
  display: inline-flex; gap: 4px;
}
.bsb-dot {
  display: inline-block;           /* Why: <span> 은 inline 기본 → width/height 무시됨. flex 컨테이너 안이라도 명시적으로 지정해 안전 확보 */
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2b3140;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  vertical-align: middle;
  flex: 0 0 auto;
}
.bsb-dot-empty {
  background: #2b3140;
}
.bsb-dot-b { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.5); }   /* Ball: 초록 */
.bsb-dot-s { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,.5); }  /* Strike: 노랑 */
.bsb-dot-o { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,.5); }   /* Out: 빨강 */

@media (max-width: 640px) {
  .bsb-bottom-row { flex-direction: column; }
  .bsb-status { flex: 0 0 auto; height: auto; padding: 10px; }
  .bsb-events { height: 140px; }
  .bsb-diamond { width: 72px; height: 72px; }
  .bsb-base { width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; }
  .bsb-base-h { width: 14px; height: 14px; margin-left: -7px; }
}