.situation-container {
  background-color: white;
  border: thick double black;
  color: black;
  font-family: Arial, sans-serif;
  height: 40em;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 30em;
}

.situation-container .close {
  background-color: white;
  border: thin solid black;
  font-weight: bolder;
  right: 0;
  padding: 3px;
  position: absolute;
  top: 0;
  transform: translate(50%, -50%);
}

.situation-container .close:hover {
  background-color: lightsteelblue;
  color: white;
  cursor: pointer;
}

.situation-container .info {
  left: .5em;
  position: absolute;
  top: .5em;
}

.situation-container .info > div {
  white-space: nowrap;
}

.situation-container .info > div > div {
  display: inline-block;
}

.situation-container .pitches {
  top: .5em;
  position: absolute;
  right: .5em;
  width: 9.5em;
}

.situation-container .pitches > div {
  height: 1em;
  margin: 1px 0 3px;
  white-space: nowrap;
  width: 4em;
}

.situation-container .pitches div.label {
  display: inline-block;
  width: 4em;
}

.situation-container .pitches div.pitch {
  background-color: lightgray;
  border-radius: 1em;
  display: inline-block;
  height: 1em;
  width: 1em;
}

.situation-container .pitches div.pitch.ball.pitched {
  background-color: yellow;
}

.situation-container .pitches div.pitch.strike.pitched {
  background-color: red;
}


.situation-container .players-out {
  bottom: 5em;
  display: none;
  font-weight: bolder;
  position: absolute;
  right: 5em;
}

.situation-container.batter-out .players-out,
.situation-container.runner-1b-out .players-out,
.situation-container.runner-2b-out .players-out,
.situation-container.runner-3b-out .players-out {
  display: block;
}

.situation-container .players-scored {
  bottom: 5em;
  display: none;
  font-weight: bolder;
  left: 1em;
  position: absolute;
}

.situation-container.batter-scores .players-scored,
.situation-container.runner-1b-scores .players-scored,
.situation-container.runner-2b-scores .players-scored,
.situation-container.runner-3b-scores .players-scored {
  display: block;
}

.situation-container .diamond {
  background-color: whitesmoke;
  height: 20em;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 20em;
}

.situation-container .batter-action {
  background-color: gainsboro;
  height: 1.25em;
  position: absolute;
  text-align: center;
  width: 100%;
}

.situation-container.action-intentional-walk .batter-action.action-intentional-walk,
.situation-container.action-walk .batter-action.action-walk,
.situation-container.action-k-steals-1b .batter-action.action-k-steals-1b,
.situation-container.action-play-fielders-choice .batter-action.action-play-fielders-choice,
.situation-container.action-hit-single .batter-action.if-1b,
.situation-container.action-hit-double .batter-action.if-2b,
.situation-container.action-hit-triple .batter-action.if-3b,
.situation-container.action-hit-home-run .batter-action.if-hr,
.situation-container.action-strike-out .batter-action.action-strike-out,
.situation-container.action-strike-out-looking .batter-action.action-strike-out-looking,
.situation-container .batter-action.selected {
  background-color: black;
  color: white;
}

/* Needs to be more precise because of selected above*/
.situation-container .batter-action:is(.action-intentional-walk,.action-walk,.action-k-steals-1b,.action-play-fielders-choice,.action-hit-single,.action-hit-double,.action-hit-triple,.action-hit-home-run,.action-strike-out,.action-strike-out-looking):hover {
  background-color: lightslategrey;
  color: white;
  cursor: pointer;
}

.situation-container .batter-action.action-strike-out {
  bottom: 2.75em;
  left: 50%;
  transform: translate(2em);
  width: 2em;
}

.situation-container .batter-action.action-strike-out-looking {
  bottom: 1.25em;
  left: 50%;
  transform: translate(2em) scaleX(-1);
  width: 2em;
}

.situation-container .batter-action.action-hit-single {
  bottom: 3em;
  height: 6.75em;
  right: 0;
  width: 1.25em;
  writing-mode: sideways-lr;
}

