/* Waiting Room (A2) and the board layout (C1). */

/* Present | Absent | Status, as a ruled table with centered contents. */
.presence-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.5em;
  text-align: center;
}

.presence-table th,
.presence-table td {
  border: 1px solid #ccc;
  padding: 0.5em 0.8em;
  vertical-align: top;
}

.presence-table th {
  background: #f4f4f4;
}

.presence-table td div {
  margin: 0.15em 0;
}

/* Account status beside emails on Create/Modify Game. */
.players-table .account-status {
  font-size: 0.85em;
  white-space: nowrap;
  color: #777;
}

.players-table .account-status.none {
  color: #c62828;
}

.players-table .account-status.pending {
  color: #e65100;
}

.players-table .account-status.verified {
  color: #2e7d32;
}

.waiting-room .me {
  font-weight: bold;
}

/* Board with the Red team listed on the left and Blue on the right. On a
   narrow screen both teams move above the board, still Red on the left and
   Blue on the right. */
#play-view {
  display: grid;
  grid-template-columns: 9em minmax(0, 700px) 9em;
  grid-template-areas:
    'info info info'
    'red board blue';
  justify-content: center;
  align-items: start;
  column-gap: 1.5em;
  padding: 0 16px;
}

#play-view #game-view {
  grid-area: board;
  width: 100%;
  margin: 0;
}

.full-screen#play-view,
#play-view.full-screen {
  grid-template-columns: 9em minmax(0, 1fr) 9em;
}

.team-list {
  padding-top: 4.1em;
}

.team-list.red {
  grid-area: red;
  color: #d13030;
  text-align: right;
}

.team-list.blue {
  grid-area: blue;
  color: #4183cc;
  text-align: left;
}

@media (max-width: 1100px) {
  #play-view,
  #play-view.full-screen {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'info info'
      'red blue'
      'board board';
    row-gap: 0.8em;
  }
  .team-list {
    padding-top: 0;
  }
  .team-list.red {
    text-align: left;
  }
  .team-list.blue {
    text-align: right;
  }
}

/* Player names are buttons that open the player's actions: the team color
   as background with white text; Floaters are light gray with text in the
   color of the team whose turn it is. The logged-in player's button has a
   black border (every button reserves the border's space, so sizes match). */
.player-name {
  display: table; /* a block that is only as wide as the name */
  border: 3px solid transparent;
  border-radius: 6px;
  background: #888;
  color: #fff;
  padding: 0.05em 0.5em;
  margin-bottom: 0.3em;
  font: inherit;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.player-name:hover {
  filter: brightness(1.12);
}

/* Soft tints, so the vivid turn banner stands out; dark text in the team color. */
/* Beside the board, names hug the board: Red's to the right, Blue's to the left. */
.team-list.red .player-name {
  margin-left: auto;
}

.team-list.red .player-name,
.floater-list.turn-red .player-name {
  background: #ffcdb8; /* a light orangered */
  color: #a8300f;
}

.team-list.blue .player-name,
.floater-list.turn-blue .player-name {
  background: #cfdff2;
  color: #245a96;
}

/* Same font and size in the team lists and the Floater list. */
.team-list .player-name,
.floater-list .player-name {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
}

.floater-list .player-name {
  margin: 0 auto 0.3em;
  background: #e2e2e2;
  color: #000;
}

.team-list .player-name.cluer {
  font-size: 1.5rem;
  margin-bottom: 0.3em;
}

.player-name.absent {
  opacity: 0.45;
  font-style: italic;
}

.player-name.me {
  border-color: #000;
}

/* Subtitle under "Clue Me In", about 75% of its size. */
.board-info {
  grid-area: info;
  text-align: center;
  color: #000;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.4em;
}

#game-view #timer {
  text-align: center;
  font-size: 1.3em;
  margin-bottom: 0.3em;
}

/* Last 30 seconds: a colored background instead of blinking. */
.timer {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 6px;
}

