/* ========================================================
   TABLEAU D'AFFICHAGE MULTISPORT (STRAMATEL STYLE - image.png)
   - Zéro effet de glow (pas d'ombre ni de flou)
   - Zéro badge de sport / connexion
   - Zéro commande en bas de page
   - Fond noir pur (#000000) et affichage LED électronique authentique
   ======================================================== */

@font-face {
  font-family: 'DSEG7';
  src: url('/fonts/DSEG7Classic-Bold.woff2') format('woff2'),
       url('/fonts/DSEG7Classic-Bold.woff') format('woff'),
       url('/fonts/DSEG7Classic-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'DSEG14';
  src: url('/fonts/DSEG14Classic-Bold.woff2') format('woff2'),
       url('/fonts/DSEG14Classic-Bold.woff') format('woff'),
       url('/fonts/DSEG14Classic-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

:root {
  --led-red: #ff0015;
  --led-green: #00ee3b;
  --led-white: #ffffff;
  --led-yellow: #ffcc00;
  --led-off: #1c1c1c;
  --board-bg: #000000;
}

html, body.scoreboard-body {
  width: 100vw;
  height: 100vh;
  background-color: var(--board-bg);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Flash klaxon discret sans glow */
.klaxon-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: 14px solid var(--led-red);
  background-color: rgba(255, 0, 0, 0.15);
  pointer-events: none;
  z-index: 9999;
}

/* Enceinte globale Stramatel */
.stramatel-board {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2vh 3vw;
  background-color: var(--board-bg);
}

/* Police 7 segments DSEG sans aucun glow */
.led-dseg {
  font-family: 'DSEG7', monospace;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0.05em;
  text-shadow: none !important;
  line-height: 1;
  display: inline-block;
}

.led-red {
  color: var(--led-red);
}

.led-green {
  color: var(--led-green);
}

.led-white {
  color: var(--led-white);
}

.led-yellow {
  color: var(--led-yellow);
}

/* ========================================================
   LIGNE 1 : SCORES & PÉRIODE (image.png)
   [ 108 (Red) ]    [ < (Red)  4 (Green)  > (Red) ]    [ 109 (Red) ]
   ======================================================== */
.row-scores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 27vh;
}

.score-box {
  width: 38vw;
  display: flex;
  align-items: center;
}
.score-home {
  justify-content: flex-start;
}
.score-away {
  justify-content: flex-end;
}

.score-digits {
  font-size: min(25vh, 18vw);
  white-space: nowrap;
}

/* Centre : Flèche < , Période 4 , Flèche > */
.center-period-wrap {
  width: 22vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
}

.poss-symbol {
  font-size: min(8vh, 6vw);
  color: var(--led-off);
  font-weight: 900;
  transition: color 0.1s;
}
.poss-symbol.active {
  color: var(--led-red);
}

.period-digits {
  font-size: min(23vh, 14vw);
  white-space: nowrap;
}

/* ========================================================
   LIGNE 2 : NOMS D'ÉQUIPES EN BLANC (LOCAUX / VISITEURS)
   ======================================================== */
.row-team-names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8vh;
  padding: 0 1vw;
}

.team-name-col {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  max-width: 46vw;
  overflow: hidden;
}
.away-col {
  justify-content: flex-end;
}

.team-logo {
  max-height: 7vh;
  max-width: 6vw;
  object-fit: contain;
}

.team-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: min(5.5vh, 4.5vw);
  font-weight: 800;
  color: var(--led-white);
  letter-spacing: 0.12vw;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none !important;
}

/* ========================================================
   LIGNE 3 : CHRONO PRINCIPAL (00:59) & TEMPS-MORTS (3 POINTS VERTS)
   ======================================================== */
.row-chrono {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33vh;
}

.chrono-side {
  width: 14vw;
  display: flex;
  align-items: center;
  gap: 2vw;
}
.home-chrono-side {
  justify-content: flex-start;
}
.away-chrono-side {
  justify-content: flex-end;
}

/* 3 points verts verticaux pour les temps-morts comme image.png */
.vertical-tm-dots {
  display: flex;
  flex-direction: column;
  gap: 1.2vh;
  padding: 0 1vw;
}

.v-dot {
  width: min(2.2vh, 1.8vw);
  height: min(2.2vh, 1.8vw);
  border-radius: 50%;
  background-color: var(--led-off);
}
.v-dot.active {
  background-color: var(--led-green);
}

/* Haut-parleur / Grille klaxon comme sur le Stramatel */
.klaxon-speaker {
  width: min(7vh, 5vw);
  height: min(7vh, 5vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

.speaker-icon {
  width: 100%;
  height: 100%;
}
.klaxon-speaker.active svg line,
.klaxon-speaker.active svg rect,
.klaxon-speaker.active svg circle {
  stroke: var(--led-red);
}

/* Chrono central blanc */
.chrono-center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  overflow: hidden;
}

.main-clock-digits {
  font-size: min(28vh, 22vw);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ========================================================
   LIGNE 4 : BAS DU TABLEAU (0:30 EN JAUNE COMME SUR LA PHOTO)
   - Handball : Prisons 2 min (0:30 / 1:12)
   - Basket : Fautes (Jaune) et Shot Clock 24s (Rouge)
   ======================================================== */
.row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24vh;
}

.bottom-cell {
  display: flex;
  align-items: center;
  width: 32vw;
  overflow: hidden;
}

.bottom-left {
  justify-content: flex-start;
  padding-left: 1vw;
}
.bottom-center {
  width: 34vw;
  justify-content: center;
}
.bottom-right {
  justify-content: flex-end;
  padding-right: 1vw;
}

/* Basket & Hand items en bas */
.cell-basket {
  display: flex;
  align-items: baseline;
  gap: 1vw;
  white-space: nowrap;
}

.cell-label {
  font-size: min(2.5vh, 2vw);
  font-weight: 800;
  color: #777777;
  letter-spacing: 0.1vw;
}

.bottom-num {
  font-size: min(18vh, 14vw);
  white-space: nowrap;
}

/* Prisons Hand (style 0:30 de la photo) */
.cell-hand {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.jail-main {
  display: flex;
  align-items: baseline;
  gap: 1vw;
  white-space: nowrap;
}

.jail-sub-player {
  font-size: min(4vh, 3vw);
  font-weight: 900;
  color: #ffffff;
}

/* Shot Clock 24s (Basket) au centre en bas */
.cell-shotclock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1vw;
  white-space: nowrap;
}

.shotclock-num {
  font-size: min(19vh, 15vw);
  white-space: nowrap;
}

.shotclock-label {
  font-size: min(3vh, 2.5vw);
  font-weight: 900;
  color: #666666;
  letter-spacing: 0.1vw;
}

/* Temps-Mort Hand au centre en bas */
.cell-hand-tm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.hand-tm-title {
  font-size: min(2vh, 1.8vw);
  font-weight: 900;
  color: var(--led-yellow);
  letter-spacing: 0.15vw;
}

.hand-tm-clock {
  font-size: min(12vh, 9vw);
  white-space: nowrap;
}

.hidden {
  display: none !important;
}