.ww-hud[hidden] {
  display: none;
}
.ww-hud {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  color: white;
  --signal: #989bfb;
}
.ww-hud.is-black {
  /* Nuit : noir opaque au-dessus de tout le HUD. */
  z-index: 2147483000;
  background: #000;
}
.ww-hud.is-black::before {
  /* Calque noir qui déborde largement de l’écran (overlay plus grand que la fenêtre). */
  content: "";
  position: fixed;
  inset: -50vmax;
  z-index: -1;
  background: #000;
}
:root.ww-night,
:root.ww-night body {
  background: #000 !important;
}
:root.ww-night body > :not(.ww-hud) {
  visibility: hidden;
}
.ww-hud .hud-line {
  top: 44px;
}
.ww-hud .hud-line::before {
  display: none;
}
.ww-hud-name {
  font:
    italic 900 15px Archivo,
    sans-serif;
}
.ww-hud.is-black .ww-hud-brand {
  display: none;
}
.ww-hud-signal {
  position: absolute;
  top: 7vh;
  left: 12px;
  right: 12px;
  text-align: center;
}
.ww-hud-signal .hud-soleil-phase {
  font-size: clamp(26px, 3.4vw, 56px);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ww-hud-signal small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px #000;
}
.ww-hud.is-centered .ww-hud-signal {
  top: 42%;
}
.ww-hud.red {
  --signal: #ff4747;
}
.ww-hud.gold {
  --signal: #ffd24a;
}
.ww-hud.muted {
  --signal: #c9ccdc;
}
.ww-hud-private {
  position: absolute;
  bottom: 8%;
  left: 8%;
  right: 8%;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.7;
  text-shadow: 0 1px 5px black;
}
@media (max-width: 900px) {
  .ww-hud-signal {
    top: 18vh;
  }
  .ww-hud .hud-line {
    transform: scale(0.8);
    transform-origin: top right;
  }
  .ww-hud-private {
    bottom: 4%;
    font-size: 11px;
  }
}