/* =============================================
   BAM Companion App — scoped under .bam-app
   ============================================= */

.bam-app {
  --bam-green:      #68724D;
  --bam-green-dark: #4a5136;
  --bam-green-lite: #8a9660;
  --bam-tan:        #E8DBB7;
  --bam-tan-lite:   #F4F1EC;
  --bam-red:        #BB3D43;
  --bam-red-dark:   #8c2d31;
  --bam-white:      #ffffff;
  --bam-gray:       #555;
  --bam-shadow:     0 4px 16px rgba(0,0,0,0.22);

  background: var(--bam-green-dark);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 48px;
  font-family: 'Black Ops One', 'Arial Black', Arial, sans-serif;
}

/* ---- SCREENS ---- */
.bam-app .bam-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  min-height: 70vh;
  padding: 28px 16px 48px;
  color: var(--bam-tan-lite);
}
.bam-app .bam-screen.active { display: flex; }

/* ---- HEADER ---- */
.bam-app .ba-head {
  text-align: center;
  margin-bottom: 24px;
}
.bam-app .ba-head h2 {
  font-size: 1.4rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bam-tan);
  line-height: 1.2;
  font-family: 'Black Ops One', cursive;
}
.bam-app .ba-head .ba-sub {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--bam-green-lite);
  text-transform: uppercase;
  margin-top: 4px;
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
}

/* ---- CARDS ---- */
.bam-app .ba-card {
  background: var(--bam-tan-lite);
  color: var(--bam-green-dark);
  border-radius: 10px;
  padding: 18px;
  width: 100%;
  margin-bottom: 14px;
  box-shadow: var(--bam-shadow);
}
.bam-app .ba-card h3 {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  margin-bottom: 10px;
  border-bottom: 2px solid var(--bam-green);
  padding-bottom: 5px;
  font-family: 'Black Ops One', cursive;
}
.bam-app .ba-card p {
  font-size: 0.88rem;
  color: var(--bam-gray);
  line-height: 1.5;
  font-family: 'Barlow', sans-serif;
}

/* ---- BUTTONS ---- */
.bam-app .ba-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Black Ops One', cursive;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.1s, opacity 0.1s;
}
.bam-app .ba-btn:active { transform: scale(0.97); opacity: 0.9; }
.bam-app .ba-btn-primary   { background: var(--bam-green); color: var(--bam-tan-lite); }
.bam-app .ba-btn-secondary { background: var(--bam-red);   color: var(--bam-white); }
.bam-app .ba-btn-ghost     { background: transparent; color: var(--bam-tan); border: 2px solid var(--bam-tan); }
.bam-app .ba-btn-cpu       { background: #2e4a7a; color: var(--bam-white); }
.bam-app .ba-btn:disabled  { opacity: 0.4; cursor: not-allowed; }

/* ---- INPUTS ---- */
.bam-app input[type="text"],
.bam-app select {
  width: 100%;
  padding: 13px;
  border-radius: 7px;
  border: 2px solid var(--bam-green);
  background: var(--bam-white);
  font-size: 1.05rem;
  font-family: 'Black Ops One', cursive;
  color: var(--bam-green-dark);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}
.bam-app input::placeholder { color: #aaa; letter-spacing: 1px; font-family: 'Barlow', sans-serif; }

/* ---- ROOM CODE ---- */
.bam-app .ba-room-code {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 10px;
  color: var(--bam-red);
  text-align: center;
  padding: 14px 0;
  font-family: 'Courier New', monospace;
}
.bam-app .ba-room-label {
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bam-gray);
  text-align: center;
  margin-bottom: 4px;
  font-family: 'Barlow', sans-serif;
}

/* ====================================================
   TEAM NAME INPUTS (Create / CPU Create screens)
   ==================================================== */
.bam-app .ba-tn-opt {
  font-family: 'Barlow', sans-serif; font-size: 0.65rem; font-weight: 400;
  letter-spacing: 1px; color: rgba(232,219,183,.4); text-transform: uppercase;
  margin-left: 7px;
}
.bam-app .ba-tn-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bam-app .ba-tn-lbl {
  font-family: 'Black Ops One', cursive; font-size: 0.6rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(232,219,183,.5); white-space: nowrap; width: 48px; flex-shrink: 0;
}
.bam-app .ba-tn-input {
  flex: 1; padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(104,114,77,.4);
  background: rgba(0,0,0,.18); color: var(--bam-tan);
  font-family: 'Barlow', sans-serif; font-size: 0.88rem;
  outline: none; transition: border-color 0.15s;
}
.bam-app .ba-tn-input::placeholder { color: rgba(232,219,183,.25); font-style: italic; }
.bam-app .ba-tn-input:focus { border-color: var(--bam-green); }

/* Team names display in lobby */
.bam-app .ba-lobby-tn {
  font-family: 'Black Ops One', cursive; letter-spacing: 2px;
  font-size: 0.78rem; text-align: center; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bam-app .ba-lobby-tn-tan  { color: var(--bam-tan); }
.bam-app .ba-lobby-tn-grn  { color: var(--bam-green-lite); }
.bam-app .ba-lobby-tn-sep  { color: rgba(232,219,183,.3); font-size: 0.6rem; }

/* ---- SCOREBOARD ---- */
.bam-app .ba-scoreboard {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}
.bam-app .ba-score-box {
  flex: 1;
  background: var(--bam-green-dark);
  border: 2px solid var(--bam-green);
  border-radius: 8px;
  padding: 9px 5px;
  text-align: center;
}
.bam-app #ba-lbl-away,
.bam-app #ba-lbl-home {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 88px;
}
.bam-app .ba-score-box .ba-lbl {
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-lite);
  font-family: 'Barlow', sans-serif;
}
.bam-app .ba-score-box .ba-val {
  font-size: 1.7rem;
  color: var(--bam-tan);
  line-height: 1;
  margin-top: 2px;
}
.bam-app .ba-score-box.ba-hl .ba-val { color: var(--bam-red); }

