/* Center the live situation between team identity and score in each CARD tile. */
.game-tile[data-phase="live"] {
  padding: 8px 6px;
}

.game-tile[data-phase="live"] .game-tile-main {
  grid-template-columns: 18px max-content minmax(36px, 1fr) minmax(16px, max-content);
  grid-template-rows: repeat(2, minmax(26px, auto));
  column-gap: 4px;
  row-gap: 4px;
  align-items: center;
}

.game-tile[data-phase="live"] .game-team-row { display: contents; }
.game-tile[data-phase="live"] .game-team-row:first-child > * { grid-row: 1; }
.game-tile[data-phase="live"] .game-team-row:nth-child(2) > * { grid-row: 2; }
.game-tile[data-phase="live"] .game-team-row img {
  grid-column: 1;
  width: 18px;
  height: 22px;
}
.game-tile[data-phase="live"] .game-team-row strong {
  display: block;
  grid-column: 2;
  font-size: .63rem;
}
.game-tile[data-phase="live"] .game-team-row b {
  display: block;
  grid-column: 4;
}

.game-tile .game-tile-center {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.game-tile-center .game-tile-status {
  max-width: 100%;
  font-size: .53rem;
  line-height: 12px;
  color: #ededed;
}
.game-tile .game-tile-meta[hidden] { display: none; }

.game-tile .game-tile-count {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: none;
}
.game-tile .game-tile-count > span {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.game-tile-count > [data-count="balls"] { --count-color: #79a7ff; }
.game-tile-count > [data-count="strikes"] { --count-color: #ffa94d; }
.game-tile-count > [data-count="outs"] { --count-color: #ff5e75; }
.game-tile .game-tile-count > span > .game-count-light {
  display: block;
  box-sizing: border-box;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--count-color);
  background: transparent;
  opacity: .32;
}
.game-tile .game-tile-count > span > .game-count-light.is-lit {
  background: currentColor;
  opacity: 1;
  box-shadow: 0 0 4px currentColor;
}

.game-tile .game-tile-bases {
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 28px;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: visible;
}
.game-tile-bases polygon {
  fill: #121212;
  stroke: #848484;
  stroke-width: 1;
  stroke-linejoin: round;
}
.game-tile-bases polygon.occupied {
  fill: #f4f4f4;
  stroke: #fff;
  filter: drop-shadow(0 0 2px #ffffff70);
}

/* Preserve the existing compact rail when its controls collapse it to logos. */
.game-collapsed .game-tile[data-phase="live"] .game-tile-main {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1px;
}
.game-collapsed .game-tile[data-phase="live"] .game-team-row { display: block; }
.game-collapsed .game-tile[data-phase="live"] .game-tile-center,
.game-collapsed .game-tile[data-phase="live"] .game-team-row strong,
.game-collapsed .game-tile[data-phase="live"] .game-team-row b { display: none; }

@media (max-width: 1180px) and (min-width: 901px) {
  .game-rail .game-tile[data-phase="live"] .game-tile-main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1px;
  }
  .game-rail .game-tile[data-phase="live"] .game-team-row { display: block; }
  .game-rail .game-tile[data-phase="live"] .game-tile-center,
  .game-rail .game-tile[data-phase="live"] .game-team-row strong,
  .game-rail .game-tile[data-phase="live"] .game-team-row b { display: none; }
}