/* Debug/Hotseat (see debug.js). Only what the existing shared stylesheets
   (style.css, theme.css, board.css, cards.css, shared-board.css) don't already
   provide - .tcg-card, .battle-mat, .silo, .hand-row, .mat-zone-area,
   .selectable-target etc. are reused unchanged. */

#debug-board { display: flex; flex-direction: column; gap: 16px; }

#debug-board .player-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

#debug-board .player-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15px;
}

#debug-board .badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-green);
  color: #ffffff;
}

#debug-board .ai-tag { font-size: 11px; color: var(--text-dim); }

#debug-board .tableau-col-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 4px;
}

.debug-seat-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.debug-seat-btn.active { background: var(--accent-green); color: #ffffff; border-color: transparent; }