/* ====================================================
   FIELD PANEL — diamond + outs in one card
   ==================================================== */
.bam-app .ba-field-panel {
  width: 100%;
  background: #2e3820;
  border: 2px solid var(--bam-green);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- BASEBALL DIAMOND ---- */
.bam-app .ba-diamond-wrap {
  flex-shrink: 0;
  position: relative;
  width: 110px;
  height: 110px;
}

/* grass background circle */
.bam-app .ba-diamond-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #3a4a27;
  border: 1px solid #4a5a30;
}

/* base squares — rotated diamonds */
.bam-app .ba-base-sq {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,0.35);
  background: transparent;
  transform: rotate(45deg);
  transition: background 0.15s, border-color 0.15s;
}
.bam-app .ba-base-sq.runner {
  background: var(--bam-tan);
  border-color: var(--bam-tan);
  box-shadow: 0 0 8px rgba(232,219,183,0.6);
}

/* Position each base: center of 110px container */
/* 2nd: top-center */
.bam-app .ba-base-sq.ba-b2  { top: 6px;  left: 44px; }
/* 3rd: left-center */
.bam-app .ba-base-sq.ba-b3  { top: 44px; left: 6px;  }
/* 1st: right-center */
.bam-app .ba-base-sq.ba-b1  { top: 44px; left: 82px; }
/* home: bottom-center — pentagon shape via clip-path */
.bam-app .ba-home-plate {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 50% 100%, 0% 65%);
  border: none;
}

/* base path lines */
.bam-app .ba-diamond-wrap .ba-base-line {
  position: absolute;
  background: rgba(255,255,255,0.12);
  transform-origin: center;
}

/* runner dot overlay inside base */
.bam-app .ba-runner-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a09060;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.bam-app .ba-base-sq.runner .ba-runner-dot { display: block; }

/* base labels */
.bam-app .ba-base-lbl {
  position: absolute;
  font-family: 'Barlow', sans-serif;
  font-size: 0.45rem;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
}
.bam-app .ba-base-lbl.lbl-2 { top: -1px;  left: 50%; transform: translateX(-50%); }
.bam-app .ba-base-lbl.lbl-3 { top: 48px;  left: -4px; }
.bam-app .ba-base-lbl.lbl-1 { top: 48px;  right: -4px; }
.bam-app .ba-base-lbl.lbl-h { bottom: 0;  left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.25); }