/* Thin black border whenever the timer has a colored background. */
.timer.warning,
.timer.urgent,
.timer.expired {
  border: 1px solid #000;
}

.timer.warning {
  background: #ffe0b2;
}

.timer.urgent {
  background: #ffcdd2;
}

.timer.expired {
  background: #000;
  color: #fff;
}

.last-guess {
  font-size: 0.75em;
  color: #c62828;
  font-weight: bold;
  margin-top: 0.2em;
}

/* Status row lined up with the board's five columns:
   Red End Turn | Red's Turn | score | Blue's Turn | Blue End Turn. */
.status-grid {
  display: grid;
  grid-template-columns: repeat(5, 18%);
  justify-content: space-between;
  align-items: center;
  margin: 0.6em 0 0.8em;
  min-height: 2.6em;
}

.status-grid > div {
  display: flex;
  justify-content: center;
}

.status-grid .score {
  font-size: 1.3em;
  font-weight: bold;
}

.status-grid .red-remaining {
  color: #d13030;
}

.status-grid .blue-remaining {
  color: #4183cc;
}

.turn-banner {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.35em 0;
  border-radius: 6px;
}

.turn-banner.red {
  background: #d13030;
}

.turn-banner.blue {
  background: #4183cc;
}

/* The banner doubles as the End Turn button for players who may click. */
button.turn-banner.end-turn {
  border: none;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

button.turn-banner.end-turn:hover {
  filter: brightness(1.12);
}

button.turn-banner.end-turn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Disabled until the team has made its first guess of the turn. */
button.turn-banner.end-turn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}

/* Toolbar above the score: Safe Click Mode, Floaters Can Click, Modify Game. */
.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4em 1.4em;
  margin: 0.3em 0;
  font-size: 0.95em;
}

.board-toolbar .check {
  display: flex;
  align-items: center;
  gap: 0.35em;
  cursor: help;
}

.board-toolbar button:not(.gear),
.board-bottom .board-buttons button {
  padding: 5px 10px;
  border: 1px #ccc solid;
  border-radius: 5px;
  background: #eee;
  cursor: pointer;
  font-size: 0.95em;
}

.board-bottom .board-buttons button:disabled {
  color: #aaa;
  cursor: default;
}

.board-toolbar button.gear {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* Bottom row: Prev Game | Floaters | Next Board, Next Game. */
.board-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 1em;
  margin-top: 0.8em;
}

/* Prev Board and Next Board at the left, a comfortable gap apart; Next
   Game alone at the right edge of the board. */
.board-bottom .board-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.2em;
}

.board-bottom .board-buttons.right {
  justify-content: flex-end;
}

/* Floaters under the board, one per line, centered. */
.floater-list {
  text-align: center;
}

/* Guess lists under each team, one numbered line per turn. */
.guess-list {
  margin-top: 1.2em;
  color: #333;
  font-size: 0.95em;
}

.guess-list .section-label {
  font-weight: bold;
  margin-bottom: 0.2em;
}

.team-list.red .guess-list .section-label {
  color: #d13030;
}

.team-list.blue .guess-list .section-label {
  color: #4183cc;
}

.guess-turn {
  margin-bottom: 0.2em;
}

.guess-word.red {
  color: #d13030;
}
.guess-word.blue {
  color: #4183cc;
}
.guess-word.neutral {
  color: #000;
}
.guess-word.black {
  color: #000;
  font-weight: bold;
}

/* Words enlarge on mouseover, or under a dragging finger on touch screens. */
.board {
  touch-action: none;
}

.board .cell.hidden-word .word {
  transition: transform 0.1s;
}

.board .cell.hidden-word:hover .word,
.board .cell.hidden-word.touched .word {
  font-weight: bold;
  transform: scale(1.25);
}

/* Marks: Red team's triangles in the left corners, Blue's in the right. */
.cell {
  position: relative;
}

