/* Extra styles shared by the turn-based canvas games (Chain Reaction, Gravity Golf,
   Tile Thieves, Frontline). Loaded after mini.css, which gives the cabinet look. */

.scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-weight: 700;
}

.scores strong {
  color: #ffffff;
}

#status {
  margin: 0;
  min-height: 1.5em;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.x-color { color: var(--x-color, #ff6b6b); }
.o-color { color: var(--o-color, #4dabf7); }

.game-canvas {
  width: min(100%, var(--max-width, 640px));
}

.rules {
  width: min(100%, 640px);
  color: #c3c8ee;
  font-size: 15px;
  line-height: 1.55;
}

.rules summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}

.rules ul {
  margin: 0;
  padding-left: 20px;
}

/* A row of buttons under a board (e.g. Tile Thieves' Play / Pass, Frontline's End turn) */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.actions button {
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #3b4290;
  border-radius: 10px;
  background: #0d1030;
  color: #e6e9ff;
  font: 700 15px system-ui, sans-serif;
  cursor: pointer;
}

.actions button:hover:not(:disabled) {
  border-color: #ffd43b;
}

.actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.actions button.primary {
  border-color: #ffd43b;
  color: #ffd43b;
}

/* Let the board use the page width (the cabinet's .screen otherwise shrinks to fit) */
.screen {
  width: 100%;
}