.situation-container .batter-action.action-play-fielders-choice {
  top: 3em;
  height: 6.75em;
  right: 0;
  width: 1.25em;
  writing-mode: sideways-lr;
}

.situation-container .batter-action.action-hit-double {
  top: 0;
}

.situation-container .batter-action.action-hit-triple {
  top: 0;
  width: 1.25em;
  height: 100%;
  writing-mode: sideways-lr;
}

.situation-container .batter-action.action-hit-home-run {
  bottom: 0;
}

.situation-container .batter-action.action-k-steals-1b {
  height: 4.5em;
  width: 1.25em;
  right: 1.25em;
  top: 3em;
  writing-mode: sideways-lr;
}

.situation-container .batter-action.action-walk {
  writing-mode: sideways-lr;
  height: 4.5em;
  right: 1.25em;
  width: 1.25em;
  top: 50%;
  transform: translate(0, -50%);
}

.situation-container .batter-action.action-intentional-walk {
  bottom: 3em;
  height: 4.5em;
  right: 1.25em;
  width: 1.25em;
  writing-mode: sideways-lr;
}


.situation-container .runner-action {
  background-color: yellowgreen;
  display: none;
  height: 1.25em;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  width: 4.5em;
}

.situation-container .runner-action:hover {
  background-color: lightyellow;
  cursor: pointer;
}

.situation-container.runner-1b .runner-action.runner-1b,
.situation-container.runner-2b .runner-action.runner-2b,
.situation-container.runner-3b .runner-action.runner-3b,
.situation-container .runner-action.selected {
  display: block;
}

/* -- for detailed plays -- later!
.situation-container.runner-1b.runner-1b-1b .runner-action.runner-1b.runner-1b-1b,
.situation-container.runner-1b.runner-1b-2b .runner-action.runner-1b.runner-1b-2b,
.situation-container.runner-1b.runner-1b-3b .runner-action.runner-1b.runner-1b-3b,
.situation-container.runner-2b.runner-2b-2b .runner-action.runner-2b.runner-2b-2b,
.situation-container.runner-2b.runner-2b-3b .runner-action.runner-2b.runner-2b-3b,
.situation-container.action-1b-pick-off-1b .runner-action.action-1b-pick-off-1b,
.situation-container.pick-off-2b .runner-action.action-pick-off-2b,
.situation-container.pick-off-3b .runner-action.action-pick-off-3b,
.situation-container.caught-stealing-2b .runner-action.action-caught-stealing-2b,
.situation-container.caught-stealing-3b .runner-action.action-caught-stealing-3b,
.situation-container.caught-stealing-home .runner-action.action-caught-stealing-home,
.situation-container.steals-2b .runner-action.action-steals-2b,
.situation-container.steals-3b .runner-action.action-steals-3b,
.situation-container.steals-home .runner-action.action-steals-home,
*/

/* Not allowed */
.situation-container.runner-1b:not(.runner-1b-out,.runner-1b-2b,.runner-1b-3b,.runner-1b-scores) .batter-action:is(.action-k-steals-1b,.action-k-steals-1b:hover),
.situation-container:not(.runner-1b,.runner-2b,.runner-3b) .batter-action:is(.action-play-fielders-choice,.action-play-fielders-choice:hover),
.situation-container .batter-action.action-not-allowed {
  background-color: darkseagreen;
  cursor: not-allowed;
  text-decoration-line: line-through;
}

/* Selected */
.situation-container.action-1b-out .runner-action.action-1b-out,
.situation-container.action-2b-out .runner-action.action-2b-out,
.situation-container.action-3b-out .runner-action.action-3b-out,
.situation-container.action-1b-advance-2b .runner-action.action-1b-advance-2b,
.situation-container.action-1b-advance-3b .runner-action.action-1b-advance-3b,
.situation-container.action-1b-advance-home .runner-action.action-1b-advance-home,
.situation-container.action-2b-advance-3b .runner-action.action-2b-advance-3b,
.situation-container.action-2b-advance-home .runner-action.action-2b-advance-home,
.situation-container.action-3b-advance-home .runner-action.action-3b-advance-home,
.situation-container .runner-action.selected {
  background-color: darkgreen;
  color: white;
}

