/* ROUND 22 — Forge screen styles (docs/design/round22-gear-forge-ux.md §3).
   Owned by ui/forgeScreen.js. Lives under src/ because serve.py only serves
   /src/, /assets/, /styles.css and /index.html — the stylesheet cannot live
   at the repo root, hence index.html links it as src/ui/forge.css?v=1.

   Every selector below is `pb-fg-`-prefixed so nothing here can collide with
   styles.css or with gearScreen.js's own injected `<style id="pb-gear-
   style">` block. Layout composes the shared `pb-*` vocabulary already
   defined in styles.css (.pb-screen, .pb-header, .pb-body, .pb-footer,
   .pb-panel, .pb-btn*, .pb-chip, .pb-r-*, .pb-sheet*, .pb-card__*) exactly
   like every other screen — this file never edits styles.css. */

/* ---------- explainer + step pips (persistent chrome, design §3) ---------- */
.pb-fg-explainer { font-size: 13px; line-height: 1.4; color: var(--pb-ink-dim); margin: 0 0 8px; }
.pb-fg-steps { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--pb-ink-dim); margin-bottom: 10px; }
.pb-fg-step { text-transform: uppercase; letter-spacing: .3px; }
.pb-fg-step.is-active { color: var(--pb-amber); }
.pb-fg-steps__sep { opacity: .5; }

/* ---------- section labels ("READY TO FORGE", "UPGRADES", "CONSUMED") ---------- */
.pb-fg-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--pb-ink-dim); margin: 10px 0 6px;
}