/* ---- OUTS PANEL ---- */
.bam-app .ba-outs-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bam-app .ba-outs-lbl {
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-lite);
}
.bam-app .ba-outs-dots {
  display: flex;
  gap: 8px;
}
.bam-app .ba-out-pip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-family: 'Barlow', sans-serif;
  color: transparent;
}
.bam-app .ba-out-pip.on {
  background: var(--bam-red);
  border-color: var(--bam-red);
  color: white;
}
.bam-app .ba-out-pip.on::after {
  content: 'OUT';
  font-size: 0.38rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

/* ====================================================
   PITCH TYPE BUTTONS — with baseball icons
   ==================================================== */
.bam-app .ba-pitch-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}
.bam-app .ba-pitch-btn {
  flex: 1;
  padding: 11px 7px;
  border-radius: 7px;
  border: 3px solid var(--bam-green);
  background: var(--bam-white);
  font-size: 0.75rem;
  font-family: 'Black Ops One', cursive;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.bam-app .ba-pitch-btn img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
.bam-app .ba-pitch-btn .ba-pitch-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.bam-app .ba-pitch-btn.sel { background: var(--bam-green); color: var(--bam-white); }
.bam-app .ba-pitch-btn.sel img { filter: brightness(0) invert(1) opacity(0.9); }

/* Fastball — red */
.bam-app .ba-pitch-btn.fb-btn { border-color: var(--bam-red); }
.bam-app .ba-pitch-btn.fb-btn .ba-pitch-fallback { background: var(--bam-red); color: white; }
.bam-app .ba-pitch-btn.fb-btn.sel { background: var(--bam-red); border-color: var(--bam-red); }

/* Curveball — blue */
.bam-app .ba-pitch-btn.cb-btn { border-color: #1a5fb4; }
.bam-app .ba-pitch-btn.cb-btn.sel { background: #1a5fb4; border-color: #1a5fb4; color: white; }
.bam-app .ba-pitch-btn.cb-btn.sel svg circle { fill: white; }
.bam-app .ba-pitch-btn.cb-btn.sel svg path  { stroke: #1a5fb4; }

/* ====================================================
   ZONE GRID — 3 rows (H/M/L) × 2 cols (In/Out)
   ==================================================== */
.bam-app .ba-zone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 6px;
  width: 100%;
  margin-bottom: 14px;
}

/* Row labels overlaid via a label column — handled in HTML with row-label class */
.bam-app .ba-zone-row-lbl {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.bam-app .ba-zone-row-lbl span {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-gray);
}
.bam-app .ba-zone-row-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.12);
}

.bam-app .ba-zone-btn {
  background: var(--bam-white);
  border: 2.5px solid var(--bam-green);
  border-radius: 7px;
  padding: 14px 6px;
  font-size: 0.73rem;
  font-family: 'Black Ops One', cursive;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.bam-app .ba-zone-btn:hover { background: var(--bam-tan); }
.bam-app .ba-zone-btn.sel   { background: var(--bam-green); color: var(--bam-white); }

/* ====================================================
   BATTER UI — swing height zones
   ==================================================== */
.bam-app .ba-swing-btn {
  background: var(--bam-white);
  border: 3px solid var(--bam-red);
  border-radius: 7px;
  padding: 14px 12px;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bam-red-dark);
  cursor: pointer;
  font-size: 0.88rem;
  width: 100%;
  margin-bottom: 8px;
  transition: all 0.12s;
}
.bam-app .ba-swing-btn:hover { background: var(--bam-tan); }
.bam-app .ba-swing-btn.sel   { background: var(--bam-red); color: var(--bam-white); }

/* Batter's box — 3 stacked height zones with bat graphic */
.bam-app .ba-batters-box {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bam-app .ba-batter-figure {
  flex-shrink: 0;
  width: 70px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background-image: url('images/batter-figure.jpg');
  /* Scale full image to 430×324px, then offset to show knees→below-chest */
  background-size: 430px 324px;
  background-position: -191px -123px;
  background-repeat: no-repeat;
}
.bam-app .ba-height-zones {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bam-app .ba-height-btn {
  flex: 1;
  padding: 10px 10px;
  border-radius: 7px;
  border: 2.5px solid var(--bam-green);
  background: var(--bam-white);
  font-family: 'Black Ops One', cursive;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bam-app .ba-height-btn:hover { background: var(--bam-tan); }
.bam-app .ba-height-btn.sel   { background: var(--bam-green); color: var(--bam-white); }
.bam-app .ba-height-btn .zone-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ---- TIMER ---- */
.bam-app .ba-timer {
  font-size: 2.3rem;
  color: var(--bam-tan);
  text-align: center;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
}
.bam-app .ba-timer.urgent { color: var(--bam-red); animation: bam-pulse 0.5s infinite alternate; }
@keyframes bam-pulse { from { opacity: 1; } to { opacity: 0.4; } }

/* ---- RESULT ---- */
.bam-app .ba-result-banner {
  font-size: 1.8rem;
  text-align: center;
  padding: 18px;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: 'Black Ops One', cursive;
}
.bam-app .res-HR  { background: var(--bam-red);        color: var(--bam-white); }
.bam-app .res-3B  { background: #7c4a00;               color: var(--bam-tan); }
.bam-app .res-2B  { background: var(--bam-green);      color: var(--bam-white); }
.bam-app .res-1B  { background: var(--bam-green-lite); color: var(--bam-white); }
.bam-app .res-OUT { background: var(--bam-green-dark); color: var(--bam-tan); border: 2px solid var(--bam-green); }

.bam-app .ba-inst-list { list-style: none; width: 100%; }
.bam-app .ba-inst-list li {
  background: var(--bam-tan);
  color: var(--bam-green-dark);
  border-radius: 7px;
  padding: 11px 14px;
  margin-bottom: 7px;
  font-size: 0.88rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.bam-app .ba-inst-list li::before { content: "▶"; color: var(--bam-green); }

/* ---- WAITING ---- */
.bam-app .ba-waiting {
  text-align: center; padding: 28px 0;
}
.bam-app .ba-spinner {
  font-size: 2rem;
  animation: bam-spin 1.2s linear infinite;
  display: block;
  margin-bottom: 10px;
}
@keyframes bam-spin { to { transform: rotate(360deg); } }
.bam-app .ba-waiting p {
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-lite);
  font-family: 'Barlow', sans-serif;
}

/* ---- STATUS BAR ---- */
.bam-app .ba-status {
  background: var(--bam-green-dark);
  border: 1px solid var(--bam-green);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-lite);
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  font-family: 'Barlow', sans-serif;
}

/* ---- ROLE BADGE ---- */
.bam-app .ba-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
}
.bam-app .ba-badge-pitcher { background: var(--bam-green); color: var(--bam-white); }
.bam-app .ba-badge-batter  { background: var(--bam-red);   color: var(--bam-white); }

/* ---- HELP — fixed contrast ---- */
.bam-app .ba-help {
  background: var(--bam-tan-lite);
}
.bam-app .ba-help h4 {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-red-dark);
  margin-bottom: 5px;
  font-family: 'Black Ops One', cursive;
}
.bam-app .ba-help p,
.bam-app .ba-help li {
  font-size: 0.84rem;
  color: #333;
  line-height: 1.6;
  font-family: 'Barlow', sans-serif;
}
.bam-app .ba-help strong { color: var(--bam-green-dark); }
.bam-app .ba-help ul { padding-left: 15px; list-style: disc; }
.bam-app .ba-divider {
  width: 100%; border: none;
  border-top: 1px solid var(--bam-green);
  margin: 12px 0;
}
.bam-app .ba-small {
  font-size: 0.75rem;
  color: var(--bam-green-lite);
  letter-spacing: 1px;
  font-family: 'Barlow', sans-serif;
}
.bam-app .ba-mt { margin-top: 14px; }

/* ====================================================
   HERO SYSTEM
   ==================================================== */
.bam-app .ba-hero-section-lbl {
  width: 100%;
  font-family: 'Black Ops One', cursive;
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bam-green-lite);
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--bam-green);
}

