.stats-timeline {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 10px;
  margin: 2rem auto 1rem;
  border-bottom: 2px solid #222;
}

.stats-timeline .event {
  position: absolute;
  bottom: 5px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.stats-timeline .event.good {
  background: black;
}

.stats-timeline .event.bad {
  background: red;
}

.stats-ticks {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  height: 20px;
}

.stats-ticks .tick {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 12px;
  color: #222;
}

.stats-dual {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  font-size: 14px;
}

.stats-dual thead th {
  background: none;
  text-align: left;
  font-weight: bold;
  padding: 0.5rem;
}

.stats-dual td {
  padding: 0.6rem;
  border-top: 1px solid #ddd;
}

.stats-ual td:nth-child(2) {
  text-align: left;
  color: #000;
  font-weight: 500;
}

.stats-dual tbody tr:nth-child(even) {
  background: #fafafa;
}

.stats-highlight {
  color: #002b5b;
  font-weight: bold;
}

.stats-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.stats-table thead th {
  background: #f4f4f4;
  text-align: left;
  padding: 0.75rem;
  font-weight: bold;
  font-size: 14px;
}

.stats-table tbody td {
  padding: 0.6rem 0.75rem;
  font-size: 14px;
  vertical-align: top;
  border-top: 1px solid #e0e0e0;
}

.stats-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.stats-table span {
  font-size: 12px;
  color: gray;
}

.stats-field {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(4, 120px);
  gap: 1px;
  background: #fff;
  position: relative;
}

.stats-zones {
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 14px;
  text-align: center;
}

.stats-zones > div {
  z-index: 2;
}

.stats-zones span {
  font-weight: normal;
  font-size: 12px;
  color: gray;
}

.stats-zones.active {
  background: #f4f4f4;
}

.stats-zones.empty {
  color: black;
  font-size: 18px;
  font-weight: bold;
}

.stats-bar-group {
  width: 300px;
  margin-bottom: 10px;
}

.stats-bar-label {
  text-align: center;
  font-size: 16px;
  margin-bottom: 4px;
}

.stats-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-bar-value {
  width: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.stats-bar-bar {
  height: 6px;
  border-radius: 3px;
}

.stats-bar-left {
  background: #000;
}

.stats-bar-right {
  background: #ccc;
}

.stats-bar-wrapper {
  flex: 1;
  display: flex;
}

.stats-bar-left-wrapper {
  justify-content: flex-end;
}

.stats-bar-right-wrapper {
  justify-content: flex-start;
}

.stats-pitch {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(4, 80px);
  gap: 2px;
  background: white;
  border: 0px solid #333;
  width: fit-content;
}

.stats-pitch-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: sans-serif;
  position: relative;
}

.stats-pitch-green-1 {
  background-color: #ccc;
}
.stats-pitch-green-2 {
  background-color: #70ad47;
}
.stats-pitch-green-3 {
  background-color: #548235;
}
.stats-pitch-red {
  background-color: red;
}
.stats-pitch-orange {
  background-color: orange;
}

.stats-pitch-label {
  color: fff;
  font-size: 18px;
}
.stats-pass-network-player {
  fill: #fff;
  stroke: #e11d48;
  stroke-width: 2;
}
.stats-pass-network-link {
  stroke: black;
  stroke-opacity: 0.2;
}
.stats-pass-network-label {
  fill: #e11d48;
  font-size: 10px;
  text-anchor: middle;
}

.stats-arrow {
  position: relative;
  margin-left: -60px;
  font-size: 96px;
  color: #999;
  top: -200px;
  height: 0px;
}