<div id="pwbc-root">
  <div class="pwbc-wrap">
    <header class="pwbc-head">
      <h2>Palworld Breeding Calculator</h2>
      <p>Pick two parents to see what they'll hatch — or search for a target Pal to see every pair that makes it.</p>
    </header>

    <nav class="pwbc-tabs">
      <button class="pwbc-tab active" data-tab="breed">Breed Two Pals</button>
      <button class="pwbc-tab" data-tab="find">Find Combinations for a Pal</button>
      <button class="pwbc-tab" data-tab="path">Path Finder</button>
      <button class="pwbc-tab" data-tab="tree">Breeding Tree</button>
    </nav>

    <!-- ===== TAB 1: Breed Two Pals ===== -->
    <section class="pwbc-panel" id="pwbc-panel-breed">
      <div class="pwbc-trio">
        <div class="pwbc-slot" id="slot-p1" data-slot="p1">
          <span class="pwbc-slot-label">Parent 1 <span class="pwbc-gender male">&#9794;</span></span>
          <div class="pwbc-slot-body empty">Tap to choose</div>
        </div>
        <div class="pwbc-op">+</div>
        <div class="pwbc-slot" id="slot-p2" data-slot="p2">
          <span class="pwbc-slot-label">Parent 2 <span class="pwbc-gender female">&#9792;</span></span>
          <div class="pwbc-slot-body empty">Tap to choose</div>
        </div>
        <div class="pwbc-op">=</div>
        <div class="pwbc-slot result" id="slot-child">
          <span class="pwbc-slot-label">Child</span>
          <div class="pwbc-slot-body empty" id="child-body">Select both parents</div>
        </div>
      </div>

      <div class="pwbc-picker" id="picker-breed">
        <input type="text" class="pwbc-search" id="search-breed" placeholder="Search for a Pal to assign to the open slot...">
        <div class="pwbc-grid" id="grid-breed"></div>
      </div>
    </section>

    <!-- ===== TAB 2: Find Combinations ===== -->
    <section class="pwbc-panel" id="pwbc-panel-find" style="display:none;">
      <input type="text" class="pwbc-search" id="search-find" placeholder="Search for a target Pal...">
      <div class="pwbc-grid" id="grid-find"></div>
      <div id="find-results"></div>
    </section>

    <!-- ===== TAB 3: Path Finder ===== -->
    <section class="pwbc-panel" id="pwbc-panel-path" style="display:none;">
      <p class="pwbc-note" style="margin-top:0;">Pick a Pal you already have and a target Pal — this finds the shortest chain of breeding steps (each step pairs your current Pal with any other catchable Pal) to reach it.</p>
      <div class="pwbc-trio" style="grid-template-columns:1fr auto 1fr;">
        <div class="pwbc-slot" id="slot-path-start" data-slot="start">
          <span class="pwbc-slot-label">Start Pal (you own)</span>
          <div class="pwbc-slot-body empty">Tap to choose</div>
        </div>
        <div class="pwbc-op">&#8594;</div>
        <div class="pwbc-slot" id="slot-path-target" data-slot="target">
          <span class="pwbc-slot-label">Target Pal</span>
          <div class="pwbc-slot-body empty">Tap to choose</div>
        </div>
      </div>
      <div class="pwbc-picker" id="picker-path">
        <input type="text" class="pwbc-search" id="search-path" placeholder="Search for a Pal to assign to the open slot...">
        <div class="pwbc-grid" id="grid-path"></div>
      </div>
      <div id="path-results"></div>
    </section>

    <!-- ===== TAB 4: Breeding Tree ===== -->
    <section class="pwbc-panel" id="pwbc-panel-tree" style="display:none;">
      <p class="pwbc-note" style="margin-top:0;">Search a target Pal to see one valid parent pairing. Click "other pairs" on any node to swap its parents, or "+ expand" on a parent to keep tracing its own lineage back.</p>
      <input type="text" class="pwbc-search" id="search-tree" placeholder="Search for a target Pal...">
      <div class="pwbc-grid" id="grid-tree"></div>
      <div id="tree-results"></div>
    </section>
  </div>
</div>