/* ---------- Step 1: Choose — full-width rows, not a tile grid ---------- */
.pb-fg-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 76px;
  text-align: left; padding: 10px 12px; margin-bottom: 8px;
  border-radius: 14px; background: var(--pb-panel-2); border: 1.5px solid var(--pb-line);
  color: var(--pb-ink); font-family: inherit; cursor: pointer;
}
.pb-fg-row:active { transform: translateY(2px); }
.pb-fg-row--highlight { outline: 2px solid var(--pb-amber); outline-offset: 2px; }
.pb-fg-row__art { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.pb-fg-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pb-fg-row__title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-fg-row__name {
  font-weight: 700; font-size: 14px; max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-fg-row__rule { font-size: 12px; color: var(--pb-ink-dim); line-height: 1.3; }
.pb-fg-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; color: #0E1309;
  background: var(--pb-good, #8FBF4A); border-radius: 8px; padding: 2px 6px;
}

/* ---------- Step 1 row gain line (round24-ux.md §1.1) — "why should I forge?" ---------- */
.pb-fg-row__gain { font-size: 12px; font-weight: 600; color: var(--pb-good, #8FBF4A); line-height: 1.3; }
.pb-fg-row__gain:empty { display: none; }

/* ---------- rarity ladder strip (round25-forge-gear.md §3) ----------
   Replaces the old round24 ×N multiplier cells: six rarity names in colour,
   "better →" at the right, and the Level-1 ATK row underneath. The same
   markup (ui/forgeValue.js ladderStripEl()) is shared by the Gear screen. */
.pb-fg-ladder { margin: 0 0 10px; }
.pb-fg-ladder__names { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pb-fg-ladder__names .pb-rarity-text { font-size: 12px; font-weight: 800; }
.pb-fg-ladder__better { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--pb-ink-dim); white-space: nowrap; }
.pb-fg-ladder__caption { font-size: 12px; color: var(--pb-ink-dim); margin: 4px 0 0; line-height: 1.3; }

/* ---------- empty state (design §3.1) ---------- */
.pb-fg-empty { padding: 24px 12px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pb-fg-empty__title { font-size: 18px; font-weight: 800; color: var(--pb-amber); margin: 0; }
.pb-fg-empty__tally { font-weight: 700; margin: 0; }

/* ---------- Step 2: Feed — target card, feeder slots, preview (design §4.5) ---------- */
.pb-fg-target { position: relative; display: flex; align-items: center; gap: 10px; overflow: visible; }
.pb-fg-role { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--pb-amber); text-transform: uppercase; white-space: nowrap; }

.pb-fg-feeders { display: flex; gap: 8px; }
.pb-fg-feeder {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 12px; background: var(--pb-panel-2); border: 1.5px solid var(--pb-line);
  position: relative; font-size: 10px; color: var(--pb-ink); font-family: inherit; cursor: pointer; text-align: center;
}
.pb-fg-feeder .pb-fg-role { margin-left: 0; }
.pb-fg-feeder .pb-fg-row__name { max-width: 84px; font-size: 10px; }
.pb-fg-feeder--empty { border-style: dashed; opacity: .62; cursor: default; }
.pb-fg-feeder__x { position: absolute; top: 2px; right: 6px; font-size: 13px; line-height: 1; color: var(--pb-ink-dim); }

/* design §1.9 layout budget: 14px -> 12px, offsetting the headline/fight-line
   this round adds below. Same specificity as styles.css's shared .pb-panel
   rule; forge.css loads after styles.css so this wins by source order. */
.pb-fg-preview { padding: 12px; }
/* design §1.9: 3px -> 2px per row, three rows */
.pb-fg-preview__row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
.pb-fg-preview__row > span:first-child { width: 52px; flex: 0 0 auto; color: var(--pb-ink-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; }
.pb-fg-preview__vals { font-weight: 700; }
.pb-fg-preview__delta { font-size: 12px; }
.pb-fg-preview__delta.is-gain { color: var(--pb-good, #8FBF4A); }
.pb-fg-preview__delta.is-loss { color: var(--pb-danger, #E0533F); }
/* design §1.3(b) — the level-cap "(+0%)" case: neither a gain nor a loss. */
.pb-fg-preview__delta.is-flat { color: var(--pb-ink-dim); }

/* ---------- headline + fight line (round24-ux.md §1.3a/§1.3c) ---------- */
.pb-fg-headline { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--pb-ink); margin: 8px 0 6px; }
.pb-fg-fight-line { font-size: 12px; line-height: 1.3; color: var(--pb-ink-dim); margin: 6px 0 0; }

/* ---------- result card restated gain (round24-ux.md §1.4) ---------- */
.pb-fg-result-gain { font-size: 14px; font-weight: 700; color: var(--pb-good, #8FBF4A); text-align: center; margin: 4px 0 0; }

/* ---------- swap sheet rows ---------- */
.pb-fg-swaprow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px;
  border-radius: 12px; background: transparent; border: none; color: var(--pb-ink);
  text-align: left; font-family: inherit; cursor: pointer;
}
.pb-fg-swaprow:active { background: var(--pb-panel-2); }

/* ---------- Step 3: the FORGE payout FX (design §3.3, 0.8s) ---------- */
.pb-fg-fx { position: absolute; inset: -8px; pointer-events: none; z-index: 5; }
.pb-fg-fx__glow {
  position: absolute; inset: 0; border-radius: 16px; opacity: 0;
  transition: opacity .13s ease-out;
  background: radial-gradient(circle, var(--fg-color, #fff) 0%, transparent 72%);
}
.pb-fg-fx__ring {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 3px solid var(--fg-color, #fff); opacity: 0; transform: scale(.2);
}
.pb-fg-fx__ring--go { animation: pb-fg-ring .32s ease-out forwards; }
@keyframes pb-fg-ring { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(3.4); } }
@keyframes pb-fg-hammerbeat { 0% { transform: translateY(0); } 45% { transform: translateY(6px); } 100% { transform: translateY(0); } }
@keyframes pb-fg-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pb-fg-target--pop { animation: pb-fg-pop .28s ease-out; }
.pb-fg-feeder--collapse {
  transition: transform .12s ease-in, opacity .12s ease-in;
  transform: scale(.25) translateY(-30px); opacity: 0; pointer-events: none;
}

/* Reduced motion / Visual Effects "Screen shake" off (design §3.3): the
   collapse and the hammer-beat/pop/ring keyframes are dropped; the glow
   opacity steps, the rarity-chip cross-fade and all four sounds still run —
   forgeScreen.js's own `reduceFx` gate never calls beat()/adds these classes
   in the first place, but this media query is defence in depth for anything
   that slips through (matches styles.css's own .pb-sheet convention). */
@media (prefers-reduced-motion: reduce) {
  .pb-fg-feeder--collapse, .pb-fg-target--pop, .pb-fg-fx__ring--go {
    animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* ---------- Step 3 result: "RARITY UP" (design §4.7; "Rank" retermed per docs/TERMINOLOGY.md's final section) ---------- */
.pb-fg-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 16px; }
.pb-fg-result__title { font-size: 26px; font-weight: 900; letter-spacing: 1px; color: var(--pb-amber); margin: 0; }
.pb-fg-result__art {
  width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--pb-r, var(--pb-amber)) 32%, transparent) 0%, transparent 72%);
  margin-top: 8px;
}