/* Hero selection card (select screen) */
.bam-app .ba-hero-card-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bam-tan-lite);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
  box-shadow: var(--bam-shadow);
}
.bam-app .ba-hero-card-wrap.selected { border-color: var(--bam-red); }
.bam-app .ba-hero-card-img {
  width: 60px;
  height: 76px;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
  flex-shrink: 0;
  background: #ddd;
}
.bam-app .ba-hero-card-info { flex: 1; min-width: 0; }
.bam-app .ba-hero-name {
  font-family: 'Black Ops One', cursive;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  line-height: 1.1;
}
.bam-app .ba-hero-title {
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bam-red);
  margin-bottom: 4px;
}
.bam-app .ba-hero-ability {
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  color: #444;
  line-height: 1.4;
}
.bam-app .ba-hero-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--bam-green-lite);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.bam-app .ba-hero-card-wrap.selected .ba-hero-check {
  background: var(--bam-red);
  border-color: var(--bam-red);
}
.bam-app .ba-hero-card-wrap.selected .ba-hero-check::after { content: '✓'; color: white; font-size: 0.85rem; }

/* Hero preview chips in Create screen */
.bam-app .ba-hero-preview-none {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  color: var(--bam-green-lite);
  font-style: italic;
  margin-bottom: 6px;
}
.bam-app .ba-hero-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.bam-app .ba-hero-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bam-green-dark);
  border: 1.5px solid var(--bam-green);
  border-radius: 20px;
  padding: 3px 9px 3px 4px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bam-tan);
}
.bam-app .ba-hero-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.bam-app .ba-hero-chip.batter { border-color: var(--bam-red); color: #ffd0d0; }

/* Active heroes row in game screen */
.bam-app .ba-heroes-active {
  display: flex;
  gap: 6px;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Bomber activation message */
.bam-app .ba-bomber-msg {
  background: var(--bam-red);
  color: white;
  text-align: center;
  font-family: 'Black Ops One', cursive;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  width: 100%;
  margin-bottom: 10px;
  display: none;
}
.bam-app .ba-bomber-msg.show { display: block; }

/* Hero Collection full cards */
.bam-app .ba-hero-full-card {
  width: 100%;
  background: var(--bam-tan-lite);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--bam-shadow);
}
.bam-app .ba-hero-full-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bam-app .ba-hero-full-card-body { padding: 14px 16px; }
.bam-app .ba-hero-full-name {
  font-family: 'Black Ops One', cursive;
  font-size: 1.1rem;
  letter-spacing: 3px;
  color: var(--bam-green-dark);
  text-transform: uppercase;
  line-height: 1.1;
}
.bam-app .ba-hero-full-title {
  font-family: 'Barlow', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-red);
  margin-bottom: 6px;
}
.bam-app .ba-hero-full-type {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bam-app .ba-hero-full-type.pitcher { background: var(--bam-green); color: white; }
.bam-app .ba-hero-full-type.batter  { background: var(--bam-red);   color: white; }
.bam-app .ba-hero-full-ability-lbl {
  font-family: 'Black Ops One', cursive;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bam-green-dark);
  margin-bottom: 3px;
}
.bam-app .ba-hero-full-ability-text {
  font-family: 'Barlow', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--bam-red-dark);
  margin-bottom: 8px;
}
.bam-app .ba-hero-full-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.55;
  padding-top: 8px;
  border-top: 1px solid var(--bam-green);
}