/* Collisions */
.situation-container.action-walk.runner-1b:not(.action-1b-out,.action-1b-advance-2b,.action-1b-advance-3b,.action-1b-advance-home) .batter-action.action-walk,
.situation-container.action-intentional-walk.runner-1b:not(.action-1b-out,.action-1b-advance-2b,.action-1b-advance-3b,.action-1b-advance-home) .batter-action.action-intentional-walk,
.situation-container.action-k-steals-1b.runner-1b:not(.action-1b-out,.action-1b-advance-2b,.action-1b-advance-3b,.action-1b-advance-home) .batter-action.action-k-steals-1b,
.situation-container.action-hit-single.runner-1b:not(.action-1b-out,.action-1b-advance-2b,.action-1b-advance-3b,.action-1b-advance-home) .batter-action.action-hit-single,
.situation-container.action-hit-double:is(.runner-1b:not(.action-1b-out,.action-1b-advance-3b,.action-1b-advance-home),.runner-2b:not(.action-2b-out,.action-2b-advance-3b,.action-2b-advance-home)) :is(.situation-container.runner-1b.action-1b-advance-2b .runner-action.action-1b-advance-2b,.batter-action.action-hit-double),
.situation-container.action-hit-triple:is(.runner-1b:not(.action-1b-out,.action-1b-advance-home),.runner-2b:not(.action-2b-out,.action-2b-advance-home),.runner-3b:not(.action-3b-out,.action-3b-advance-home)) :is(.situation-container.runner-1b.action-1b-advance-3b .runner-action.action-1b-advance-3b,.situation-container.runner-2b.action-2b-advance-3b .runner-action.action-2b-advance-3b,.batter-action.action-hit-triple),
  /* Home run should always set runners to score */
.situation-container.action-hit-home-run:is(.runner-1b:not(.action-1b-out,.action-1b-advance-home),.runner-2b:not(.action-2b-out,.action-2b-advance-home),.runner-3b:not(.action-3b-out,.action-3b-advance-home)) .batter-action.action-hit-home-run,
.situation-container .runner-action.error {
  background-color: red;
}

.situation-container.runner-1b .runner-action.action-1b-out {
  right: 3em;
  top: 1.25em;
  width: 6.75em;
}

.situation-container.runner-2b .runner-action.action-2b-out {
  left: 1.25em;
  height: 6.75em;
  top: 3em;
  width: 1.25em;
  writing-mode: sideways-lr;
}

.situation-container.runner-3b .runner-action.action-3b-out {
  bottom: 1.25em;
  left: 3em;
  width: 6.75em;
}

.situation-container.runner-1b .runner-action.action-1b-advance-2b {
  left: 3em;
  top: 1.25em;
  width: 6.75em;
}

.situation-container.runner-2b .runner-action.action-2b-advance-3b {
  bottom: 3em;
  left: 1.25em;
  height: 6.75em;
  width: 1.25em;
  writing-mode: sideways-lr;
}

.situation-container.runner-1b .runner-action.action-1b-advance-3b {
  left: 1.25em;
  height: 14em;
  top: 3em;
  width: 1.25em;
  writing-mode: sideways-lr;
}

.situation-container.runner-1b .runner-action.action-1b-advance-home,
.situation-container.runner-2b .runner-action.action-2b-advance-home {
  bottom: 1.25em;
  left: 3em;
  width: 14em;
}

.situation-container.runner-3b .runner-action.action-3b-advance-home {
  bottom: 1.25em;
  right: 3em;
  width: 6.75em;
}

.situation-container.runner-1b.runner-2b .runner-action.action-1b-advance-3b {
  height: 11em;
  left: 2.5em;
  top: 4.5em;
}

.situation-container.runner-1b.runner-2b .runner-action.action-1b-advance-home {
  bottom: 2.5em;
}

.situation-container.runner-1b.runner-3b .runner-action.action-1b-advance-home,
.situation-container.runner-2b.runner-3b .runner-action.action-2b-advance-home {
  bottom: 2.5em;
  left: 4.5em;
  width: 11em;
}

