/* ==========================================================================
   ROUND 36 (decision C) — THE PRE-LEVEL WEAPON PICK.

   The owner: "I'd like the user to get to select a weapon before they start
   each level just like they can select their partner." The confirm card on
   the Trail (ui/levelSelect.js) and on the companion gate
   (ui/companionGate.js) is now the heading "Ready?" over two rows, Partner
   and Weapon, then Yes, go. Change weapon opens the weapon sheet
   (ui/weaponPick.js): one tile per owned main weapon with its art, name, a
   New tag, its card line, its material and rarity, its play-style tag and a
   five-pip Weapon Stage ladder; then the missing mains as silhouettes.

   Every class here is new (`.pb-ready*`, `.pb-wpick*`) or is scoped under
   one, so no existing screen moves. Colours are the existing tokens only.
   Without this file (before index.html links it, orchestrator handoff H1)
   the picker still works on the classes it shares with the companion sheet
   (`.pb-row`, `.pb-sheet`, `.pb-companion`, `.pb-companionSheet__*`,
   `.pb-companionGate__grid`, `.pb-chip`): the rows wrap as plain flex rows,
   the ladder pips read inline ("★2 Range Longer throw, +1 stone"), and a
   locked tile is faded instead of a black silhouette.
   ========================================================================== */

/* ---- The Ready? card --------------------------------------------------- */
.pb-panel.pb-ready { display: flex; flex-direction: column; gap: 8px; }
.pb-ready__title { text-align: center; margin: 0 0 2px; }

/* One row: art on the left, the label over the name in the middle, the
   action on the right, and the sub line (material and rarity) under the name
   and the button both. On a phone the label sits over the name, not in its
   own column: at 375 wide a label column cost the name 62px, and the sub
   line under the name alone wrapped "Rawhide + creek stone · Common" onto
   three lines. */