/* ====================================================
   SPECIAL PLAYER SYSTEM
   ==================================================== */

/* SP selection grid */
.bam-app .ba-sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}
.bam-app .ba-sp-card {
  background: var(--bam-tan-lite);
  border: 3px solid var(--bam-green);
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
  color: var(--bam-green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.12s;
}
.bam-app .ba-sp-card:hover { background: var(--bam-tan); }
.bam-app .ba-sp-card.sel {
  background: var(--bam-green-dark);
  border-color: var(--bam-red);
  color: var(--bam-tan);
  box-shadow: 0 0 0 2px var(--bam-red);
}
.bam-app .ba-sp-placeholder {
  width: 52px; height: 52px;
  border-radius: 6px;
  background: var(--bam-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 2px;
}
.bam-app .ba-sp-card.sel .ba-sp-placeholder { background: #2e3820; border: 2px solid var(--bam-green); }
.bam-app .ba-sp-card-img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; margin-bottom: 2px; }
.bam-app .ba-sp-cname {
  font-family: 'Black Ops One', cursive;
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; line-height: 1.1;
}
.bam-app .ba-sp-crank {
  font-family: 'Barlow', sans-serif;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--bam-red);
}
.bam-app .ba-sp-card.sel .ba-sp-crank { color: var(--bam-tan); }
.bam-app .ba-sp-cdesc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem; color: #555; line-height: 1.3; text-transform: none; letter-spacing: 0;
}
.bam-app .ba-sp-card.sel .ba-sp-cdesc { color: var(--bam-green-lite); }