.situation-container.runner-1b.runner-2b.runner-3b .runner-action.action-1b-advance-home {
  bottom: 3.75em;
  left: 5em;
  width: 10em;
}


.situation-container .bases {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0
}

.situation-container .base {
  background-color: navajowhite;
  height: 3em;
  position: absolute;
  width: 3em;
}

.situation-container .base.base-home {
  bottom: 0;
  height: 4em;
  right: 0;
  transform: rotate(45deg) translate(1em);
  width: 4em;
}

.situation-container .base.base-first {
  right: 0;
  top: 0;
}

.situation-container .base.base-second {
  left: 0;
  top: 0;
}

.situation-container .base.base-third {
  bottom: 0;
  left: 0;
}

.situation-container .fielders .fielder {
  background-color: white;
  border: 2px solid black;
  border-radius: 1.5em;
  font-size: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 1.5em;
}

.situation-container .fielders .fielder:hover {
  background-color: lightslategrey;
  color: white;
  cursor: pointer;
}

.situation-container .fielder.fielder-pitcher {
  left: 50%;
  top: 14.5em;
}

.situation-container .fielder.fielder-catcher {
  bottom: .25em;
  left: 50%;
}

.situation-container .fielder.fielder-first {
  right: 1em;
  top: 11em;
}

.situation-container .fielder.fielder-second {
  right: 5em;
  top: 7em;
}

.situation-container .fielder.fielder-third {
  left: 2.5em;
  top: 11em;
}

.situation-container .fielder.fielder-short {
  left: 6.5em;
  top: 7em;
}

.situation-container .fielder.fielder-left {
  left: 3.5em;
  top: 5em;
}

.situation-container .fielder.fielder-center {
  left: 50%;
  top: 3em;
}

.situation-container .fielder.fielder-right {
  top: 5em;
  right: 2em;
}

.situation-container .players .player {
  background-color: white;
  border-radius: 3px;
  display: none;
  padding: 1px;
  position: absolute;
  text-align: center;
}

.situation-container .players .player.batter,
.situation-container.runner-1b .players .player.runner-1b,
.situation-container.runner-2b .players .player.runner-2b,
.situation-container.runner-3b .players .player.runner-3b {
  display: block;
}

.situation-container .players .player.batter {
  bottom: 5.5em;
  left: 50%;
  transform: translate(-50%);
}

.situation-container .players .player.runner-1b,
.situation-container.batter-1b .players .player.batter {
  bottom: initial;
  left: initial;
  right: 1em;
  text-align: right;
  transform: initial;
  top: 21.5em;
}

/* Two runners same base - leader */
.situation-container.batter-1b.runner-1b-1b .player.runner-1b,
.situation-container.batter-2b.runner-1b-2b .player.runner-1b,
.situation-container.batter-2b.runner-2b-2b .player.runner-2b,
.situation-container.batter-3b.runner-1b-3b .player.runner-1b,
.situation-container.batter-3b.runner-2b-3b .player.runner-2b,
.situation-container.batter-3b.runner-3b-3b .player.runner-3b,
.situation-container.runner-1b-2b.runner-2b-2b .player.runner-2b,
.situation-container.runner-1b-3b.runner-2b-3b .player.runner-2b,
.situation-container.runner-1b-3b.runner-3b-3b .player.runner-3b,
.situation-container.runner-2b-3b.runner-3b-3b .player.runner-3b {
  color: red;
  transform: translate(-.5em, -.75em);
}

/* Two runners same base - follower */
.situation-container.batter-1b.runner-1b-1b .player.batter,
.situation-container.batter-2b.runner-1b-2b .player.batter,
.situation-container.batter-2b.runner-2b-2b .player.batter,
.situation-container.batter-3b.runner-1b-3b .player.batter,
.situation-container.batter-3b.runner-2b-3b .player.batter,
.situation-container.batter-3b.runner-3b-3b .player.batter,
.situation-container.runner-1b-2b.runner-2b-2b .player.runner-1b,
.situation-container.runner-1b-3b.runner-2b-3b .player.runner-1b,
.situation-container.runner-1b-3b.runner-3b-3b .player.runner-1b,
.situation-container.runner-2b-3b.runner-3b-3b .player.runner-2b {
  color: red;
  transform: translate(.5em, .75em);
}

