/* meeting.css — lobby, discussion, voting, and end screen styles */

/* Voting screen z-index */
/* Raises the voting overlay above the discussion screen when both exist in the DOM. */
#votingScreen { z-index: 15; }

/* Vote player buttons */
/* Styles each vote option as a full-width row in the meeting vote list. */
.voteButton {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 3px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  color: white; cursor: pointer; font-family: inherit; font-size: 13px; width: 310px;
}
/* Lightens vote options when the player hovers them. */
.voteButton:hover { background: rgba(255,255,255,0.15); }
/* Highlights the option the human player selected. */
.voteButton.voted { border-color: #ffff44; background: rgba(255,255,100,0.12); }
/* Gives the skip-vote row a more neutral visual treatment. */
.voteButton.skipVote { background: rgba(80,80,80,0.15); margin-top: 8px; }

/* Player color dot in vote list */
/* Renders the small player-color indicator shown beside each vote option. */
.playerColorDot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* Countdown timers */
/* Styles the large discussion and voting countdown timers. */
#voteTimer, #discussionTimer { font-size: 36px; font-weight: bold; margin: 6px; }
/* Colors the voting timer with the brighter vote-phase accent. */
#voteTimer { color: #ffff44; }
/* Colors the discussion timer with the warmer discussion-phase accent. */
#discussionTimer { color: #ff8844; }

/* Discussion chat log */
/* Frames the scrolling discussion chat transcript during meetings. */
#chatBox {
  width: 460px; height: 130px; background: rgba(0,0,0,0.5);
  border: 1px solid #333; padding: 8px; overflow-y: auto;
  margin: 8px 0; border-radius: 4px; font-size: 12px; text-align: left;
}

/* End screen */
/* Styles the large winner title on the final game screen. */
#endTitle { font-size: 52px; font-weight: bold; margin-bottom: 14px; }
/* Styles the supporting winner subtitle beneath the end title. */
#endSubtitle { font-size: 18px; color: #aaa; margin-bottom: 20px; }

/* Lobby settings row */
/* Lays out the lobby settings controls in a single horizontal row. */
#lobbySettings { display: flex; gap: 16px; margin: 8px 0; }
/* Stacks each lobby setting label and field vertically. */
.setting { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* Styles the text labels above each lobby setting field. */
.setting label { font-size: 12px; color: #999; }
/* Styles the select inputs used for player count, impostors, and task count. */
.setting select {
  background: #222; color: white; border: 1px solid #444;
  padding: 4px 8px; border-radius: 4px; font-family: inherit;
}

/* Lobby name input */
/* Styles the player name input shown on the lobby screen. */
#playerNameInput {
  background: #222; color: white; border: 2px solid #444; padding: 8px 12px;
  border-radius: 6px; font-family: inherit; font-size: 15px;
  text-align: center; width: 200px; margin: 6px 0;
}
/* Highlights the player name input when focused. */
#playerNameInput:focus { border-color: #6666aa; outline: none; }