<div class="promotion-dialog-overlay" [class.open]="isOpen">
  <div class="promotion-dialog">
    <div class="promotion-header">
      <h3>Pawn Promotion</h3>
      <button class="app-btn" (click)="close()" aria-label="Close"
        style="padding:0.2rem 0.5rem;min-width:unset;">&times;</button>
    </div>

    <div class="promotion-body">
      <p class="promotion-prompt">Choose a piece to promote your pawn to:</p>

      <div class="promotion-options">
        @for (piece of promotionPieces; track piece.type) {
        <button type="button" class="app-btn promotion-choice" [attr.data-piece]="piece.type"
          (click)="selectPromotion(piece.type)" [title]="piece.label">
          <span class="piece-symbol">{{ piece.symbol }}</span>
          <span class="piece-label">{{ piece.label }}</span>
        </button>
        }
      </div>
    </div>
  </div>
</div>