.mark {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

.mark.red.top {
  top: 0;
  left: 0;
  border-width: 16px 16px 0 0;
  border-color: #d13030 transparent transparent transparent;
}

.mark.red.bottom {
  bottom: 0;
  left: 0;
  border-width: 16px 0 0 16px;
  border-color: transparent transparent transparent #d13030;
}

.mark.blue.top {
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-color: transparent #4183cc transparent transparent;
}

.mark.blue.bottom {
  bottom: 0;
  right: 0;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent #4183cc transparent;
}

/* The Assassin stands out clearly on the Cluer (and end-of-game) view. */
.cluegiver .black.hidden-word {
  background: #444 !important;
  color: #fff;
}

/* Session History (D1). */
.popup.extra-wide {
  width: min(1000px, calc(100vw - 32px));
}

.history-scroll {
  max-height: 65vh;
  overflow: auto;
}

.history-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9em;
}

.history-table th {
  position: sticky;
  top: 0;
  background: #f4f4f4;
  text-align: left;
  font-weight: normal;
  padding: 0.35em 0.5em;
}

.history-table td {
  padding: 0.4em 0.5em;
  border-top: 1px solid #e4e4e4;
  vertical-align: top;
}

.history-table td.red {
  color: #d13030;
}

.history-table td.blue {
  color: #4183cc;
}

.history-table .history-cluer {
  font-weight: bold;
}

.history-table td button,
.popup.extra-wide .button-row button,
.popup.wide .button-row.centered button {
  padding: 0.3em 0.7em;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #eee;
  cursor: pointer;
  white-space: nowrap;
}

.popup .button-row.centered {
  display: flex;
  justify-content: center;
  margin-top: 0.8em;
}

.history-turn {
  margin-bottom: 0.3em;
}

.history-guess {
  display: inline-block;
  padding: 0.1em 0.4em;
  margin: 0 0.2em 0.2em 0;
  border-radius: 4px;
  color: #fff;
}

.history-guess.red {
  background: #d13030;
}

.history-guess.blue {
  background: #4183cc;
}

/* The other team's word: its own color plus a thin black outline. */
.history-guess.other-team {
  outline: 3px solid #000;
  outline-offset: -3px;
}

.history-guess.other-team.by-red {
  outline-color: #d13030;
}

.history-guess.other-team.by-blue {
  outline-color: #4183cc;
}

.history-turn .turn-number {
  display: inline-block;
  min-width: 1.6em;
  color: #555;
  font-weight: bold;
}

.history-turn .turn-number.red {
  color: #d13030;
}

.history-turn .turn-number.blue {
  color: #4183cc;
}

.result-team.red {
  color: #d13030;
  font-weight: bold;
}

.result-team.blue {
  color: #4183cc;
  font-weight: bold;
}

.history-guess.assassin {
  background: #000;
}

/* Final board popup: a small read-only board as the Cluers see it. */
.final-board-summary {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.6em;
}

.final-board-summary .red-remaining {
  color: #d13030;
}

.final-board-summary .blue-remaining {
  color: #4183cc;
}

.final-board-summary .final-result {
  color: #333;
  font-weight: normal;
}

.mini-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.mini-cell {
  background: #e8e8e8;
  padding: 0.9em 0.2em;
  text-align: center;
  font-size: 0.8em;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.mini-cell.red.unrevealed {
  color: #d13030;
}
.mini-cell.blue.unrevealed {
  color: #4183cc;
}
.mini-cell.black.unrevealed {
  background: #444;
  color: #fff;
}
.mini-cell.red.revealed {
  background: #d13030;
  color: #fff;
}
.mini-cell.blue.revealed {
  background: #4183cc;
  color: #fff;
}
.mini-cell.neutral.revealed {
  background: #ede2cc;
}
.mini-cell.black.revealed {
  background: #000;
  color: #fff;
}
.mini-cell.hidden {
  color: #333;
}

.graffito {
  text-align: right;
  margin: 1.5em 0 1em;
  color: #555;
  font-size: 1.05em;
}

/* Player popup: buttons centered, with space between them. */
.popup .player-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
}