/* SP locked/waiting badge */
.bam-app .ba-sp-locked-badge {
  width: 100%;
  background: var(--bam-green);
  color: var(--bam-white);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Black Ops One', cursive;
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
}

/* SP panel in game screen */
.bam-app .ba-sp-panel {
  width: 100%;
  background: var(--bam-green-dark);
  border: 2px solid var(--bam-green);
  border-radius: 9px;
  padding: 9px 12px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.bam-app .ba-sp-panel-icon { font-size: 1.3rem; flex-shrink: 0; }
.bam-app .ba-sp-panel-info { flex: 1; }
.bam-app .ba-sp-panel-name {
  font-family: 'Black Ops One', cursive;
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--bam-tan); line-height: 1.1;
}
.bam-app .ba-sp-panel-rank {
  font-family: 'Barlow', sans-serif;
  font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--bam-green-lite);
}
.bam-app .ba-sp-panel-status {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px; flex-shrink: 0;
}
.bam-app .ba-sp-status-always   { background: var(--bam-green);     color: var(--bam-white); }
.bam-app .ba-sp-status-available { background: var(--bam-tan);       color: var(--bam-green-dark); }
.bam-app .ba-sp-status-used     { background: var(--bam-gray);       color: var(--bam-white); }

/* SP pitcher ability button */
.bam-app .ba-sp-pitch-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 7px;
  border: 3px solid var(--bam-red);
  background: var(--bam-tan-lite);
  color: var(--bam-red-dark);
  font-family: 'Black Ops One', cursive;
  font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; margin-bottom: 8px; text-align: left; transition: all 0.12s;
}
.bam-app .ba-sp-pitch-btn.active { background: var(--bam-red); color: var(--bam-white); }
.bam-app .ba-sp-pitch-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* SP reveal modal */
.bam-app .ba-sp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: bam-fadein 0.2s ease;
}
.bam-app .ba-sp-modal-overlay.hidden { display: none; }
@keyframes bam-fadein { from { opacity: 0; } to { opacity: 1; } }

.bam-app .ba-sp-modal {
  background: var(--bam-green-dark);
  border: 3px solid var(--bam-red);
  border-radius: 14px;
  padding: 28px 20px;
  width: 88%; max-width: 340px;
  text-align: center;
  animation: bam-zoomin 0.22s ease;
}
@keyframes bam-zoomin { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.bam-app .ba-sp-modal-eye {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--bam-red); margin-bottom: 6px;
}
.bam-app .ba-sp-modal-name {
  font-family: 'Black Ops One', cursive;
  font-size: 1.3rem; letter-spacing: 3px; text-transform: uppercase; color: var(--bam-tan); margin-bottom: 3px; line-height: 1.1;
}
.bam-app .ba-sp-modal-rank {
  font-family: 'Barlow', sans-serif;
  font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase; color: var(--bam-green-lite); margin-bottom: 14px;
}
.bam-app .ba-sp-modal-ability {
  font-family: 'Black Ops One', cursive;
  font-size: 0.88rem; letter-spacing: 2px; text-transform: uppercase; color: var(--bam-white);
  background: var(--bam-red); border-radius: 7px; padding: 9px 12px; margin-bottom: 12px;
}
.bam-app .ba-sp-modal-note {
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem; color: var(--bam-tan-lite); line-height: 1.5; margin-bottom: 18px;
}
.bam-app .ba-sp-modal-btn {
  background: var(--bam-green); color: var(--bam-white); border: none; border-radius: 7px;
  padding: 11px 22px; font-family: 'Black Ops One', cursive; font-size: 0.8rem;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}

