#game_board {
  height: 100%;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: 5fr 3fr;
  overflow: hidden;
}

#top_left_wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 40rem;
}

#top_mid_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

#top_right_wrapper {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

#legend_card {
  margin-top: 7rem;
  min-height: 0;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
}

#legend_card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#legend_card_wrapper {
  flex: 1;
  min-height: 0;
}

#legend_card img {
  width: 100%;
  height: auto;
}

#bottom_board_wrapper {
  grid-column: 1 / span 3;
}

#round_control_wrapper {
  height: 6rem;
  gap: 1rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#current_instruction {
  text-align: center;
}

#start_round_button {
  width: fit-content;
  margin-bottom: 1rem
}

#played_card_wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1rem;
  min-height: 0;
}

#opp_played_card {
  position: relative;
}

.card-outline { 
  outline: 1px dashed var(--white);
  border-radius: var(--border-radius);
  padding: 0.25rem;
}

.card-slot {
  height: 100%;
  aspect-ratio: 2 / 3;
}

#chat_box {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  overflow: hidden;
}

#chat_input_wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

#chat_feed {
  flex: 1;
  overflow: auto;
}

#chat_feed .username-wrapper {
  font-weight: bold;
}

#chat_feed .username-wrapper-system {
  color: var(--yellow);
}

#chat_input {
  flex: 1;
}

#opponent_cards {
  display: flex;
  justify-content: flex-end;
  height: 12.5rem;
  padding: 1rem;
  position: relative;
}

#opponent_cards versus-card {
  position: absolute;
}

#user_cards {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  height: 100%;
}

#game_info {
  background-color: var(--yellow);
  color: var(--black);
  border-radius: var(--border-radius);
  margin: 1rem 0;
  padding: 1rem;
  width: min(30rem, 100%);
  box-shadow: inset 0 0 1rem 0.5rem var(--red-low-opacity);
}

#round_info { 
  font-family: "Berkshire Swash";
  font-size: 1.5rem;
  text-align: center;
}

#score_info {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
}

#score_info p {
  display: flex;
  gap: 0.75rem;
}

#score_info p versus-username {
  font-weight: bold;
}

#score_info :last-child {
  flex-direction: row-reverse;
}

#game_winner_announcement {
  position: absolute;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%);
}

#game_winner_announcement h2 {
  font-family: "Mystery Quest", cursive, serif;
  font-size: 4rem;
  transform: translateY(800vh);
  transition: transform 250ms ease-in-out;
  text-align: center;
}

#game_winner_you {
  color: var(--yellow);
}

#game_winner_opp {
  color: var(--red);
}

#game_winner_announcement .game-winner-animation {
  transform: translateY(0);
}