.popup .player-actions button {
  font-size: 0.9em;
}

/* Switch to Red / Blue buttons in their team colors. */
#start .popup .player-actions button.switch-red,
.popup .player-actions button.switch-red {
  background: #d13030;
  border-color: #a82424;
  color: #fff;
}

#start .popup .player-actions button.switch-blue,
.popup .player-actions button.switch-blue {
  background: #4183cc;
  border-color: #2f68a8;
  color: #fff;
}

.floater-list .section-label {
  font-weight: bold;
  margin-bottom: 0.2em;
}

#mode-toggle {
  gap: 0.5em;
}

#mode-toggle .floaters-toggle {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.4em;
}


/* Side by side above the board (narrow screens): Red's names at the left
   edge, Blue's at the right. (Last in the file so it wins over the rules above.) */
@media (max-width: 1100px) {
  .team-list.red .player-name {
    margin-left: 0;
  }
  .team-list.blue .player-name {
    margin-left: auto;
  }
}

/* Dark mode: the subtitle matches the title. */
.dark-mode .board-info {
  color: #ccc;
}


/* Sound popup (C1): "My Device:" / "All Players:" button and an On/Off switch. */
.sound-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin: 0.8em 0 0.4em;
}

.popup .sound-popup button.sound-scope {
  min-width: 8.5em;
  padding: 0.4em 0.8em;
  font-weight: bold;
  cursor: pointer;
}

.sound-switch {
  position: relative; /* keeps the hidden checkbox inside the switch */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
}

/* The real checkbox stays for keyboard use but is never drawn. */
.sound-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
}

.sound-switch-track {
  display: inline-block; /* a span: needs a box to take its size */
  flex: none;
  position: relative;
  width: 2.8em;
  height: 1.5em;
  border-radius: 1em;
  background: #bbb;
  transition: background 0.15s;
}

.sound-switch-knob {
  display: block;
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: none; /* no ring around the knob */
  box-shadow: none;
  transition: left 0.15s;
}

.sound-switch.on .sound-switch-track {
  background: #2e9e4f;
}

.sound-switch.on .sound-switch-knob {
  left: 1.45em;
}

.sound-switch-label {
  min-width: 2em;
  font-weight: bold;
}


/* Clue chips (Session History and the board's guess lists): the clue in its
   team's color on white, or ****** when none was posted. */
.clue-chip {
  display: inline-block;
  padding: 0.1em 0.3em;
  margin: 0 0.25em 0.2em 0;
  background: #fff;
  font-weight: bold;
}

.clue-chip.red {
  color: #d13030;
}

.clue-chip.blue {
  color: #4183cc;
}

.clue-chip.missing {
  color: #000;
  letter-spacing: 0.05em;
}

/* Neutral guesses look like a revealed neutral word: black on beige. */
.history-guess.neutral {
  background: #ede2cc;
  color: #000;
}

/* The board's guess lists use the same chips, a bit smaller. */
.guess-list .history-turn {
  font-size: 0.85em;
  margin-bottom: 0.25em;
}

/* Clue entry row above the board: the same 5 columns as the board. */
.clue-grid {
  display: grid;
  grid-template-columns: repeat(5, 18%);
  justify-content: space-between;
  margin: -0.3em 0 0.5em;
}

.clue-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.clue-line {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
}

.clue-word {
  flex: 1;
  min-width: 0;
  padding: 0.3em 0.4em;
  font: inherit;
  font-weight: bold;
  color: #000;
  border: 1px solid #bbb;
  border-radius: 4px;
}

.clue-number {
  padding: 0.25em 0.1em;
  font: inherit;
}

