/* Arena scoreboard ("Anzeigetafel"): black board with LED-style digits. */

.board {
  --b-red: #ff3b2f;
  --b-blue: #3aa0ff;
  --b-amber: #ffb000;
  --b-green: #3dff6a;
  --b-dim: #3a3a3a;
  background: #000;
  color: #fff;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 2%;
  padding: 3% 3%;
  font-family: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.board-side, .board-center { min-width: 0; }

.board-side {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 2cqw;
  align-content: start;
  text-align: center;
}
.board-teamname {
  font: 700 4cqw/1.1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-side-H .board-teamname { color: #ffb3ad; }
.board-side-G .board-teamname { color: #b3d9ff; }

.board-score {
  font-size: 13cqw;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 0 1.5cqw currentColor;
}
.board-side-H .board-score { color: var(--b-red); }
.board-side-G .board-score { color: var(--b-blue); }

.board-shots {
  font: 600 2.2cqw/1 system-ui, sans-serif;
  color: #999;
  min-height: 2.2cqw;
  letter-spacing: 0.05em;
}

.board-penalties {
  display: grid;
  gap: 0.6cqw;
  align-content: start;
}
.board-penalty {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1cqw;
  font-size: 3cqw;
  line-height: 1.1;
  font-weight: 700;
  color: var(--b-dim);
  border: 0.2cqw solid #161616;
  border-radius: 0.6cqw;
  padding: 0.4cqw 0.8cqw;
}
.board-penalty.active { color: var(--b-green); border-color: #143a1e; text-shadow: 0 0 1cqw rgba(61, 255, 106, 0.5); }
.board-penalty.active.waiting { color: #1f8a3a; text-shadow: none; }
.board-penalty-player { text-align: right; }
.board-penalty-time { text-align: left; }
.board-penalty-player:empty::before { content: "--"; }
.board-penalty-time:empty::before { content: "-:--"; }

.board-timeouts {
  font-size: 3cqw;
  color: var(--b-amber);
  letter-spacing: 0.4cqw;
  min-height: 3cqw;
  text-shadow: 0 0 1cqw rgba(255, 176, 0, 0.6);
}
.board-side-H .board-timeouts { text-align: left; }
.board-side-G .board-timeouts { text-align: right; }

.board-center {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1.5cqw;
  align-content: start;
  text-align: center;
}
.board-time {
  font-size: 15cqw;
  line-height: 1;
  font-weight: 700;
  color: var(--b-amber);
  text-shadow: 0 0 2cqw rgba(255, 176, 0, 0.55);
  letter-spacing: 0.02em;
}
.board.board-timeout .board-time { color: #ff7a00; }
.board.board-pause .board-time { color: #ffd76a; }
.board-status {
  font: 700 3cqw/1.1 system-ui, sans-serif;
  letter-spacing: 0.15em;
  color: #ffb000;
  min-height: 3cqw;
  text-transform: uppercase;
}
.board-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  margin-top: 2cqw;
}
.board-period-label { font: 600 2.2cqw/1 system-ui, sans-serif; color: #888; letter-spacing: 0.2em; }
.board-period-value { font-size: 7cqw; line-height: 1; font-weight: 700; color: #fff; text-shadow: 0 0 1.5cqw rgba(255, 255, 255, 0.4); }

/* full-screen page */
.board-full { border-radius: 0; padding: 4vh 4vw; height: 100vh; align-content: center; }