/* ════════════════════════════════════════════════════════
   PASS WIZARD v3 — trading-card players, single roll button
   ════════════════════════════════════════════════════════ */
/* Panel hosts the scaled stage; FitScale (JS) scales .pwiz3 to fit both axes */
#panel-pass .panel-body {
  display:               grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items:         center;
  align-items:           start;
  /* clip (not hidden): same containment but can never be scroll-shifted,
     which previously let dice/frames render offset under controls */
  overflow:              clip !important;
  padding:               0 !important;
}
/* Fixed design size — like the block stage. Its footprint never changes with
   content, so FitScale (window-driven) locks the layout; variable parts scroll. */
.pwiz3 {
  display: flex;
  flex-direction: column;
  width: max-content;   /* sized by the 5 fixed-width stage columns — constant */
  height: 53rem;
  transform-origin: top center;
  will-change: transform;
}
.pwiz3 .pwiz-team-tabs { flex-shrink: 0; }
/* Pitch sizes to its fixed design width so the stage has a natural size to fit */
.pwiz3 .pwiz-pitch-wrap { width: max-content; max-width: none; }

/* Results strip (top, directly under the team tabs). Block-wizard-styled panels —
   large italic headlines + note boxes — tall and legible on tablets/iPad.
   The math no longer lives here; it moved to the roll frame at the bottom. */
