/* ============================================================
   Blood Bowl Companion — css/pitch.css
   PitchGrid pass-distance selector + Pass wizard step UI
   ============================================================ */

/* ── Pitch grid ── */

.pitch-wrap {
  position: relative;
  width:    100%;
}

.pitch-grid {
  display:               grid;
  grid-template-columns: repeat(13, 1fr);
  gap:                   1px;
  background:            rgba(10, 20, 50, 0.85);
  border:                1px solid rgba(80, 130, 255, 0.2);
  border-radius:         4px;
  overflow:              hidden;
  position:              relative;
  user-select:           none;
  -webkit-user-select:   none;
}

.pitch-cell {
  aspect-ratio:    1 / 1;
  min-width:       24px;
  min-height:      24px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  position:        relative;
  transition:      background 0.08s;
}

.pitch-cell:hover:not(.is-thrower) {
  background: rgba(255, 255, 255, 0.2) !important;
  z-index: 1;
}

/* Range zone backgrounds */
.range-thrower-cell { background: rgba(212, 175, 55, 0.1);  cursor: default; }
.range-quick        { background: rgba(76,  175, 80,  0.14); }
.range-short        { background: rgba(255, 193, 7,   0.13); }
.range-long         { background: rgba(255, 140, 0,   0.13); }
.range-bomb         { background: rgba(200, 16,  46,  0.14); }

/* Blizzard overlay on Long and Long Bomb squares */
.pitch-cell.blizzard-blocked {
  background: rgba(120, 170, 255, 0.18) !important;
}
.pitch-cell.blizzard-blocked::after {
  content:     '✕';
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       rgba(140, 190, 255, 0.6);
  font-size:   0.65rem;
  font-weight: 900;
  pointer-events: none;
}

/* Tokens */
.pitch-token {
  width:          58%;
  height:         58%;
  border-radius:  50%;
  pointer-events: none;
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
}

.pitch-token-thrower {
  background: var(--bb-gold, #D4AF37);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
}

.pitch-token-catcher {
  background:   transparent;
  border:       2px solid var(--bb-gold, #D4AF37);
  box-shadow:   0 0 6px rgba(212, 175, 55, 0.45);
}

.pitch-token-catcher.dim {
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow:   none;
}

/* Catcher number label */
.pitch-catcher-label {
  position:       absolute;
  bottom:         1px;
  right:          2px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.45rem;
  font-weight:    900;
  color:          var(--bb-gold, #D4AF37);
  pointer-events: none;
  line-height:    1;
}

/* Thrower "moving" state — pulse to indicate awaiting destination tap */
@keyframes throwerPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.7); }
  50%      { box-shadow: 0 0 18px rgba(212, 175, 55, 1), 0 0 6px rgba(212, 175, 55, 0.9); }
}
.is-thrower-moving .pitch-token-thrower {
  animation: throwerPulse 0.6s ease-in-out infinite;
}
.is-thrower-moving {
  cursor: crosshair !important;
}

/* Scatter path overlay */
.scatter-target { background: rgba(255, 193,   7, 0.28) !important; }
.scatter-path   { background: rgba(200, 140,  50, 0.20) !important; }
.scatter-land   {
  background: rgba(200,  16,  46, 0.32) !important;
  box-shadow:  inset 0 0 0 1.5px rgba(200, 16, 46, 0.75);
}

/* SVG pass line */
.pitch-svg {
  position:       absolute;
  top:            0;
  left:           0;
  pointer-events: none;
}

/* Legend */
.pitch-legend {
  display:    flex;
  gap:        0.5rem;
  flex-wrap:  wrap;
  margin-top: 0.45rem;
}
.pitch-legend-item {
  display:     flex;
  align-items: center;
  gap:         0.28rem;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.6rem;
  color:       rgba(180, 210, 255, 0.6);
}
.pitch-legend-swatch {
  width:         9px;
  height:        9px;
  border-radius: 2px;
  flex-shrink:   0;
}
.swatch-quick { background: rgba(76,  175, 80,  0.6); }
.swatch-short { background: rgba(255, 193, 7,   0.6); }
.swatch-long  { background: rgba(255, 140, 0,   0.6); }
.swatch-bomb  { background: rgba(200, 16,  46,  0.6); }