.clue-number-fixed {
  min-width: 1.6em;
  text-align: center;
  font-weight: bold;
}

#game-view button.clue-post {
  padding: 0.3em 0.6em;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #eee;
  cursor: pointer;
}

#game-view button.clue-post:disabled {
  color: #aaa;
  cursor: default;
}

/* Both teams' guess lists read left to right (the Red column's names are
   right-aligned toward the board, but its guesses are not). */
.team-list.red .guess-list {
  text-align: left;
}

/* A missing clue (******) that can be clicked to enter it. */
button.clue-chip.missing.add {
  border: 1px dashed #999;
  border-radius: 4px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

button.clue-chip.missing.add:hover {
  background: #f3f3f3;
  border-color: #555;
}

/* The dialog for a missing clue. */
.late-clue .clue-line {
  margin: 0.6em 0 0.8em;
}


/* Beside the board: each turn as a column. Number on the left, then the
   clue (in capitals) and one guess per line, every word starting at the
   same place. */
.history-turn.stacked {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.45em;
}

.history-turn.stacked .turn-number {
  flex: none;
  min-width: 2.2em;
  padding-top: 0.1em;
}

.history-turn.stacked .turn-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  min-width: 0;
}

.history-turn.stacked .clue-chip,
.history-turn.stacked .history-guess {
  margin: 0;
  padding: 0.1em 0.4em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.history-turn.stacked .clue-chip {
  text-transform: uppercase;
}

/* The ****** button's border would shift it by a pixel; keep its text aligned. */
.history-turn.stacked button.clue-chip.missing.add {
  padding-left: calc(0.4em - 1px);
}

/* Session History: the "Show Not Finished" switch, top right. */
.history-options {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5em;
}

.history-options .history-option-label {
  margin-right: 0.2em;
}

/* Session History: times a Cluer / Floater so far, after the name. */
.history-table .role-count {
  font-weight: normal;
  color: #666;
}

/* Clue boxes (clue, "your next clue", and the ****** dialog) are always in
   their team's color: clear for what is typed or posted, subdued for the
   hint ("Clue", "your next clue"), never black or gray. */
.clue-word.red {
  color: #d13030;
}

.clue-word.blue {
  color: #4183cc;
}

.clue-word.red::placeholder {
  color: #ecaaaa;
  font-weight: normal;
  opacity: 1; /* Firefox dims placeholders on its own */
}

.clue-word.blue::placeholder {
  color: #aac7e8;
  font-weight: normal;
  opacity: 1;
}

/* Board buttons colored like their Start page counterparts: Prev/Next
   Board amber (Getting Started), Next Game red (Admin), Modify Game blue,
   Session History teal (Join Video Session). */
.board-toolbar button.btn-amber, .board-toolbar button.btn-red, .board-toolbar button.btn-blue, .board-toolbar button.btn-teal,
.board-bottom .board-buttons button.btn-amber, .board-bottom .board-buttons button.btn-red,
.board-bottom .board-buttons button.btn-blue, .board-bottom .board-buttons button.btn-teal {
  border: 1px solid transparent;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.board-toolbar button.btn-amber, .board-bottom .board-buttons button.btn-amber { background: #e9c46a; color: #2b1d00; }
.board-toolbar button.btn-red, .board-bottom .board-buttons button.btn-red { background: #c62828; }
.board-toolbar button.btn-blue, .board-bottom .board-buttons button.btn-blue { background: #2f6fd6; }
.board-toolbar button.btn-teal, .board-bottom .board-buttons button.btn-teal { background: #1a8fb0; }
.board-toolbar button[class^='btn-']:hover:not(:disabled),
.board-bottom .board-buttons button[class^='btn-']:hover:not(:disabled) { filter: brightness(1.1); }
.board-bottom .board-buttons button[class^='btn-']:disabled { opacity: 0.45; box-shadow: none; }
.board-bottom .board-buttons button.btn-amber:disabled { color: #2b1d00; }