/* SP activation section on result screen */
.bam-app .ba-sp-activate-section { width: 100%; margin-bottom: 14px; }
.bam-app .ba-sp-activate-section h3 {
  font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--bam-red); margin-bottom: 8px; border-bottom: 2px solid var(--bam-red); padding-bottom: 5px;
  font-family: 'Black Ops One', cursive;
}
.bam-app .ba-sp-activate-btn {
  width: 100%; padding: 13px; border-radius: 9px;
  border: 3px solid var(--bam-red); background: var(--bam-tan-lite); color: var(--bam-red-dark);
  font-family: 'Black Ops One', cursive; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; margin-bottom: 8px; transition: all 0.12s;
}
.bam-app .ba-sp-activate-btn:hover { background: var(--bam-red); color: var(--bam-white); }

/* ====================================================
   STEAL SECTION (pitcher + batter)
   ==================================================== */
.bam-app .ba-steal-section { width: 100%; margin-top: 4px; }
.bam-app .ba-steal-hdr {
  font-family: 'Black Ops One', cursive; font-size: 0.7rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--bam-green); border-bottom: 1px solid var(--bam-green);
  padding-bottom: 5px; margin-bottom: 7px;
}
.bam-app .ba-steal-btn {
  width: 100%; padding: 10px 12px;
  border: 2px solid var(--bam-green); background: transparent;
  color: var(--bam-green-dark); border-radius: 7px;
  font-family: 'Black Ops One', cursive; font-size: 0.75rem;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; margin-bottom: 6px; transition: all 0.12s; text-align: left;
}
.bam-app .ba-steal-btn:hover { background: rgba(104,114,77,.12); }
.bam-app .ba-steal-btn.active {
  background: var(--bam-green); color: #fff; border-color: var(--bam-green);
}
.bam-app .ba-throwout-btn {
  border-color: var(--bam-red); color: var(--bam-red-dark);
}
.bam-app .ba-throwout-btn:hover { background: rgba(187,61,67,.1); }
.bam-app .ba-throwout-btn.active {
  background: var(--bam-red); color: #fff; border-color: var(--bam-red);
}

/* ====================================================
   PITCHER REPEAT HELPER (private, pitcher-only)
   ==================================================== */