/* ════════════════════════════════════════════════════════
   PASS WIZARD STEP UI
   ════════════════════════════════════════════════════════ */

/* Persistent summary strip */
.pass-summary-strip {
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
  flex-wrap:     wrap;
  padding:       0.38rem 0.7rem;
  background:    rgba(4, 10, 28, 0.55);
  border:        1px solid rgba(80, 130, 255, 0.18);
  border-radius: 4px;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.7rem;
  color:         rgba(180, 210, 255, 0.65);
  margin-bottom: 0.55rem;
}
.pass-sum-name   { color: var(--bb-gold, #D4AF37); font-weight: 700; }
.pass-sum-sep    { opacity: 0.35; }
.pass-sum-range  { font-weight: 600; color: rgba(200, 220, 255, 0.8); }
.pass-sum-result { font-weight: 700; }
.pass-sum-result.ok  { color: #81c784; }
.pass-sum-result.bad { color: #ff8fa0; }

/* Step indicator row */
.pass-step-indicator {
  display:         flex;
  overflow-x:      auto;
  scrollbar-width: none;
  margin-bottom:   0.55rem;
}
.pass-step-indicator::-webkit-scrollbar { display: none; }

.pass-step-pip {
  flex:        0 0 auto;
  padding:     0.2rem 0.42rem;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.58rem;
  font-weight: 700;
  background:  rgba(4, 10, 28, 0.6);
  border:      1px solid rgba(80, 130, 255, 0.14);
  border-right: none;
  color:       rgba(130, 160, 220, 0.35);
  white-space: nowrap;
  cursor:      default;
}
.pass-step-pip:first-child { border-radius: 4px 0 0 4px; }
.pass-step-pip:last-child  { border-right: 1px solid rgba(80, 130, 255, 0.14); border-radius: 0 4px 4px 0; }
.pass-step-pip.pip-done    { color: rgba(212, 175, 55, 0.55); }
.pass-step-pip.pip-current {
  background:   rgba(80, 130, 255, 0.18);
  border-color: rgba(80, 130, 255, 0.35);
  color:        rgba(200, 225, 255, 0.9);
}

/* Step headings */
.pwiz-step-title {
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.8rem;
  font-weight:   800;
  font-style:    italic;
  color:         rgba(220, 235, 255, 0.88);
  margin-bottom: 0.5rem;
}

/* Nav buttons */
.pass-nav {
  display:    flex;
  gap:        0.5rem;
  margin-top: 0.75rem;
  flex-wrap:  wrap;
}
.pass-nav-btn {
  padding:       0.38rem 0.85rem;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.75rem;
  font-weight:   700;
  border:        1px solid rgba(80, 130, 255, 0.28);
  border-radius: 4px;
  background:    rgba(80, 130, 255, 0.1);
  color:         rgba(160, 200, 255, 0.8);
  cursor:        pointer;
  transition:    background 0.12s, color 0.12s;
}
.pass-nav-btn:hover:not(:disabled) { background: rgba(80, 130, 255, 0.22); color: #fff; }
.pass-nav-btn:disabled { opacity: 0.3; cursor: default; }
.pass-nav-btn.nav-primary {
  background:   rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  color:        var(--bb-gold, #D4AF37);
}
.pass-nav-btn.nav-primary:hover:not(:disabled) { background: rgba(212, 175, 55, 0.22); }

/* Range result chip (inline in step 3) */
.range-result-display {
  margin-top:    0.6rem;
  padding:       0.5rem 0.75rem;
  background:    rgba(3, 8, 28, 0.7);
  border:        1px solid rgba(80, 130, 255, 0.18);
  border-radius: 5px;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.78rem;
}
.range-num {
  font-size:   1.6rem;
  font-weight: 800;
  color:       var(--bb-gold, #D4AF37);
  line-height: 1;
}
.range-label-text {
  font-weight: 700;
  margin-top:  0.15rem;
}
.range-label-text.range-quick { color: #81c784; }
.range-label-text.range-short { color: #FFD54F; }
.range-label-text.range-long  { color: #FF8C00; }
.range-label-text.range-bomb  { color: #ff8fa0; }

/* Skill chips in modifier step */
.pwiz-mod-row {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  flex-wrap:   wrap;
  margin:      0.3rem 0;
}
.pwiz-skill-chip {
  display:     inline-flex;
  align-items: center;
  gap:         0.2rem;
  padding:     0.18rem 0.5rem;
  border:      1px solid rgba(80, 130, 255, 0.28);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.65rem;
  font-weight: 700;
  color:       rgba(160, 200, 255, 0.85);
  background:  rgba(80, 130, 255, 0.1);
}
.pwiz-skill-chip.pos { border-color: rgba(76, 175, 80, 0.4);  color: #81c784; background: rgba(76, 175, 80, 0.08); }
.pwiz-skill-chip.neg { border-color: rgba(200, 16, 46, 0.4); color: #ff8fa0; background: rgba(200, 16, 46, 0.08); }

/* TZ counter */
.tz-counter {
  display:     flex;
  align-items: center;
  gap:         0.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.75rem;
}
.tz-btn {
  width:         26px;
  height:        26px;
  border:        1px solid rgba(80, 130, 255, 0.3);
  border-radius: 3px;
  background:    rgba(80, 130, 255, 0.1);
  color:         rgba(160, 200, 255, 0.8);
  font-size:     1rem;
  line-height:   1;
  cursor:        pointer;
}
.tz-val {
  min-width:   24px;
  text-align:  center;
  font-weight: 800;
  color:       var(--bb-gold, #D4AF37);
}

/* Live target display in modifiers step */
.pwiz-target-bar {
  display:       flex;
  align-items:   baseline;
  gap:           0.4rem;
  padding:       0.4rem 0.65rem;
  background:    rgba(3, 8, 28, 0.6);
  border:        1px solid rgba(80, 130, 255, 0.15);
  border-radius: 4px;
  margin-top:    0.5rem;
  font-family:   'JetBrains Mono', monospace;
}
.pwiz-target-num {
  font-size:   1.8rem;
  font-weight: 800;
  color:       var(--bb-gold, #D4AF37);
  line-height: 1;
}
.pwiz-target-note {
  font-size: 0.68rem;
  color:     rgba(180, 210, 255, 0.6);
}

/* Roster team tabs in thrower/catcher selection */
.pwiz-team-tabs {
  display:       flex;
  gap:           0;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid rgba(80, 130, 255, 0.18);
}
.pwiz-team-tab {
  padding:     0.28rem 0.65rem;
  font-family: 'JetBrains Mono', monospace;
  font-size:   0.68rem;
  font-weight: 700;
  background:  transparent;
  border:      none;
  color:       rgba(140, 170, 220, 0.45);
  cursor:      pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:  color 0.12s, border-color 0.12s;
}
.pwiz-team-tab.active {
  color:         rgba(212, 175, 55, 0.9);
  border-bottom-color: rgba(212, 175, 55, 0.5);
}

/* ── Pre-pass roll summary strip ── */

.prepass-strip {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           0.3rem;
  padding:       0.45rem 0.7rem;
  background:    rgba(3, 8, 24, 0.7);
  border:        1px solid rgba(80, 130, 255, 0.2);
  border-radius: 5px;
  margin-bottom: 0.7rem;
  font-family:   'JetBrains Mono', monospace;
}

.prepass-arrow {
  color:       rgba(140, 170, 220, 0.4);
  font-size:   0.75rem;
  font-weight: 700;
}

.prepass-chip {
  display:       inline-flex;
  align-items:   baseline;
  gap:           0.3rem;
  padding:       0.22rem 0.55rem;
  border-radius: 4px;
  font-size:     0.72rem;
  font-weight:   800;
  border:        1px solid transparent;
}

.throw-chip {
  background:   rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
  color:        var(--bb-gold, #D4AF37);
}

.int-chip {
  background:   rgba(200, 16, 46, 0.1);
  border-color: rgba(200, 16, 46, 0.3);
  color:        #ff8fa0;
}

.catch-chip {
  background:   rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.3);
  color:        #81c784;
}

.prepass-sub {
  font-size:   0.58rem;
  font-weight: 600;
  opacity:     0.7;
}

/* ── Horizontal action row (throw / intercept / catch side-by-side) ── */

.pwiz-action-row {
  display:       flex;
  align-items:   flex-start;
  gap:           0;
  margin-top:    0.15rem;
  flex-wrap:     wrap;
}

.pwiz-action-arrow {
  align-self:    center;
  padding:       0 0.25rem;
  color:         rgba(140, 170, 220, 0.35);
  font-size:     0.9rem;
  font-weight:   700;
  flex-shrink:   0;
}

.pwiz-action-col {
  flex:          1;
  min-width:     80px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  gap:           0.2rem;
  padding:       0.35rem 0.25rem;
  background:    rgba(3, 8, 24, 0.45);
  border:        1px solid rgba(80, 130, 255, 0.14);
  border-radius: 5px;
}

.pwiz-action-chip {
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.62rem;
  font-weight:   700;
  padding:       0.2rem 0.4rem;
  border-radius: 3px;
  line-height:   1.4;
  width:         100%;
}

.pwiz-action-target {
  font-size:   1rem;
  font-weight: 900;
  display:     block;
  line-height: 1.1;
  margin-top:  0.1rem;
}

.pwiz-action-sub {
  font-size:   0.52rem;
  font-weight: 500;
  opacity:     0.65;
  display:     block;
}

.chip-throw   { background: rgba(212,175,55,0.1);  color: var(--bb-gold,#D4AF37);  border: 1px solid rgba(212,175,55,0.3); }
.chip-int     { background: rgba(200,16,46,0.1);   color: #ff8fa0;                border: 1px solid rgba(200,16,46,0.3); }
.chip-catch   { background: rgba(76,175,80,0.1);   color: #81c784;                border: 1px solid rgba(76,175,80,0.3); }
.chip-scatter { background: rgba(130,90,220,0.1);  color: rgba(180,150,255,0.85); border: 1px solid rgba(130,90,220,0.3); }

.pwiz-action-die  { min-height: 24px; display: flex; align-items: center; justify-content: center; }
.pwiz-action-result {
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.62rem;
  text-align:    center;
  width:         100%;
}
.pwiz-action-result .result-roll-num {
  font-size:   1.3rem;
  font-weight: 900;
  color:       var(--bb-gold, #D4AF37);
  line-height: 1;
}

/* ════════════════════════════════════════════════════════
   PASS WIZARD 3B — Single-screen two-column layout
   ════════════════════════════════════════════════════════ */

.bb-panel--wide {
  max-width: 900px;
  width: calc(100vw - 2rem);
}

@media (max-width: 900px) {
  .bb-panel--wide { max-width: 100%; }
}

/* Two-column layout */
.pwiz-layout {
  display:   flex;
  gap:       0.75rem;
  align-items: flex-start;
}

.pwiz-col-left {
  flex:      0 0 200px;
  min-width: 0;
}

.pwiz-col-right {
  flex:    1;
  min-width: 0;
}

@media (max-width: 599px) {
  .pwiz-layout { flex-direction: column; }
  .pwiz-col-left { flex: none; width: 100%; }
}

/* Player list section */
.pwiz-list-sec { margin-bottom: 0.5rem; }

.pwiz-list-hdr {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  font-family:    'JetBrains Mono', monospace;
  font-weight:    700;
  font-size:      0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          rgba(130, 165, 235, 0.55);
  margin-bottom:  0.25rem;
}

.pwiz-stat-lbl {
  color:       var(--bb-gold, #D4AF37);
  font-weight: 800;
}

.pwiz-player-list { display: flex; flex-direction: column; gap: 2px; }

.pwiz-player-row {
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
  padding:       0.28rem 0.5rem;
  background:    rgba(10, 22, 65, 0.45);
  border:        1px solid rgba(70, 110, 200, 0.2);
  border-radius: 4px;
  text-align:    left;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.68rem;
  color:         rgba(180, 210, 255, 0.75);
  cursor:        pointer;
  transition:    background 0.1s, border-color 0.1s;
  width:         100%;
}

.pwiz-player-row:hover {
  background:   rgba(40, 80, 175, 0.4);
  border-color: rgba(100, 155, 255, 0.5);
}

.pwiz-player-row.selected {
  background:   rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.55);
  color:        var(--bb-gold, #D4AF37);
}

.pwiz-player-row.dimmed { opacity: 0.4; }

.pwiz-row-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwiz-row-pos  { font-size: 0.58rem; color: rgba(140, 175, 235, 0.45); flex-shrink: 0; }
.pwiz-row-stat {
  flex-shrink:  0;
  font-weight:  800;
  color:        var(--bb-gold, #D4AF37);
  min-width:    2rem;
  text-align:   right;
}
.pwiz-row-stat.pwiz-stat-none { color: rgba(150, 170, 220, 0.4); }

/* Requirements block */
.pwiz-requirements {
  margin-top:   0.4rem;
  padding:      0.5rem 0.7rem;
  background:   rgba(3, 8, 28, 0.6);
  border:       1px solid rgba(80, 130, 255, 0.15);
  border-radius: 5px;
  font-family:  'JetBrains Mono', monospace;
  font-size:    0.72rem;
  min-height:   2.5rem;
}

/* Pitch wrapper — constrain width so pitch fits */
.pwiz-pitch-wrap {
  max-width: 100%;
  overflow:  hidden;
}

/* ── Sprint 5: Re-roll counter in left column ────────────── */
.pwiz-reroll-counter {
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
  padding:        0.25rem 0.5rem;
  margin-bottom:  0.4rem;
  background:     rgba(80,130,255,0.07);
  border:         1px solid rgba(80,130,255,0.18);
  border-radius:  4px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.62rem;
}
.pwiz-rr-label { color: rgba(180,210,255,0.45); flex: 1; }
.pwiz-rr-num   {
  font-weight:  900;
  font-size:    1.0rem;
  color:        rgba(212,175,55,0.9);
  min-width:    1.2rem;
  text-align:   right;
}
.pwiz-rr-num.pwiz-rr-none { color: rgba(200,16,46,0.7); }
.pwiz-rr-used {
  font-size:  0.52rem;
  color:      rgba(255,150,100,0.6);
  font-style: italic;
}

/* ── Sprint 3: Modifier breakdown table ──────────────────── */
.pwiz-mod-breakdown {
  margin:        0.35rem 0 0.15rem;
  border-left:   2px solid rgba(80,130,255,0.2);
  padding-left:  0.5rem;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.6rem;
}
.pwiz-mod-breakdown .pwiz-mod-row {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           0.5rem;
  padding:       0.08rem 0;
  color:         rgba(180,210,255,0.55);
}
.pwiz-mod-breakdown .pwiz-mod-row.neg   { color: #ff8fa0; }
.pwiz-mod-breakdown .pwiz-mod-row.pos   { color: #81c784; }
.pwiz-mod-breakdown .pwiz-mod-row.final {
  color:         rgba(212,175,55,0.9);
  font-weight:   800;
  font-size:     0.68rem;
  border-top:    1px solid rgba(80,130,255,0.15);
  margin-top:    0.1rem;
  padding-top:   0.15rem;
}
.pwiz-mod-label { flex: 1; }
.pwiz-mod-value { text-align: right; flex-shrink: 0; min-width: 2.5rem; }

/* ── Sprint 3: Inline skill chip (in modifier rows / re-roll buttons) ── */
.pwiz-skill-inline {
  display:        inline-flex;
  align-items:    center;
  padding:        0.08rem 0.35rem;
  border-radius:  3px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      0.6rem;
  font-weight:    700;
  cursor:         help;
  position:       relative;
  vertical-align: middle;
}

/* Tooltip bubble shown on click/tap */
.pwiz-skill-tooltip {
  position:      absolute;
  bottom:        calc(100% + 4px);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       99;
  width:         220px;
  padding:       0.5rem 0.65rem;
  background:    rgba(6,12,36,0.97);
  border:        1px solid rgba(80,130,255,0.4);
  border-radius: 5px;
  font-family:   'JetBrains Mono', monospace;
  font-size:     0.6rem;
  font-weight:   400;
  color:         rgba(200,220,255,0.85);
  line-height:   1.45;
  white-space:   normal;
  text-align:    left;
  pointer-events: none;
  box-shadow:    0 4px 16px rgba(0,0,30,0.7);
}