.pb-row.pb-ready__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "art label action" "art name action" "art sub sub";
  column-gap: 10px; row-gap: 1px; align-items: center; flex-wrap: nowrap;
  padding: 7px 8px; border-radius: var(--pb-radius-sm);
  background: var(--pb-panel-2); border: 1px solid var(--pb-line);
}
.pb-ready__label { grid-area: label; align-self: end; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.pb-ready__art {
  grid-area: art; display: grid; place-items: center; width: 34px; height: 34px; line-height: 0;
}
.pb-ready__txt { grid-area: name; align-self: start; min-width: 0; }
.pb-ready__name { font-size: 14px; line-height: 1.2; overflow-wrap: break-word; }
.pb-ready__subCell { grid-area: sub; min-width: 0; margin-top: 3px; }
.pb-chip.pb-ready__sub {
  max-width: 100%; padding: 2px 8px; border-radius: 8px; font-size: 10.5px; line-height: 1.25;
  white-space: normal; text-transform: none; border-color: var(--pb-r, var(--pb-line));
}
.pb-ready__row > .pb-ready__btn,
.pb-ready__row > .pb-ready__action { grid-area: action; }
.pb-ready__action { display: flex; }
.pb-btn.pb-ready__btn { min-height: 44px; padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }

/* A row with no sub line (the Partner row): no empty third line, and the
   name sits level with the art and the button. */
.pb-row.pb-ready__row--nosub { grid-template-areas: "art label action" "art name action"; }

/* One owned main: no button, the caption takes a full line under the row. */
.pb-row.pb-ready__row--note {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "art label" "art name" "art sub" "note note";
}
.pb-ready__row--note > .pb-ready__action { grid-area: note; justify-content: center; margin-top: 5px; }
.pb-ready__note { margin: 0; font-size: 12px; line-height: 1.35; text-align: center; color: var(--pb-ink-dim); }

.pb-ready__goRow { margin-top: 2px; }
.pb-btn.pb-ready__go { min-width: 60%; }

/* Wider screens: the label gets its own column again, as the design drew it. */
@media (min-width: 560px) {
  .pb-row.pb-ready__row {
    grid-template-columns: 64px 34px minmax(0, 1fr) auto;
    grid-template-areas: "label art name action" "label art sub action";
  }
  .pb-ready__label { align-self: center; }
  .pb-ready__subCell { align-self: start; }
  .pb-row.pb-ready__row--nosub { grid-template-areas: "label art name action"; }
  .pb-ready__row--nosub > .pb-ready__txt { align-self: center; }
  .pb-row.pb-ready__row--note {
    grid-template-columns: 64px 34px minmax(0, 1fr);
    grid-template-areas: "label art name" "label art sub" "note note note";
  }
}

/* ---- The weapon sheet --------------------------------------------------- */
.pb-wpick__summary { margin-bottom: 8px; }
.pb-wpick__grid { gap: 10px; }

/* A tile: head (art | name, card line, chips), then the Weapon Stage ladder
   across the full tile width so each of the five pips gets about 60px at
   375 wide ("aftershock" is the longest word, about 55px at 11px). */
.pb-companion.pb-wpick__tile {
  width: auto; min-height: 0; flex: 0 0 auto;
  align-items: stretch; gap: 6px; padding: 10px 12px; text-align: left;
}
.pb-row.pb-wpick__head {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px;
  align-items: start; flex-wrap: nowrap;
}
.pb-wpick__art {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0;
  border-radius: 10px; background: rgba(0, 0, 0, .25);
  border: 1.5px solid var(--pb-r, var(--pb-line));
}
.pb-wpick__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-wpick__nameRow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-wpick__tile .pb-companion__name.pb-wpick__name {
  max-width: none; font-size: 14px; line-height: 1.2; text-align: left;
}
.pb-chip.pb-wpick__new {
  padding: 1px 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--pb-r-uncommon); border-color: transparent; color: #10240A;
}
/* ROUND 37 (fast-s4-B7): the weapon carried now. */
.pb-chip.pb-wpick__carried {
  padding: 1px 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--pb-amber); color: var(--pb-amber);
}
.pb-wpick__line { font-size: 11.5px; line-height: 1.35; color: var(--pb-ink-dim); font-weight: 400; }
.pb-wpick__chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pb-chip.pb-wpick__rarity,
.pb-chip.pb-wpick__tag {
  padding: 2px 8px; font-size: 10.5px; line-height: 1.25; white-space: normal; text-transform: none;
}
.pb-chip.pb-wpick__rarity { border-color: var(--pb-r, var(--pb-line)); }
.pb-chip.pb-wpick__tag { color: var(--pb-parch); }

/* The five Weapon Stage pips: ★N, then Range or Power (nothing on ★1), then
   the stage's own 2 to 4 words. 11px text, as the work order sets it. */
.pb-wpick__ladderLabel { margin-top: 2px; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.pb-row.pb-wpick__ladder {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; flex-wrap: nowrap;
}
.pb-wpick__pip {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
  padding: 4px 3px 5px; border-radius: 7px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--pb-line);
  font-size: 11px; line-height: 1.2; text-align: center;
}
.pb-wpick__pipStar { font-size: 11px; font-weight: 800; color: var(--pb-amber); }
.pb-wpick__pipAxis {
  min-height: 11px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pb-ink-dim);
}
.pb-wpick__pip[data-axis="range"] .pb-wpick__pipAxis { color: var(--pb-sky); }
.pb-wpick__pip[data-axis="power"] .pb-wpick__pipAxis { color: var(--pb-r-legendary); }
.pb-wpick__pipText { font-size: 11px; font-weight: 600; color: var(--pb-parch); overflow-wrap: break-word; }

/* A missing main: a black silhouette of its art, its name, where it comes
   from. The base `.pb-companion--locked` fade is lifted so the caption stays
   readable; the silhouette does the dimming. */
.pb-companion.pb-wpick__tile--locked { opacity: .85; }
.pb-wpick__art--locked { border-color: var(--pb-line); }
.pb-wpick__art--locked > * { filter: brightness(0) opacity(.5); }
.pb-wpick__tile--locked .pb-wpick__lockLine { text-align: left; font-size: 11px; margin-top: 0; }

/* Desktop: two tiles a row, so all five fit without scrolling at 1280x800. */
@media (min-width: 900px) {
  .pb-companionGate__grid.pb-wpick__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  }
}