/* ════════════════════════════════════════════════════════════════
   LOGIKATO · hud.css
   Mecha-Cockpit-Overlay — sitzt als Layer über dem Hero.
   
   Alle Shapes als URL-encoded SVG via mask-image — Farbe kommt
   über background-color: var(--primary), bleibt also theme-bar.
   pointer-events: none auf dem Container, blockt also keinen Klick.
   ════════════════════════════════════════════════════════════════
   
   ERWARTETE HTML-STRUKTUR (im Hero):
   
   <section class="hero">
     <canvas class="hero__bg"></canvas>            <-- WebGL-Wolken
     
     <div class="hud" aria-hidden="true">
       <span class="hud__corner hud__corner--tl"></span>
       <span class="hud__corner hud__corner--tr"></span>
       <span class="hud__corner hud__corner--bl"></span>
       <span class="hud__corner hud__corner--br"></span>
       <span class="hud__reticle"></span>
       <span class="hud__scale hud__scale--left"></span>
       <span class="hud__scale hud__scale--right"></span>
       <span class="hud__side hud__side--left"></span>
       <span class="hud__side hud__side--right"></span>
       <span class="hud__panel"></span>
       <span class="hud__scanlines"></span>
     </div>
     
     <aside class="hud-info">
       <span class="mono mono--xs">COORD  48°N  10°E</span>
       <span class="mono mono--xs" id="hud-clock">--:--:--</span>
       <span class="mono mono--xs">LOGIKATO / ONLINE</span>
     </aside>
     
     <div class="hero__content">...</div>
   </section>
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   1 · HUD-CONTAINER
──────────────────────────────────────────────────────────────── */

.hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;                  /* blockt keinen Hero-Klick */
  overflow: hidden;
  color: var(--primary);                 /* Erbung für direkt gefärbte Children */
}

.hud > * {
  position: absolute;
  display: block;
}


/* ────────────────────────────────────────────────────────────────
   2 · ECK-BRACKETS — L-Förmig, reines CSS via Borders
──────────────────────────────────────────────────────────────── */

.hud__corner {
  width: 28px;
  height: 28px;
  border: 1px solid var(--primary);
  opacity: 0.55;
}

.hud__corner--tl {
  top:    var(--sp-5);
  left:   var(--sp-5);
  border-right: none;
  border-bottom: none;
}

.hud__corner--tr {
  top:    var(--sp-5);
  right:  var(--sp-5);
  border-left: none;
  border-bottom: none;
}

.hud__corner--bl {
  bottom: var(--sp-5);
  left:   var(--sp-5);
  border-right: none;
  border-top: none;
}

.hud__corner--br {
  bottom: var(--sp-5);
  right:  var(--sp-5);
  border-left: none;
  border-top: none;
}


/* ────────────────────────────────────────────────────────────────
   3 · TOP-RETICLE — Haupt-Targeting-Symbol
   Raute mit Innen-Dreieck, Tail-Line, Down-Arrow.
──────────────────────────────────────────────────────────────── */

.hud__reticle {
  top: clamp(var(--sp-5), 5vh, 4rem);
  left: 50%;
  width: 56px;
  height: 96px;
  transform: translateX(-50%);
  background-color: var(--primary);
  opacity: 0.85;

  -webkit-mask: var(--reticle-mask) center / contain no-repeat;
          mask: var(--reticle-mask) center / contain no-repeat;

  animation: hud-breathe 5.4s var(--ease-drift) infinite;
}

:root {
  --reticle-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M30 8 L52 30 L30 52 L8 30 Z'/%3E%3Cpath d='M22 22 L30 35 L38 22 Z' fill='black' stroke='none'/%3E%3Cline x1='30' y1='58' x2='30' y2='78'/%3E%3Cline x1='24' y1='78' x2='36' y2='78' stroke-width='0.7'/%3E%3Cpath d='M26 82 L30 92 L34 82'/%3E%3C/svg%3E");
}

@keyframes hud-breathe {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translateX(-50%) scale(1.045);
    opacity: 1;
  }
}


/* ────────────────────────────────────────────────────────────────
   4 · SEITLICHE SKALEN — Diagonale Ruler-Linien
   Sehr dünn, sehr niedrige Opacity — suggerieren Perspektive.
──────────────────────────────────────────────────────────────── */

