.hud-shell{
  position: relative;
  display: table;         /* force la largeur à s’adapter au contenu */
  margin: 0 auto;         /* centre */
   z-index: 5;             /* Assure que .hud-shell est sous le HUD */
}


/* HUD overlay */
.hud{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;

   transform: translateY(30px); /* ajuste ici */
}

/* ==========================
   HUD BOTTOM RIGHT OVERLAY (nouveau coin bas-droite)
   ========================== */
.hud-br-overlay {
  position: absolute;
  bottom: 0;              /* positionner tout en bas */
  right: 0;               /* positionner tout à droite */
  width: 100%;            /* occupe toute la largeur du parent */
  height: 100%;           /* occupe toute la hauteur du parent */
  z-index: 11;            /* Assurer que le coin bas-droite soit derrière le contenu */
  pointer-events: none;
}

/* le contenu doit rester au dessus */
.system-frame{
  position: relative;
  z-index: 10;
}


.hud-tl{
  --c: rgba(220,245,255,.9);
  --th: 2px;

  --len: 200px;        /* zone du coin (tu peux augmenter) */
  --cut: 18px;         /* chanfrein plus proche du triangle */
  --seg: 84px;         /* longueur des traits (doublée) */

  position:absolute;
  top: 0px;
  left: 0px;
  width: var(--len);
  height: var(--len);
}

/* triangle détaché */
.hud-tl::after{
  content:"";
  position:absolute;
  top: -2px;          /* rapproche du coin */
  left: -2px;         /* rapproche du coin */
  width: 0;
  height: 0;
  border-top: 12px solid var(--c);
  border-right: 12px solid transparent;
  opacity: .95;
  filter: drop-shadow(0 0 6px rgba(120,240,255,.2));
}

/* cadre haut + gauche + chanfrein */
.hud-tl::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    /* trait du haut (plus long) */
    linear-gradient(var(--c), var(--c))
      var(--cut) 0 / var(--seg) var(--th) no-repeat,

    /* trait de gauche (plus long) */
    linear-gradient(var(--c), var(--c))
      0 var(--cut) / var(--th) var(--seg) no-repeat,

    /* chanfrein plus proche */
    linear-gradient(135deg,
      transparent 46%,
      var(--c) 46%,
      var(--c) 54%,
      transparent 54%
    )
      0 0 / var(--cut) var(--cut) no-repeat;
}

/* ==========================
   SECOND HUD CORNER (fine / grey)
   ========================== */

.hud-tl2{
  --c: rgba(220, 230, 240, .55); /* gris clair */
  --th: 1px;                    /* plus fin */

  --len: 240px;                 /* zone plus large */
  --cut: 16px;                  /* chanfrein proche */
  --seg: 130px;                 /* traits plus longs */

  position:absolute;
  top: 6px;                    /* léger décalage */
  left: 6px;                   /* juste à côté du premier */
  width: var(--len);
  height: var(--len);

  opacity: .85;
  filter: drop-shadow(0 0 3px rgba(120,240,255,.08));
}

/* PAS de triangle sur le second : uniquement le cadre */
.hud-tl2::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    /* trait du haut */
    linear-gradient(var(--c), var(--c))
      var(--cut) 0 / var(--seg) var(--th) no-repeat,

    /* trait de gauche */
    linear-gradient(var(--c), var(--c))
      0 var(--cut) / var(--th) var(--seg) no-repeat,

    /* chanfrein */
    linear-gradient(135deg,
      transparent 48%,
      var(--c) 48%,
      var(--c) 52%,
      transparent 52%
    )
      0 0 / var(--cut) var(--cut) no-repeat;
}
/*-------------------------------------------------------------------------------------------------*/

/* ==========================
   Coin bas-droite
   ========================== */

/* Coin principal bas-droite */
.hud-br {
  --c: rgba(220,245,255,.9);
  --th: 2px;
  --len: 200px;           /* zone du coin */
  --cut: 18px;            /* chanfrein plus proche du triangle */
  --seg: 84px;            /* longueur des traits (doublée) */

  position: absolute;
  bottom: 40px;
  right: 0px;
  width: var(--len);
  height: var(--len);
  transform: rotate(180deg); /* inversion des éléments */
}

/* Triangle détaché */
.hud-br::after {
  content: "";
  position: absolute;
  bottom: 192px;           /* position triangle */
  right: 192px;           /* à l'extérieur du coin */
  width: 0;
  height: 0;
  border-top: 12px solid var(--c);
  border-left: 12px solid transparent; /* triangle inversé */
  opacity: .95;
  filter: drop-shadow(0 0 6px rgba(120,240,255,.2));
  transform: rotate(270deg); /* orienter correctement le triangle */
}

/* Cadre bas + droite + chanfrein */
.hud-br::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(var(--c), var(--c)) var(--cut) 0 / var(--seg) var(--th) no-repeat,  /* trait bas */
    linear-gradient(var(--c), var(--c)) 0 var(--cut) / var(--th) var(--seg) no-repeat,  /* trait droit */
    linear-gradient(135deg, transparent 46%, var(--c) 46%, var(--c) 54%, transparent 54%) 0 0 / var(--cut) var(--cut) no-repeat;  /* chanfrein */
}

/* Coin secondaire bas-droite (gris clair) */
.hud-br2 {
  --c: rgba(220, 230, 240, .55); /* gris clair */
  --th: 1px;                     /* plus fin */
  --len: 240px;                   /* zone plus large */
  --cut: 16px;                    /* chanfrein plus proche */
  --seg: 130px;                   /* traits plus longs */

  position: absolute;
  bottom: 46px;                    /* léger décalage vers le bas */
  right: 6px;                     /* juste à côté du premier */
  width: var(--len);
  height: var(--len);

  opacity: .85;
  filter: drop-shadow(0 0 3px rgba(120,240,255,.08));

  transform: rotate(180deg); /* tourner de 180° pour inverser */
}

/* Pas de triangle sur le second coin : uniquement le cadre */
.hud-br2::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(var(--c), var(--c)) var(--cut) 0 / var(--seg) var(--th) no-repeat,  /* trait bas */
    linear-gradient(var(--c), var(--c)) 0 var(--cut) / var(--th) var(--seg) no-repeat,  /* trait droit */
    linear-gradient(135deg, transparent 48%, var(--c) 48%, var(--c) 52%, transparent 52%) 0 0 / var(--cut) var(--cut) no-repeat;  /* chanfrein */
}