<div class="modal" id="combo-modal" role="dialog" aria-modal="true" aria-labelledby="combo-modal-title">
  <div class="modal-content">
    <h3 id="combo-modal-title" style="margin-top:0;">Combos & Synergies — Auto-complete plan</h3>
    <p class="muted" style="margin:.25rem 0 .75rem 0;">You're prioritizing combos. Choose how many to aim for and the balance of early vs late-game pieces.</p>
    <form hx-post="/build/combos/save" hx-target="#combo-modal" hx-swap="outerHTML" style="display:grid; gap:.75rem;">
      <div>
        <label for="combo_count"><strong>How many combos would you like?</strong></label>
        <input id="combo_count" name="count" type="number" min="0" max="10" step="1" value="{{ count|default(2) }}" style="width:6rem; margin-left:.5rem;" />
      </div>
      <fieldset style="border:1px solid var(--border); padding:.5rem; border-radius:8px;">
        <legend><strong>Balance of early-game vs late-game</strong></legend>
        <label style="display:flex; align-items:center; gap:.35rem; margin:.25rem 0;">
          <input type="radio" name="balance" value="early" {% if balance == 'early' %}checked{% endif %}/> Early-game focus (cheap, quick setups)
        </label>
        <label style="display:flex; align-items:center; gap:.35rem; margin:.25rem 0;">
          <input type="radio" name="balance" value="late" {% if balance == 'late' %}checked{% endif %}/> Late-game focus (setup-dependent payoffs)
        </label>
        <label style="display:flex; align-items:center; gap:.35rem; margin:.25rem 0;">
          <input type="radio" name="balance" value="mix" {% if balance == 'mix' or not balance %}checked{% endif %}/> Mix of both
        </label>
      </fieldset>
      <div style="display:flex; gap:.5rem; justify-content:flex-end;">
        <button type="submit" class="btn">Save</button>
        <button type="button" class="btn" hx-post="/build/combos/save" hx-vals='{"skip":"1"}' hx-target="#combo-modal" hx-swap="outerHTML">Dismiss</button>
      </div>
    </form>
  </div>
</div>