.hud__scale {
  top: 8vh;
  width: clamp(180px, 22vw, 320px);
  height: clamp(360px, 60vh, 620px);
  background-color: var(--bone);
  opacity: 0.12;

  -webkit-mask: var(--scale-mask) center / contain no-repeat;
          mask: var(--scale-mask) center / contain no-repeat;
}

.hud__scale--left  { left:  -2vw; }
.hud__scale--right { right: -2vw; transform: scaleX(-1); }

:root {
  --scale-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 500' fill='none' stroke='black' stroke-width='1'%3E%3Cline x1='10' y1='10' x2='190' y2='490'/%3E%3Cg stroke-width='0.6'%3E%3Cline x1='25' y1='30' x2='38' y2='25'/%3E%3Cline x1='40' y1='70' x2='50' y2='65'/%3E%3Cline x1='55' y1='110' x2='68' y2='105'/%3E%3Cline x1='70' y1='150' x2='80' y2='145'/%3E%3Cline x1='85' y1='190' x2='98' y2='185'/%3E%3Cline x1='100' y1='230' x2='110' y2='225'/%3E%3Cline x1='115' y1='270' x2='128' y2='265'/%3E%3Cline x1='130' y1='310' x2='140' y2='305'/%3E%3Cline x1='145' y1='350' x2='158' y2='345'/%3E%3Cline x1='160' y1='390' x2='170' y2='385'/%3E%3Cline x1='175' y1='430' x2='188' y2='425'/%3E%3C/g%3E%3C/svg%3E");
}


/* ────────────────────────────────────────────────────────────────
   5 · SIDE-ARROWS — Mittig links/rechts, doppel-Pfeil
   Wie >> und << im Screenshot — markieren die Mitte.
──────────────────────────────────────────────────────────────── */

.hud__side {
  top: 50%;
  width: 36px;
  height: 28px;
  background-color: var(--primary);
  opacity: 0.7;

  -webkit-mask: var(--side-mask) center / contain no-repeat;
          mask: var(--side-mask) center / contain no-repeat;
}

.hud__side--left  {
  left: 4vw;
  transform: translateY(-50%);
}

.hud__side--right {
  right: 4vw;
  transform: translateY(-50%) scaleX(-1);
}

:root {
  --side-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M30 5 L15 15 L30 25'/%3E%3Cpath d='M20 5 L5 15 L20 25'/%3E%3C/svg%3E");
}


/* ────────────────────────────────────────────────────────────────
   6 · INSTRUMENTEN-PANEL — Unten mittig
   Hexagon-Mitte, Pfeil-Gruppen links/rechts, Tick-Reihe oben.
──────────────────────────────────────────────────────────────── */

.hud__panel {
  bottom: clamp(var(--sp-5), 5vh, 3.5rem);
  left: 50%;
  width: clamp(280px, 32vw, 480px);
  height: clamp(56px, 8vh, 80px);
  transform: translateX(-50%);
  background-color: var(--primary);
  opacity: 0.7;

  -webkit-mask: var(--panel-mask) center / contain no-repeat;
          mask: var(--panel-mask) center / contain no-repeat;
}

