/* Match-Uhr (arena scoreboard): black board with LED-style digits, HOME green, VISITOR yellow. */

.board {
  --b-home: #4dff9a;
  --b-visitor: #ffe14d;
  --b-amber: #ffb000;
  --b-dim: #3a3a3a;
  background: #000;
  color: #fff;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 1.5fr 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;
  gap: 2cqw;
  align-content: start;
  text-align: center;
}
.board-teamname {
  font: 700 4cqw/1.1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.board-side-H .board-teamname { color: var(--b-home); }
.board-side-V .board-teamname { color: var(--b-visitor); }

.board-score {
  font-size: 13cqw;
  line-height: 1;
  font-weight: 700;
  color: #ff3b2f;
  text-shadow: 0 0 1.5cqw rgba(255, 59, 47, 0.6);
}

.board-penalties {
  display: grid;
  gap: 0.6cqw;
  align-content: start;
}
.board-penalty {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 1cqw;
  font-size: 2.8cqw;
  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-amber); border-color: #3a2a00; text-shadow: 0 0 1cqw rgba(255, 176, 0, 0.5); }
.board-penalty.active.waiting { color: #8a6200; text-shadow: none; }
.board-penalty-pos { text-align: right; font-size: 0.8em; align-self: center; }
.board-penalty-time { text-align: left; }
.board-penalty-time:empty::before { content: "-:--"; }

.board-timeouts {
  font-size: 3cqw;
  color: #3aa0ff;
  letter-spacing: 0.4cqw;
  min-height: 3cqw;
  text-shadow: 0 0 1cqw rgba(58, 160, 255, 0.6);
}

.board-center {
  display: grid;
  grid-template-rows: auto 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.board-ended .board-time { color: #ff7a70; }
.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); }
.board-lamps {
  font: 700 2cqw/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  color: #ff3b2f;
  min-height: 2cqw;
  text-shadow: 0 0 1cqw rgba(255, 59, 47, 0.7);
}

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