.pwiz3-seq {
  flex-shrink: 0;
  margin: 0.5rem 0 0.2rem;
}
.pwiz3-seq-wait {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: rgba(180, 210, 255, 0.55);
  text-align: center;
  padding: 1.4rem 0.4rem;
  background: rgba(6, 14, 40, 0.55);
  border: 1px solid rgba(80, 140, 255, 0.18);
  border-radius: 8px;
}
.pwiz3-results-strip { display: flex; gap: 0.6rem; align-items: stretch; }
.pwiz3-result-panel {
  flex: 1 1 0;
  min-width: 0;
  height: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  background: rgba(10, 22, 65, 0.55);
  border: 1px solid rgba(80, 130, 255, 0.2);
  border-radius: 9px;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 0.25s, border-color 0.25s, box-shadow 0.2s;
}
.pwiz3-result-panel.locked { opacity: 0.4; }
.pwiz3-result-panel.active {
  border-color: rgba(120, 170, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(120,170,255,0.35), 0 0 18px rgba(80,130,255,0.18);
}
.pwiz3-result-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.pwiz3-result-top .bwiz-result-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(150, 185, 255, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwiz3-result-target {
  font-family: 'JetBrains Mono', monospace; font-style: italic; font-weight: 800;
  font-size: 1.55rem; color: var(--bb-gold, #E8C24A); line-height: 1; flex-shrink: 0;
}
.pwiz3-result-panel .bwiz-result-content {
  display: flex; flex-direction: column; gap: 0.35rem;
  flex: 1 1 0; min-height: 0; overflow-y: auto;
}
.pwiz3-result-idle { font-size: 0.7rem; color: rgba(150,185,255,0.4); }
.pwiz3-result-panel .bwiz-result-headline { font-size: 1.2rem; }
.pwiz3-result-roll { font-size: 0.8rem; color: rgba(190,215,255,0.7); }
.pwiz3-result-roll b { font-size: 1.05rem; color: #fff; }

/* Scatter (rendered inside the active result panel).
   Compact dice so 3 scatter dice fit inside the 12rem panel. */
.pwiz3-scatter { margin-top: 0.3rem; --dice-size: 36px; }
.pwiz3-scatter .d8-num { font-size: 1rem; }
.pwiz3-scatter-title {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(180,210,255,0.45); margin-bottom: 0.3rem;
}
.pwiz3-scatter-row { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.pwiz3-scatter-card { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.pwiz3-scatter-res { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: rgba(200,220,255,0.7); }
.pwiz3-scatter-arrow { font-size: 0.8rem; }
.pwiz3-seq-arrow { align-self: center; color: rgba(150, 180, 255, 0.4); font-size: 0.9rem; }

/* Stage: thrower | pitch | catcher (lowered). Center column is the pitch's
   natural width so .pwiz3 has a real size for FitScale to lock the ratio. */
.pwiz3-stage {
  display: grid;
  grid-template-columns: 12em 13.5em max-content 13.5em 12em;
  gap: 0.8rem;
  margin-top: 0.6rem;
  align-items: start;
  flex: 1 1 0;
  min-height: 0;
}
.pwiz3-pitch { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pwiz3-col {
  display: flex; flex-direction: column; gap: 0.45rem; min-width: 0;
  min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden;
}

/* Skill reference cards live in the outer columns (uses the side space) */
.pwiz3-skills-col {
  display: flex; flex-direction: column; gap: 0.5rem;
  min-width: 0; min-height: 0; max-height: 100%;
  overflow-y: auto; overflow-x: hidden;
}
.pwiz3-skills-col .sk-card { padding: 0.55rem 0.65rem; }
.pwiz3-skills-col .sk-card-name { font-size: 0.86rem; }
.pwiz3-skills-col .sk-card-desc { font-size: 0.62rem; line-height: 1.5; }
.pwiz3-col-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(190, 215, 255, 0.6);
}
.pwiz3-card-wrap { width: 100%; }
.pwiz3-card-wrap .bwiz-embedded-card { margin: 0 auto; }
.bwiz-card-small { max-width: 12.5em !important; }
.pwiz3-card-empty {
  aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  color: rgba(150, 185, 255, 0.4);
  border: 1px dashed rgba(80, 130, 255, 0.25); border-radius: 8px;
}

/* Inline roster picker — sits in the card slot (5:7), like the block wizard */
.pwiz3-picker {
  width: 100%; max-width: 12.5em; margin: 0 auto;
  aspect-ratio: 5 / 7;
  background: rgba(10, 22, 65, 0.6);
  border: 1px dashed rgba(80, 130, 255, 0.3);
  border-radius: 7px;
  padding: 0.5rem;
  display: flex; flex-direction: column; overflow: hidden;
}
.pwiz3-picker-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(150, 185, 255, 0.5);
  margin-bottom: 0.45rem; text-align: center;
  flex-shrink: 0;
}
.pwiz3-picker .wps-list { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; }
.pwiz3-pos-note { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(180,210,255,0.5); text-align: center; }
.pwiz3-pos-warn { color: #FFD54F; }

/* Skill cards under the player (card-width) */
.pwiz3-skill-cards { display: flex; flex-direction: column; gap: 0.4rem; max-width: 12.5em; margin: 0 auto; width: 100%; }
.pwiz3-skill-cards .sk-card { padding: 0.5rem 0.6rem; }
.pwiz3-skill-cards .sk-card-name { font-size: 0.82rem; }
.pwiz3-skill-cards .sk-card-desc { font-size: 0.58rem; line-height: 1.5; }
.pwiz3-skill-empty {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(150,185,255,0.4);
  text-align: center; padding: 0.3rem; max-width: 12.5em; margin: 0 auto;
}
.pwiz3-choose-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700;
  color: rgba(210, 230, 255, 0.85); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(100,140,220,0.32); border-radius: 5px;
  padding: 0.35rem 0.6rem; cursor: pointer; width: 100%; max-width: 12.5em;
  margin: 0 auto;
}
.pwiz3-choose-btn:hover { background: rgba(80,130,255,0.16); border-color: rgba(120,170,255,0.55); }

/* Roll frame (under pitch): tools · color-coded math · dice cluster (right) */
.pwiz3-rollframe {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: rgba(6, 14, 40, 0.6);
  border: 1px solid rgba(80, 140, 255, 0.2);
  border-radius: 10px;
}
.pwiz3-frame-left { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; flex-shrink: 0; }

.pwiz3-tool-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 700;
  color: rgba(210, 230, 255, 0.85); background: rgba(255,255,255,0.05);
  border: 1px solid rgba(100,140,220,0.3); border-radius: 5px;
  padding: 0.3rem 0.6rem; cursor: pointer; white-space: nowrap;
}
.pwiz3-tool-btn:hover  { background: rgba(80,130,255,0.16); }
.pwiz3-tool-btn.active { background: rgba(80,130,255,0.3); border-color: rgba(120,170,255,0.6); color: #fff; }

/* Color-coded equation — to the left of the dice, big target near the Roll button */
.pwiz3-math {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-left: 1px solid rgba(80,140,255,0.15);
  border-right: 1px solid rgba(80,140,255,0.15);
}
.pwiz3-math-wait {
  font-family: 'JetBrains Mono', monospace; font-style: italic;
  font-size: 0.78rem; color: rgba(180,210,255,0.5);
}
.pwiz3-math-step {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(150,185,255,0.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwiz3-math-eq {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem;
  font-family: 'JetBrains Mono', monospace; font-style: italic;
}
.pwiz3-math-base { font-size: 1.2rem; font-weight: 800; color: rgba(220,235,255,0.92); }
.pwiz3-math-op   { font-size: 0.85rem; color: rgba(150,180,255,0.4); }
.pwiz3-math-term { display: inline-flex; align-items: baseline; gap: 0.25rem; font-size: 1.2rem; font-weight: 800; }
.pwiz3-math-term small { font-size: 0.58rem; font-weight: 600; font-style: normal; opacity: 0.85; }
.pwiz3-math-term.pos { color: #81e6a0; }   /* helps the roll — lowers the target */
.pwiz3-math-term.neg { color: #ff9aa9; }   /* hurts the roll — raises the target */
.pwiz3-math-eq-sep { font-size: 1.15rem; color: rgba(150,180,255,0.5); padding: 0 0.1rem; }
.pwiz3-math-target {
  font-size: 2.2rem; font-weight: 800; font-style: italic;
  color: var(--bb-gold, #E8C24A); line-height: 1;
}
.pwiz3-math-need { font-size: 0.62rem; font-style: normal; color: rgba(180,210,255,0.5); }
.pwiz3-math-effects { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.pwiz3-math-effect {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-style: italic;
  color: rgba(160,200,255,0.85); background: rgba(80,130,255,0.1);
  border: 1px solid rgba(80,130,255,0.28); border-radius: 4px; padding: 0.12rem 0.4rem;
}

/* Dice cluster (right): die left of a big Roll button; confirm/reroll + skills below */
.pwiz3-frame-roll {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 0.45rem; align-items: stretch;
  min-width: 17rem;
}
.pwiz3-dice-row { display: flex; align-items: center; gap: 0.6rem; }
.pwiz3-dice-slot {
  width: 4rem; height: 4rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pwiz3-roll-btn {
  flex: 1 1 0;
  min-width: 11rem;
  font-size: 1.05rem !important;
  padding: 0.85rem 1.2rem !important;
}
.pwiz3-act-row { display: flex; gap: 0.45rem; }
.pwiz3-act-row .bwiz-confirm-btn,
.pwiz3-act-row .bwiz-rr-action-btn { flex: 1 1 0; }

.pwiz3-skill-slot { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.6rem; }
.pwiz3-skill-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 700;
  color: var(--bb-gold, #E8C24A); background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4); border-radius: 5px;
  padding: 0.3rem 0.6rem; cursor: pointer;
}
.pwiz3-skill-btn:hover { background: rgba(212,175,55,0.22); }

/* Opposing list */
.pwiz3-opp-list { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; max-height: 6rem; overflow-y: auto; }
.pwiz3-opp-row {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(200,220,255,0.7);
}
.pwiz3-opp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwiz3-opp-pos { color: rgba(150,185,255,0.5); }
.pwiz3-opp-rm {
  font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: rgba(255,143,160,0.8);
  background: rgba(200,16,46,0.1); border: 1px solid rgba(200,16,46,0.3);
  border-radius: 4px; padding: 0.12rem 0.4rem; cursor: pointer;
}
.pwiz3-opp-rm:hover { background: rgba(200,16,46,0.22); color: #fff; }

/* Picker chips */
.pwiz3-pick-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 0.54rem;
  padding: 0.1rem 0.35rem; border-radius: 3px;
  background: rgba(120,150,200,0.12); color: rgba(190,210,245,0.7);
  border: 1px solid rgba(120,150,200,0.22);
}
.pwiz3-pick-chip.hi { background: rgba(212,175,55,0.16); color: var(--bb-gold,#E8C24A); border-color: rgba(212,175,55,0.4); }

/* No viewport breakpoints: FitScale (JS) scales the whole fixed-design stage to
   fit any window — phone, iPad, or desktop — so the horizontal layout is
   preserved and scales uniformly, matching the Block and Foul wizards. */