/* ============================================
   Liga Norte — Custom styles (Tailwind extras)
   ============================================ */

/* --- Football field stripes --- */
.field-stripes {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.15) 6.66%,
    transparent 6.66%,
    transparent 13.32%,
    rgba(255, 255, 255, 0.15) 13.32%,
    rgba(255, 255, 255, 0.15) 19.98%,
    transparent 19.98%,
    transparent 26.64%,
    rgba(255, 255, 255, 0.15) 26.64%,
    rgba(255, 255, 255, 0.15) 33.3%,
    transparent 33.3%,
    transparent 39.96%,
    rgba(255, 255, 255, 0.15) 39.96%,
    rgba(255, 255, 255, 0.15) 46.62%,
    transparent 46.62%,
    transparent 53.28%,
    rgba(255, 255, 255, 0.15) 53.28%,
    rgba(255, 255, 255, 0.15) 59.94%,
    transparent 59.94%,
    transparent 66.6%,
    rgba(255, 255, 255, 0.15) 66.6%,
    rgba(255, 255, 255, 0.15) 73.26%,
    transparent 73.26%,
    transparent 79.92%,
    rgba(255, 255, 255, 0.15) 79.92%,
    rgba(255, 255, 255, 0.15) 86.58%,
    transparent 86.58%,
    transparent 93.24%,
    rgba(255, 255, 255, 0.15) 93.24%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

/* --- Decorative stripes (Zone header) --- */
.zone-stripes {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15) 0px,
    rgba(255, 255, 255, 0.15) 10px,
    transparent 10px,
    transparent 20px
  );
}

/* --- Corner arcs for the field --- */
.field-corner-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0 0 24px 0;
}
.field-corner-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-left: 2px solid rgba(255, 255, 255, 0.85);
  border-bottom: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0 0 0 24px;
}
.field-corner-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  border-top: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 0 24px 0 0;
}
.field-corner-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-left: 2px solid rgba(255, 255, 255, 0.85);
  border-top: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px 0 0 0;
}

/* --- Font classes (Tailwind CDN extended) --- */
.font-barlow { font-family: 'Barlow', ui-sans-serif, system-ui, sans-serif; }
.font-bebas { font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif; }
.font-jetbrains { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* --- Result score box --- */
.score-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
}

/* --- Scorer number badge --- */
.scorer-rank {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* --- Scorer goal count --- */
.goal-badge {
  padding: 2px 10px;
  min-width: 36px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Zebra for tables --- */
tr:nth-child(even) td {
  background: rgba(239, 243, 236, 0.4);
}

/* --- Transitions --- */
.tab-panel {
  transition: opacity 0.15s ease;
}