/* LSL Live Baseball — Frontend Scoreboard Styles */
:root {
  --lsl-primary:   #1a1a2e;
  --lsl-accent:    #e94560;
  --lsl-green:     #2eb82e;
  --lsl-gold:      #f5a623;
  --lsl-white:     #ffffff;
  --lsl-gray:      #f4f4f4;
  --lsl-border:    #dde1e7;
  --lsl-text:      #1a1a2e;
  --lsl-muted:     #6b7280;
  --lsl-card-bg:   #ffffff;
  --lsl-live-red:  #dc2626;
}

.lsl-live-game-center {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: var(--lsl-text);
}

/* ---- STATUS BAR ---- */
.lsl-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lsl-status-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  color: var(--lsl-white);
  background: var(--lsl-muted);
}
.lsl-status-badge.lsl-status-live {
  background: var(--lsl-live-red);
  animation: lsl-pulse 1.6s ease-in-out infinite;
}
.lsl-status-badge.lsl-status-final { background: var(--lsl-primary); }
@keyframes lsl-pulse {
  0%,100% { opacity:1; } 50% { opacity:.6; }
}
.lsl-inning-badge, .lsl-outs-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--lsl-border);
  border-radius: 6px;
  background: var(--lsl-gray);
}

/* ---- SCOREBOARD ---- */
.lsl-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--lsl-primary);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.lsl-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.lsl-team-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
}
.lsl-team-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--lsl-white);
  text-align: center;
}
.lsl-team-score {
  font-size: 52px;
  font-weight: 900;
  color: var(--lsl-white);
  line-height: 1;
}
.lsl-scoreboard-divider {
  font-size: 24px;
  color: rgba(255,255,255,.4);
  font-weight: 300;
}

/* ---- LINESCORE ---- */
.lsl-linescore-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}
.lsl-linescore {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lsl-linescore th,
.lsl-linescore td {
  text-align: center;
  padding: 7px 8px;
  border: 1px solid var(--lsl-border);
  min-width: 28px;
}
.lsl-linescore thead th {
  background: var(--lsl-primary);
  color: var(--lsl-white);
  font-weight: 700;
}
.lsl-linescore .lsl-team-col {
  text-align: left;
  min-width: 80px;
  font-weight: 600;
}
.lsl-linescore .lsl-stat-col { font-weight: 700; }
.lsl-linescore .lsl-total-r  { color: var(--lsl-accent); font-size: 15px; }
.lsl-ls-away, .lsl-ls-home { transition: background .3s; }
.lsl-ls-home td { background: #f8f9ff; }

/* ---- GAME STATE ROW ---- */
.lsl-game-state-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ---- DIAMOND ---- */
.lsl-diamond-wrap {
  background: var(--lsl-card-bg);
  border: 1px solid var(--lsl-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}
.lsl-diamond {
  position: relative;
  width: 100px;
  height: 100px;
}
.lsl-base {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  background: var(--lsl-border);
  border: 2px solid #aaa;
  transition: background .2s, border-color .2s;
}
.lsl-base.lsl-base-on {
  background: var(--lsl-gold);
  border-color: #c8860a;
}
.lsl-base-2b { top: 0; left: 39px; }
.lsl-base-3b { top: 39px; left: 0; }
.lsl-base-1b { top: 39px; left: 78px; }
.lsl-home-plate {
  position: absolute;
  bottom: 0;
  left: 39px;
  width: 22px;
  height: 22px;
  background: var(--lsl-white);
  border: 2px solid #aaa;
  transform: rotate(45deg);
}
.lsl-outs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lsl-out-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lsl-border);
  border: 2px solid #aaa;
}
.lsl-out-dot.lsl-out-filled {
  background: var(--lsl-accent);
  border-color: #a31a1a;
}
.lsl-outs-label { font-size: 11px; color: var(--lsl-muted); }

/* ---- AT-BAT INFO ---- */
.lsl-at-bat-info {
  background: var(--lsl-card-bg);
  border: 1px solid var(--lsl-border);
  border-radius: 12px;
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lsl-current-batter, .lsl-current-pitcher {
  font-size: 15px;
}
.lsl-current-batter span, .lsl-current-pitcher span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lsl-muted);
  display: block;
}
.lsl-inning-detail {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lsl-primary);
}

/* ---- PLAY LOG ---- */
.lsl-play-log-wrap {
  background: var(--lsl-card-bg);
  border: 1px solid var(--lsl-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.lsl-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lsl-primary);
  border-bottom: 2px solid var(--lsl-primary);
  padding-bottom: 6px;
}
.lsl-play-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--lsl-border);
  font-size: 14px;
}
.lsl-play-entry:last-child { border-bottom: none; }
.lsl-play-inning {
  font-size: 11px;
  font-weight: 700;
  background: var(--lsl-primary);
  color: var(--lsl-white);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.lsl-play-batter { font-weight: 600; }
.lsl-play-desc { flex: 1; color: var(--lsl-muted); }
.lsl-play-runs {
  font-size: 12px;
  font-weight: 700;
  color: var(--lsl-live-red);
  background: #fff0f0;
  padding: 2px 8px;
  border-radius: 4px;
}
.lsl-no-plays { color: var(--lsl-muted); font-style: italic; }

/* ---- FOOTER ---- */
.lsl-updated-at {
  font-size: 11px;
  color: var(--lsl-muted);
  text-align: right;
  margin-top: 4px;
}

.lsl-error { color: var(--lsl-live-red); font-style: italic; }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
  .lsl-scoreboard { padding: 14px; gap: 8px; }
  .lsl-team-score { font-size: 38px; }
  .lsl-team-name  { font-size: 14px; }
  .lsl-team-logo  { width: 40px; height: 40px; }
  .lsl-game-state-row { flex-direction: column; }
}