.bam-app .ba-repeat-helper {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-top: 8px; margin-bottom: 2px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(232,219,183,.12);
  border-radius: 6px;
}
.bam-app .ba-rh-lbl {
  font-family: 'Black Ops One', cursive; font-size: 0.58rem;
  letter-spacing: 2px; color: rgba(232,219,183,.38); white-space: nowrap;
}
.bam-app .ba-rh-status {
  font-family: 'Black Ops One', cursive; font-size: 0.75rem; letter-spacing: 1px;
}
.bam-app .ba-rh-same-both  { color: var(--bam-red); }
.bam-app .ba-rh-same-pitch { color: #e8a020; }
.bam-app .ba-rh-same-spot  { color: #e8a020; }
.bam-app .ba-rh-new-look   { color: var(--bam-green-lite); }

/* ====================================================
   PITCH INTEL SECTION
   ==================================================== */
.bam-app .ba-pitch-intel {
  width: 100%; margin-top: 16px;
  border: 1px solid rgba(104,114,77,.4);
  border-radius: 9px; overflow: hidden;
}
.bam-app .ba-intel-hdr {
  padding: 7px 12px;
  background: rgba(0,0,0,.3);
  font-family: 'Black Ops One', cursive;
  font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(232,219,183,.55);
}
.bam-app .ba-intel-body { display: flex; flex-direction: column; }
.bam-app .ba-intel-col {
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bam-app .ba-intel-col:last-child { border-bottom: none; }
.bam-app .ba-intel-col-lbl {
  font-family: 'Black Ops One', cursive;
  font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(232,219,183,.35); margin-bottom: 7px;
}
/* Heat map grid */
.bam-app .ba-intel-zone {
  display: grid; grid-template-columns: 20px 1fr 1fr;
  gap: 3px; margin-bottom: 3px;
}
.bam-app .ba-iz-row-lbl {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Black Ops One', cursive; font-size: 0.55rem;
  color: rgba(232,219,183,.35); letter-spacing: 1px;
}
.bam-app .ba-iz-cell {
  min-height: 28px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(232,219,183,.1);
  border-radius: 3px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1px; padding: 2px;
  font-size: 0.7rem; color: var(--bam-tan); line-height: 1;
}
.bam-app .ba-iz-col-labels {
  display: grid; grid-template-columns: 20px 1fr 1fr; gap: 3px;
}
.bam-app .ba-iz-col-labels span {
  font-family: 'Black Ops One', cursive; font-size: 0.5rem;
  color: rgba(232,219,183,.3); text-align: center; letter-spacing: 1px;
}
/* Totals */
.bam-app .ba-intel-total-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.bam-app .ba-intel-total-icon { font-size: 0.82rem; width: 14px; text-align: center; }
.bam-app .ba-intel-total-name {
  flex: 1; font-family: 'Barlow', sans-serif; font-size: 0.76rem;
  color: rgba(232,219,183,.6);
}
.bam-app .ba-intel-total-count {
  font-family: 'Black Ops One', cursive; font-size: 0.85rem; color: var(--bam-tan);
}
/* Pitch log */
.bam-app .ba-intel-log {
  max-height: 120px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.bam-app .ba-intel-log-row {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 3px; border-radius: 3px;
  background: rgba(0,0,0,.18);
}
.bam-app .ba-intel-log-inning {
  font-family: 'Black Ops One', cursive; font-size: 0.58rem;
  color: rgba(232,219,183,.35); width: 22px; flex-shrink: 0;
}
.bam-app .ba-intel-log-icon {
  font-size: 0.72rem; width: 12px; text-align: center;
  flex-shrink: 0; color: var(--bam-tan);
}
.bam-app .ba-intel-log-loc {
  flex: 1; font-family: 'Barlow', sans-serif;
  font-size: 0.7rem; color: rgba(232,219,183,.5);
}
.bam-app .ba-intel-log-result {
  font-size: 0.58rem; letter-spacing: 0.5px; padding: 1px 4px;
  border-radius: 2px; font-family: 'Black Ops One', cursive; flex-shrink: 0;
}
.bam-app .ba-intel-log-result.res-out { background: rgba(187,61,67,.25); color: var(--bam-red); }
.bam-app .ba-intel-log-result.res-hit { background: rgba(104,114,77,.3); color: #9ab55a; }
.bam-app .ba-intel-empty {
  font-family: 'Barlow', sans-serif; font-size: 0.72rem;
  color: rgba(232,219,183,.28); padding: 3px 0;
}
/* Desktop: horizontal row */
@media (min-width: 580px) {
  .bam-app .ba-intel-body { flex-direction: row; }
  .bam-app .ba-intel-col { border-bottom: none; border-right: 1px solid rgba(255,255,255,.06); }
  .bam-app .ba-intel-col:last-child { border-right: none; }
  .bam-app .ba-intel-col--heatmap { flex-shrink: 0; width: 120px; }
  .bam-app .ba-intel-col--totals  { flex-shrink: 0; width: 115px; }
  .bam-app .ba-intel-col--history { flex: 1; }
  .bam-app .ba-intel-log { max-height: 180px; }
}