/**
 * Campo de zonas 3×5 — compartido (partido-vivo, pizarra highlights, pruebas).
 * Misma geometría y SVG que .mlive-hl-pitch-grid--inline en match-live / pizarra.
 */
.mlive-hl-pitch-axis-hint {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text3);
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}

.mlive-hl-pitch-grid { display: grid; }

.mlive-hl-pitch-grid--inline {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 5 / 3;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  margin-block: 0.5rem;
  gap: 1px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(0, 100, 30, 0.55);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MDAgMzAwJz48ZyBzdHJva2U9J3doaXRlJyBzdHJva2Utb3BhY2l0eT0nLjQ1JyBzdHJva2Utd2lkdGg9JzIuNScgZmlsbD0nbm9uZSc+PHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzQ5NicgaGVpZ2h0PScyOTYnIHJ4PScyJy8+PGxpbmUgeDE9JzAnIHkxPScxNTAnIHgyPSc1MDAnIHkyPScxNTAnLz48ZWxsaXBzZSBjeD0nMjUwJyBjeT0nMTUwJyByeD0nNTAnIHJ5PSc0MCcvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzE1MCcgcj0nMycgZmlsbD0nd2hpdGUnIGZpbGwtb3BhY2l0eT0nLjUnLz48cmVjdCB4PScxNTAnIHk9JzInIHdpZHRoPScyMDAnIGhlaWdodD0nNzUnLz48cmVjdCB4PScxNTAnIHk9JzIyMycgd2lkdGg9JzIwMCcgaGVpZ2h0PSc3NScvPjxyZWN0IHg9JzIwMCcgeT0nMicgd2lkdGg9JzEwMCcgaGVpZ2h0PSczMicvPjxyZWN0IHg9JzIwMCcgeT0nMjY2JyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzMyJy8+PGNpcmNsZSBjeD0nMjUwJyBjeT0nNjUnIHI9JzMnIGZpbGw9J3doaXRlJyBmaWxsLW9wYWNpdHk9Jy41Jy8+PGNpcmNsZSBjeD0nMjUwJyBjeT0nMjM1JyByPSczJyBmaWxsPSd3aGl0ZScgZmlsbC1vcGFjaXR5PScuNScvPjwvZz48L3N2Zz4=");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

[data-theme="light"] .mlive-hl-pitch-grid--inline {
  background-color: rgba(0, 110, 30, 0.22);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MDAgMzAwJz48ZyBzdHJva2U9J3JnYmEoMCw4MCwyMCwwLjU1KScgc3Ryb2tlLXdpZHRoPScyLjUnIGZpbGw9J25vbmUnPjxyZWN0IHg9JzInIHk9JzInIHdpZHRoPSc0OTYnIGhlaWdodD0nMjk2JyByeD0nMicvPjxsaW5lIHgxPScwJyB5MT0nMTUwJyB4Mj0nNTAwJyB5Mj0nMTUwJy8+PGVsbGlwc2UgY3g9JzI1MCcgY3k9JzE1MCcgcng9JzUwJyByeT0nNDAnLz48Y2lyY2xlIGN4PScyNTAnIGN5PScxNTAnIHI9JzMnIGZpbGw9J3JnYmEoMCw4MCwyMCwwLjYpJy8+PHJlY3QgeD0nMTUwJyB5PScyJyB3aWR0aD0nMjAwJyBoZWlnaHQ9Jzc1Jy8+PHJlY3QgeD0nMTUwJyB5PScyMjMnIHdpZHRoPScyMDAnIGhlaWdodD0nNzUnLz48cmVjdCB4PScyMDAnIHk9JzInIHdpZHRoPScxMDAnIGhlaWdodD0nMzInLz48cmVjdCB4PScyMDAnIHk9JzI2Nicgd2lkdGg9JzEwMCcgaGVpZ2h0PSczMicvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzY1JyByPSczJyBmaWxsPSdyZ2JhKDAsODAsMjAsMC42KScvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzIzNScgcj0nMycgZmlsbD0ncmdiYSgwLDgwLDIwLDAuNiknLz48L2c+PC9zdmc+");
}

.mlive-hl-pitch-cell {
  cursor: pointer;
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 14px;
  line-height: 1;
}
[data-theme="light"] .mlive-hl-pitch-cell {
  border-color: rgba(0, 80, 20, 0.18);
}
.mlive-hl-pitch-cell:hover:not(:disabled) { background: rgba(245, 166, 35, 0.3); }
.mlive-hl-pitch-cell.is-selected { background: rgba(245, 166, 35, 0.45); }
.mlive-hl-pitch-cell.is-first { background: rgba(245, 166, 35, 0.65); }
.mlive-hl-pitch-cell.is-heat-1 { background: rgba(20, 184, 166, 0.22); }
.mlive-hl-pitch-cell.is-heat-2 { background: rgba(20, 184, 166, 0.38); }
.mlive-hl-pitch-cell.is-heat-3 { background: rgba(20, 184, 166, 0.52); }
.mlive-hl-pitch-cell.is-heat-4 { background: rgba(20, 184, 166, 0.68); }
.mlive-hl-pitch-cell.is-heat-1.is-selected,
.mlive-hl-pitch-cell.is-heat-2.is-selected,
.mlive-hl-pitch-cell.is-heat-3.is-selected,
.mlive-hl-pitch-cell.is-heat-4.is-selected {
  background: rgba(20, 184, 166, 0.68);
}
.mlive-hl-pitch-cell:focus-visible {
  outline: 2px solid var(--amber, #f5a623);
  outline-offset: -2px;
}
.mlive-hl-pitch-cell:disabled { cursor: default; opacity: 0.85; }

.pitch-zone-picker__hint {
  font-size: 11px;
  color: var(--text3, #8a8680);
  margin: 0 0 6px;
  line-height: 1.4;
}

.mlive-hl-chip-undo-btn {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  background: transparent;
  color: var(--amber, #f5a623);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.mlive-hl-chip-undo-btn:hover { background: rgba(245, 158, 11, 0.12); }
.mlive-hl-chip-undo-btn:focus-visible {
  outline: 2px solid var(--amber, #f5a623);
  outline-offset: 2px;
}

.pitch-zone-picker--compact .mlive-hl-pitch-grid--inline {
  max-width: 220px;
  margin-block: 0.35rem;
}
.pitch-zone-picker--compact .pitch-zone-picker__hint {
  display: none;
}

@media (max-width: 480px) {
  .mlive-hl-pitch-grid--inline {
    max-width: 100%;
  }
  .mlive-hl-chip-undo-btn {
    max-width: 100%;
  }
  .pitch-zone-picker--compact .mlive-hl-pitch-grid--inline {
    max-width: 100%;
  }
}