/* Three runners same base - leader */
.situation-container.batter-2b.runner-1b-2b.runner-2b-2b .player.runner-2b,
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b .player.runner-2b,
.situation-container.batter-3b.runner-1b-3b.runner-3b-3b .player.runner-3b,
.situation-container.batter-3b.runner-2b-3b.runner-3b-3b .player.runner-3b,
.situation-container.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-3b {
  color: red;
  transform: translate(-.5em, -.75em);
}

/* Three runners same base - middle */
.situation-container.batter-2b.runner-1b-2b.runner-2b-2b .player.runner-1b,
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b .player.runner-1b,
.situation-container.batter-3b.runner-1b-3b.runner-3b-3b .player.runner-1b,
.situation-container.batter-3b.runner-2b-3b.runner-3b-3b .player.runner-2b,
.situation-container.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-2b {
  color: red;
}

/* Three runners same base - follower */
.situation-container.batter-2b.runner-1b-2b.runner-2b-2b .player.batter,
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b .player.batter,
.situation-container.batter-3b.runner-1b-3b.runner-3b-3b .player.batter,
.situation-container.batter-3b.runner-2b-3b.runner-3b-3b .player.batter,
.situation-container.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-1b {
  color: red;
  transform: translate(1em, 2.25em);
}

/* Everyone on third - 3b */
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-3b {
  transform: translate(-.5em, -1.25em);
}

/* Everyone on third - 2b */
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-2b {
  transform: translate(-.25em, -.25em);
}

/* Everyone on third - 1b */
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.runner-1b {
  transform: translate(.25em, .75em);
}

/* Everyone on third - batter */
.situation-container.batter-3b.runner-1b-3b.runner-2b-3b.runner-3b-3b .player.batter {
  transform: translate(.5em, 2em);
}

.situation-container .players .player.runner-2b,
.situation-container.runner-1b-2b .players .player.runner-1b,
.situation-container.batter-2b .players .player.batter {
  bottom: initial;
  left: 50%;
  right: initial;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 9em;
}

.situation-container .players .player.runner-3b,
.situation-container.runner-2b-3b .players .player.runner-2b,
.situation-container.runner-1b-3b .players .player.runner-1b,
.situation-container.batter-3b .players .player.batter {
  bottom: initial;
  left: 1em;
  right: initial;
  text-align: left;
  transform: initial;
  top: 21.5em;
}

.situation-container.batter-scores .players .player.batter {
  bottom: 4em;
  left: 2em;
  right: initial;
  text-align: left;
  transform: initial;
  top: initial;
}

.situation-container.runner-1b-scores .players .player.runner-1b {
  bottom: 3em;
  left: 2em;
  right: initial;
  text-align: left;
  transform: initial;
  top: initial;
}

.situation-container.runner-2b-scores .players .player.runner-2b {
  bottom: 2em;
  left: 2em;
  right: initial;
  text-align: left;
  transform: initial;
  top: initial;
}

.situation-container.runner-3b-scores .players .player.runner-3b {
  bottom: 1em;
  left: 2em;
  right: initial;
  text-align: left;
  transform: initial;
  top: initial;
}

.situation-container.batter-out .players .player.batter {
  bottom: 4em;
  left: initial;
  right: 1em;
  text-align: right;
  top: initial;
  transform: initial;
}

.situation-container.runner-1b-out .players .player.runner-1b {
  bottom: 3em;
  left: initial;
  right: 1em;
  text-align: right;
  top: initial;
  transform: initial;
}

.situation-container.runner-2b-out .players .player.runner-2b {
  bottom: 2em;
  left: initial;
  right: 1em;
  text-align: right;
  top: initial;
  transform: initial;
}

.situation-container.runner-3b-out .players .player.runner-3b {
  bottom: 1em;
  left: initial;
  right: 1em;
  text-align: right;
  top: initial;
  transform: initial;
}