:root {
  --panel-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 80' fill='none' stroke='black' stroke-width='1'%3E%3Cline x1='0' y1='40' x2='400' y2='40' stroke-width='0.5'/%3E%3Cpath d='M40 22 L60 40 L40 58 Z'/%3E%3Cpath d='M68 26 L84 40 L68 54 Z'/%3E%3Cpath d='M180 22 L220 22 L240 40 L220 58 L180 58 L160 40 Z'/%3E%3Cpath d='M192 34 L208 34 L200 46 Z' fill='black' stroke='none'/%3E%3Cpath d='M332 26 L316 40 L332 54 Z'/%3E%3Cpath d='M360 22 L340 40 L360 58 Z'/%3E%3Cg stroke-width='0.5'%3E%3Cline x1='10' y1='8' x2='10' y2='15'/%3E%3Cline x1='30' y1='8' x2='30' y2='15'/%3E%3Cline x1='50' y1='8' x2='50' y2='15'/%3E%3Cline x1='90' y1='8' x2='90' y2='15'/%3E%3Cline x1='110' y1='8' x2='110' y2='15'/%3E%3Cline x1='130' y1='8' x2='130' y2='15'/%3E%3Cline x1='270' y1='8' x2='270' y2='15'/%3E%3Cline x1='290' y1='8' x2='290' y2='15'/%3E%3Cline x1='310' y1='8' x2='310' y2='15'/%3E%3Cline x1='350' y1='8' x2='350' y2='15'/%3E%3Cline x1='370' y1='8' x2='370' y2='15'/%3E%3Cline x1='390' y1='8' x2='390' y2='15'/%3E%3C/g%3E%3Cg stroke-width='0.5' stroke='black' opacity='0.7'%3E%3Cline x1='10' y1='65' x2='10' y2='72'/%3E%3Cline x1='30' y1='65' x2='30' y2='72'/%3E%3Cline x1='50' y1='65' x2='50' y2='72'/%3E%3Cline x1='350' y1='65' x2='350' y2='72'/%3E%3Cline x1='370' y1='65' x2='370' y2='72'/%3E%3Cline x1='390' y1='65' x2='390' y2='72'/%3E%3C/g%3E%3C/svg%3E");
}


/* ────────────────────────────────────────────────────────────────
   7 · SCAN-LINES — Subtiler horizontaler Streifen über allem
   repeating-linear-gradient, opacity 0.025 (zwischen 0.02 und 0.03).
   pointer-events bleibt none.
──────────────────────────────────────────────────────────────── */

.hud__scanlines {
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    var(--bone) 2px,
    var(--bone) 3px
  );
  opacity: 0.025;
  mix-blend-mode: overlay;
}


/* ────────────────────────────────────────────────────────────────
   8 · HUD-INFO-BLOCK — oben rechts, Live-Status
   Liegt außerhalb von .hud — eigene Positionierung,
   damit es interaktiv bleibt (falls später z. B. Link).
──────────────────────────────────────────────────────────────── */

.hud-info {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: calc(var(--z-hud) + 1);

  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-align: right;
  color: var(--bone-dim);
}

.hud-info > * {
  display: block;
}

.hud-info > *:last-child {
  margin-top: var(--sp-2);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* —— Online-Pulse-Dot vor dem letzten Eintrag ───────────── */
.hud-info > *:last-child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  animation: hud-pulse 1.8s var(--ease-drift) infinite;
}

@keyframes hud-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}


/* ────────────────────────────────────────────────────────────────
   9 · ACCESSIBILITY — Animationen aus bei reduzierter Bewegung
──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .hud__reticle,
  .hud-info > *:last-child::before {
    animation: none;
  }

  .hud__reticle {
    transform: translateX(-50%);          /* Snap zurück auf Default */
  }
}


/* ────────────────────────────────────────────────────────────────
   10 · RESPONSIVE — Mobile entlastet das HUD
   Die großen Seiten-Skalen kosten zu viel Platz auf <768px.
──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .hud__scale {
    display: none;                         /* zu wuchtig auf Mobile */
  }

  .hud__side {
    width: 28px;
    height: 22px;
    opacity: 0.5;
  }

  .hud__reticle {
    width: 42px;
    height: 72px;
    top: var(--sp-4);
  }

  .hud__panel {
    width: 88%;
    height: 52px;
    bottom: var(--sp-4);
  }

  .hud__corner {
    width: 20px;
    height: 20px;
    top:    var(--sp-3) !important;        /* Override TL/TR top      */
    bottom: auto;                          /* (BL/BR rein dekorativ)  */
  }

  .hud__corner--bl,
  .hud__corner--br {
    top:    auto !important;
    bottom: var(--sp-3) !important;
  }

  .hud__corner--tl,
  .hud__corner--bl { left:  var(--sp-3); }

  .hud__corner--tr,
  .hud__corner--br { right: var(--sp-3); }

  .hud-info {
    top: var(--sp-4);
    right: var(--sp-4);
    gap: 2px;
  }

  .hud-info .mono--xs {
    font-size: 0.625rem;                   /* 10px — eng aber leserlich */
  }
}