/* =========================
   ORBITRON – SELF HOSTED
   ========================= */

@font-face{
  font-family: 'Orbitron';
  src: url('/assets/fonts/orbitron/Orbitron-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Orbitron';
  src: url('/assets/fonts/orbitron/Orbitron-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Orbitron';
  src: url('/assets/fonts/orbitron/Orbitron-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Subtiles Terminal-Rauschen */
.fx::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Scanlines */
.fx::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity:.30;
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: scan 8s linear infinite;
}

@keyframes scan{
  from{ transform: translateY(-10px); }
  to{ transform: translateY(10px); }
}

    :root{
      --bg0:#03080f;
      --bg1:#061827;
      --c:#33fff2;
      --c2:#7bfff8;
      --muted: rgba(200,255,255,.65);
      --panel: rgba(5,35,45,.28);
      --panel2: rgba(5,35,45,.14);
      --line: rgba(51,255,242,.22);
      --shadow: 0 0 18px rgba(51,255,242,.18), 0 0 60px rgba(51,255,242,.08);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color: rgba(235,255,255,.92);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background:
        radial-gradient(1000px 700px at 20% 10%, #0a2c39 0%, transparent 55%),
        radial-gradient(900px 650px at 80% 40%, #082034 0%, transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    /* Background FX */
    .fx{
      position:fixed; inset:0;
      pointer-events:none;
      z-index:-1;
    }
    .fx::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(rgba(80,255,245,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80,255,245,.08) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 35% 20%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 45%, transparent 75%);
      opacity:.75;
      transform: perspective(900px) rotateX(55deg) translateY(180px);
      filter: drop-shadow(0 0 12px rgba(51,255,242,.08));
    }
    .fx::after{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.03),
        rgba(255,255,255,.03) 1px,
        transparent 1px,
        transparent 6px
      );
      mix-blend-mode: overlay;
      opacity:.28;
      animation: scan 8s linear infinite;
    }
    @keyframes scan{
      from{ transform: translateY(-10px); }
      to{ transform: translateY(10px); }
    }

    /* Gate Layer */
    .gate{
      position:fixed; inset:0;
      display:grid;
      place-items:center;
      padding: 24px;
      background: rgba(0,0,0,.15);
      backdrop-filter: blur(6px);
    }

    .terminal{
      width: min(920px, 94vw);
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--panel), var(--panel2));
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .terminal-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(51,255,242,.18);
    }
    .term-title{
      letter-spacing:.18em;
      text-transform:uppercase;
      font-weight:800;
      font-size:12px;
      color: rgba(220,255,255,.92);
    }
    .status{
      font-size:12px;
      color: var(--muted);
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .status b{ color: rgba(123,255,248,.92); }

    .terminal-body{
      padding: 18px 16px 16px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      min-height: 360px;
    }
    @media (max-width: 840px){
      .terminal-body{ grid-template-columns: 1fr; }
    }

    .log{
      border-radius: 14px;
      border: 1px solid rgba(51,255,242,.16);
      background: rgba(0,0,0,.18);
      padding: 14px;
      position:relative;
      overflow:hidden;
    }

    .log pre{
      margin:0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12.5px;
      line-height:1.55;
      color: rgba(220,255,255,.88);
      white-space:pre-wrap;
    }

    .log .cursor{
      display:inline-block;
      width: 10px;
      height: 14px;
      background: rgba(123,255,248,.85);
      margin-left: 6px;
      vertical-align: -2px;
      animation: blink .9s steps(1,end) infinite;
    }
    @keyframes blink{ 50%{ opacity:0; } }

    .panel{
      border-radius: 14px;
      border: 1px solid rgba(51,255,242,.16);
      background: rgba(5,35,45,.18);
      padding: 14px;
    }
    .panel h3{
      margin:0 0 10px;
      font-size: 12px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .panel p{
      margin:0 0 14px;
      color: var(--muted);
      font-size: 13px;
      line-height:1.55;
    }

    /* Cookie “Banner” as terminal dialog */
    .cookie{
      margin-top: 10px;
      border-radius: 14px;
      border: 1px solid rgba(51,255,242,.18);
      background: rgba(0,0,0,.18);
      padding: 12px;
    }
    .cookie .row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .cookie small{
      color: var(--muted);
      display:block;
      margin-top:6px;
      line-height:1.45;
    }

    /* Zoom + Glitch Transition */
.gate.exit{
  animation: gateZoom 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes gateZoom{
  0%{
    transform: scale(1);
    filter: none;
    opacity:1;
  }
  35%{
    transform: scale(1.02);
    filter: contrast(1.15) saturate(1.1);
  }
  60%{
    transform: scale(1.06);
    filter:
      contrast(1.25)
      saturate(1.2)
      hue-rotate(6deg);
  }
  100%{
    transform: scale(1.12);
    filter:
      blur(8px)
      contrast(1.4)
      saturate(1.3);
    opacity:0;
  }
}
    /* Sci button (simple) */
    .btn{
      appearance:none;
      border: 1px solid rgba(51,255,242,.35);
      background: rgba(5,35,45,.22);
      color: rgba(235,255,255,.92);
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 800;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size: 11.5px;
      cursor:pointer;
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .btn:hover{
      background: rgba(5,35,45,.34);
      border-color: rgba(123,255,248,.65);
      box-shadow: 0 0 18px rgba(123,255,248,.22);
      transform: translateY(-1px);
    }
    .btn.secondary{
      border-color: rgba(51,255,242,.22);
      opacity:.85;
    }

    /* Access Granted overlay animation */
    .access{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      background: rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease;
    }
    .access.show{ opacity:1; pointer-events:auto; }

    .access-card{
      width:min(520px, 92vw);
      border-radius: 18px;
      border: 1px solid rgba(123,255,248,.35);
      background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(5,35,45,.18));
      box-shadow: 0 0 26px rgba(123,255,248,.25), 0 0 80px rgba(123,255,248,.10);
      padding: 18px 16px;
      text-align:center;
      position:relative;
      overflow:hidden;
    }

    .access-card::before{
      content:"";
      position:absolute; inset:-40%;
      background: linear-gradient(90deg, transparent, rgba(123,255,248,.55), transparent);
      transform: rotate(25deg) translateX(-40%);
      animation: sweep 1.2s ease-in-out forwards;
      opacity:.65;
    }
    @keyframes sweep{
      to{ transform: rotate(25deg) translateX(40%); opacity:0; }
    }

    .big{
      margin:0;
      font-weight: 900;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-size: clamp(20px, 4.2vw, 34px);
      text-shadow: 0 0 22px rgba(123,255,248,.20);
    }
    .sub{
      margin:10px 0 0;
      color: var(--muted);
      font-size: 13px;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

    /* “Boot progress” bar */
    .bar{
      margin: 14px auto 0;
      width: min(380px, 86%);
      height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(123,255,248,.35);
      overflow:hidden;
      background: rgba(0,0,0,.18);
    }
    .bar > i{
      display:block;
      height:100%;
      width:0%;
      background: rgba(123,255,248,.75);
      box-shadow: 0 0 22px rgba(123,255,248,.22);
      animation: load 1.15s ease forwards;
    }
    @keyframes load{ to{ width:100%; } }

    /* Main site hidden until access */
    #site{
      display:none;
      min-height:100vh;
      padding: 28px 0 80px;
    }
    #site.show{ display:block; }

    .container{
      width:min(1120px, 92vw);
      margin:0 auto;
    }

    /* Demo “real site” area */
    .site-card{
      margin-top: 18px;
      border-radius: 18px;
      border: 1px solid rgba(51,255,242,.18);
      background: linear-gradient(180deg, rgba(6,24,39,.55), rgba(6,24,39,.18));
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      padding: 22px 18px;
    }
    .site-card h1{
      margin:0 0 10px;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size: clamp(22px, 3vw, 34px);
    }
    .site-card p{ margin:0; color: var(--muted); line-height:1.6; }


/*==========================
   Hud Fake infos
   ========================= */

   
/* =========================
   ASTRYX TITLE STYLE
   ========================= */

.astryx-title{
  font-family: 'Orbitron', system-ui, sans-serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.95;
  margin: 0;
}

.astryx-title span{
  display: block;
  font-weight: 900;
  letter-spacing: .14em;

  /* dunkle Füllung */
  color: #2b2b2b;

  /* 1) weißer Innenrand */
  -webkit-text-stroke: 4px #ffffff;

  /* 2) goldener Außenrand + Glow */
  text-shadow:
    0 0 0 #ffffff,
    0 0 2px #ffffff,

    0 0 6px #e7c35a,
    0 0 14px #e7c35a,
    0 0 28px rgba(231,195,90,.65);

  paint-order: stroke fill;
}

/* Größen separat steuern */
.astryx-title span:first-child{
  font-size: clamp(30px, 18vw, 20px);
}

.astryx-title span:last-child{
  font-size: clamp(50px, 16vw, 20px);
  margin-top: 5px;
}


body {
  background: #000000;
  font-family: 'Orbitron', sans-serif;
  color: #ff2a2a;
}

.hud {
  position: relative;
  padding: 40px;
}

.glitch {
  font-size: 96px;
  position: relative;
  text-shadow: 0 0 10px #ff2a2a;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
}

.glitch::before {
  color: #ff0033;
  transform: translate(2px, 0);
  animation: glitch 2s infinite;
}

.glitch::after {
  color: #ff5353;
  transform: translate(-2px, 0);
}

@keyframes glitch {
  0% { clip-path: inset(0 0 90% 0); }
  50% { clip-path: inset(10% 0 60% 0); }
  100% { clip-path: inset(80% 0 0 0); }
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.03),
    rgba(255, 255, 255, 0.03) 1px,
    transparent 2px,
    transparent 6px
  );
  pointer-events: none;
}


    :root{
      --bg0:#03080f;
      --bg1:#061827;
      --grid: rgba(80, 255, 245, .08);

      --c: #33fff2;           /* Haupt-Türkis */
      --c2:#7bfff8;           /* Hover heller */
      --cDim: rgba(51,255,242,.22);

      --text: rgba(230,255,255,.92);
      --muted: rgba(200,255,255,.65);

      --radius: 14px;
      --stroke: 2px;
      --glass: rgba(5, 35, 45, .35);
      --glass2: rgba(5, 35, 45, .18);

      --shadow: 0 0 18px rgba(51,255,242,.18), 0 0 60px rgba(51,255,242,.08);
      --shadowStrong: 0 0 22px rgba(123,255,248,.28), 0 0 75px rgba(123,255,248,.12);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans";
      color:var(--text);
      background: radial-gradient(1200px 800px at 20% 10%, #0a2c39 0%, transparent 55%),
                  radial-gradient(1000px 700px at 80% 40%, #082034 0%, transparent 60%),
                  linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow-x:hidden;
    }

    /* ====== Space FX Layers ====== */
    .fx{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
    }

    /* Grid / Scanlines */
    .fx::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 35% 20%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 45%, transparent 75%);
      opacity:.75;
      transform: perspective(900px) rotateX(55deg) translateY(180px);
      filter: drop-shadow(0 0 12px rgba(51,255,242,.08));
    }

    .fx::after{
      content:"";
      position:absolute; inset:0;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,.03),
          rgba(255,255,255,.03) 1px,
          transparent 1px,
          transparent 6px
        );
      mix-blend-mode: overlay;
      opacity:.28;
      animation: scan 8s linear infinite;
    }

    @keyframes scan{
      from{ transform: translateY(-10px); }
      to{ transform: translateY(10px); }
    }

    /* ====== Layout ====== */
    .container{
      width:min(1120px, 92vw);
      margin:0 auto;
      padding:28px 0 80px;
    }

    header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:16px 18px;
      border-radius: calc(var(--radius) + 6px);
      background: linear-gradient(180deg, var(--glass), var(--glass2));
      border: 1px solid rgba(51,255,242,.22);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      letter-spacing:.12em;
      text-transform: uppercase;
      font-weight:700;
    }

    .logo{
      width:34px; height:34px;
      border-radius: 10px;
      background:
        radial-gradient(circle at 30% 25%, rgba(123,255,248,.9), transparent 58%),
        linear-gradient(145deg, rgba(51,255,242,.25), rgba(5,35,45,.1));
      border: 1px solid rgba(51,255,242,.55);
      box-shadow: 0 0 18px rgba(51,255,242,.18);
      position:relative;
      overflow:hidden;
    }
    .logo::after{
      content:"";
      position:absolute; inset:-40%;
      background: linear-gradient(90deg, transparent, rgba(123,255,248,.55), transparent);
      transform: rotate(25deg);
      animation: sheen 3.6s ease-in-out infinite;
      opacity:.65;
    }
    @keyframes sheen{
      0%,55%{ transform:translateX(-40%) rotate(25deg); opacity:.0; }
      70%{ opacity:.65; }
      100%{ transform:translateX(40%) rotate(25deg); opacity:0; }
    }

    nav{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .hero{
      margin-top:22px;
      padding:34px 18px 22px;
      border-radius: calc(var(--radius) + 10px);
      border: 1px solid rgba(51,255,242,.22);
      background: linear-gradient(180deg, rgba(6,24,39,.55), rgba(6,24,39,.18));
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-1px;
      background: radial-gradient(800px 220px at 20% 10%, rgba(51,255,242,.22), transparent 60%),
                  radial-gradient(700px 220px at 80% 0%, rgba(123,255,248,.18), transparent 65%);
      pointer-events:none;
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:22px;
      align-items:start;
      position:relative;
    }

    h1{
      margin:0 0 10px;
      font-size: clamp(28px, 4vw, 44px);
      line-height:1.06;
      letter-spacing:.02em;
      text-shadow: 0 0 22px rgba(51,255,242,.12);
    }

    .sub{
      margin:0 0 18px;
      color:var(--muted);
      max-width: 62ch;
    }

    .panel{
      padding:18px;
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(5,35,45,.40), rgba(5,35,45,.16));
      border: 1px solid rgba(51,255,242,.18);
      box-shadow: 0 0 26px rgba(0,0,0,.25);
    }

    .kpi{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top:16px;
    }

    .kpi .card{
      padding:14px 12px;
      border-radius: 12px;
      border: 1px solid rgba(51,255,242,.18);
      background: rgba(5,35,45,.22);
    }
    .kpi .num{
      font-size: 20px;
      font-weight: 800;
      letter-spacing:.04em;
      color: rgba(123,255,248,.92);
      text-shadow: 0 0 18px rgba(51,255,242,.14);
    }
    .kpi .lbl{ color:var(--muted); font-size:12px; margin-top:4px; }

    /* ====== SCI-FI BUTTON (Hover: Top→Right, Bottom→Up) ====== */
    .sci-btn{
  --btn-c: #33fff2;
  --btn-h: #7bfff8;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 22px;
  min-height: 44px;

  color: rgba(220,255,255,.92);
  background: rgba(5,35,45,.22);
  border: 1px solid rgba(51,255,242,.25);
  border-radius: 12px;

  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: 12px;

  backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: visible;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

/* === Haupt-Rahmen (wächst nach oben & unten) === */
.sci-btn::before{
  content:"";
  position:absolute;
  left: -6px;
  right: -6px;
  top: -4px;
  bottom: -4px;

  border-radius: 14px;
  border: 2px solid rgba(51,255,242,.6);
  box-shadow: 0 0 18px rgba(22, 100, 95, 0.18);

  transform: scaleY(1);
  transition:
    transform .22s cubic-bezier(.2,.9,.2,1.2),
    border-color .18s ease,
    box-shadow .18s ease;
  pointer-events:none;
}

/* === Seitenlinien links & rechts === */
.sci-btn::after{
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 25px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(123,255,248,.95),
    transparent
  );

  transform: translate(-50%, -50%);
  opacity: 0;

  transition:
    width .22s cubic-bezier(.2,.9,.2,1.2),
    opacity .18s ease;
  pointer-events:none;
}

/* ===== HOVER ===== */
.sci-btn:hover{
  background: rgba(5,35,45,.32);
  border-color: rgba(123,255,248,.4);
  box-shadow: 0 0 26px rgba(123,255,248,.25);
  color: rgba(240,255,255,.96);
}

/* Rahmen wächst nach oben & unten */
.sci-btn:hover::before{
  transform: scaleY(1.1);
  border-color: rgba(123,255,248,.85);
  box-shadow: 0 0 28px rgba(123,255,248,.35);
}

/* Seitenlinien fahren links & rechts aus */
.sci-btn:hover::after{
  width: 150%;
  opacity: 0.250;
}

/* Snappy Rücksprung */
.sci-btn:not(:hover)::before,
.sci-btn:not(:hover)::after{
  transition:
    transform .14s cubic-bezier(.2,1.4,.2,1),
    width .14s cubic-bezier(.2,1.4,.2,1),
    opacity .14s ease;
}


    /* ====== Sections ====== */

    .feature{
      padding:16px;
      border-radius: var(--radius);
      border: 1px solid rgba(51,255,242,.18);
      background: linear-gradient(180deg, rgba(5,35,45,.26), rgba(5,35,45,.12));
      box-shadow: 0 0 30px rgba(0,0,0,.18);
      position:relative;
      overflow:hidden;
    }
    .feature::before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(420px 160px at 20% 0%, rgba(51,255,242,.14), transparent 60%);
      opacity:.9;
      pointer-events:none;
    }
    .feature h3{
      margin:0 0 8px;
      font-size: 14px;
      letter-spacing:.10em;
      text-transform: uppercase;
    }
    .feature p{
      margin:0;
      color:var(--muted);
      font-size: 13px;
      line-height:1.55;
    }

    footer{
      margin-top:18px;
      color: rgba(200,255,255,.55);
      font-size: 12px;
      padding: 14px 4px;
      display:flex;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }

    /* ====== Responsive ====== */
    @media (max-width: 900px){
      .hero-grid{ grid-template-columns: 1fr; }
      section{ grid-template-columns: 1fr; }
      .kpi{ grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 520px){
      .kpi{ grid-template-columns: 1fr; }
      nav{ justify-content:flex-start; }
    }

    /* =========================
    Hud fake infos
    ========================= */
    /* ===== TOP HUD (immer sichtbar) ===== */
:root{
  --hudH: 56px;
}

.top-hud{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hudH);
  z-index: 9999;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 14px;

  border-bottom: 1px solid rgba(51,255,242,.18);
  background: linear-gradient(180deg, rgba(5,35,45,.40), rgba(5,35,45,.16));
  backdrop-filter: blur(10px);
  box-shadow: 0 0 18px rgba(51,255,242,.10);
}

.top-hud__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
  white-space: nowrap;
}

.top-hud .tag{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(51,255,242,.28);
  background: rgba(0,0,0,.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235,255,255,.92);
}

.top-hud .ship{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,255,255,.92);
}

.top-hud .sep{ opacity:.6; }

.top-hud .sub{
  font-size: 11px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
}

.top-hud__right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.top-hud .chip{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(51,255,242,.16);
  background: rgba(0,0,0,.16);
}

.top-hud .chip .k{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,255,255,.60);
}

.top-hud .chip .v{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(230,255,255,.92);
  text-shadow: 0 0 14px rgba(51,255,242,.10);
}

.top-hud .chip.ok{
  border-color: rgba(123,255,248,.35);
  box-shadow: 0 0 18px rgba(123,255,248,.10);
}

/* Gate + Site unter HUD schieben */
#gate, #site{
  padding-top: var(--hudH);
}

/* Mobile */
@media (max-width: 560px){
  :root{ --hudH: 64px; }
  .top-hud{ align-items:flex-start; height: var(--hudH); }
  .top-hud .chip{ padding: 6px 8px; }
}

/* Zahlen laufen nicht: gleiche Ziffernbreite */
.top-hud{
  font-variant-numeric: tabular-nums;
}

/* Werte bekommen feste Breite, damit nichts "wackelt" */
#ueeTime{ display:inline-block; width: 10ch; text-align:right; }  /* 12:34:56Z */
#ueeDate{ display:inline-block; width: 9ch;  text-align:right; }  /* 2956.014 */
#ping{    display:inline-block; width: 6ch;  text-align:right; }  /* 999 ms */
#crew{    display:inline-block; width: 6ch;  text-align:right; }  /* 18/28 */
#shipStatus{ display:inline-block; width: 6ch; text-align:right; }/* GREEN */
#clearance{ display:inline-block; width: 12ch; text-align:right; }/* AUTH REQUIRED */

/* ===== Shell Layout (unter Top HUD) ===== */
:root{
  --sidebarW: 270px;
  --gap: 14px;
}

#site{
  display: none; /* bleibt wie bisher versteckt */
  padding-top: var(--hudH);
}

#site.show{
  display: block;
}

/* Grid: Sidebar links, Content rechts */
.shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  grid-template-columns: var(--sidebarW) 1fr;
  gap: var(--gap);
}

/* ===== Sidebar Navy Clean ===== */
.sidebar{
  position: sticky;
  top: calc(var(--hudH) + 14px);
  align-self: start;

  border-radius: 18px;
  border: 1px solid rgba(51,255,242,.18);
  background: linear-gradient(180deg, rgba(5,35,45,.34), rgba(5,35,45,.14));
  box-shadow: 0 0 18px rgba(51,255,242,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;

  /* Animation start state */
  opacity: 0;
  transform: translateX(-18px);
  filter: blur(8px);
}

.content{
  border-radius: 18px;
  border: 1px solid rgba(51,255,242,.18);
  background: linear-gradient(180deg, rgba(5,35,45,.22), rgba(5,35,45,.10));
  box-shadow: 0 0 18px rgba(51,255,242,.08);
  backdrop-filter: blur(10px);
  overflow: hidden;

  /* Animation start state */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
}

/* Wenn site ready: Animation rein */
#site.ready .sidebar{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.9,.2,1), filter .65s ease;
}

#site.ready .content{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.9,.2,1), filter .65s ease;
  transition-delay: .12s;
}

/* Sidebar sections */
.side-head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(51,255,242,.16);
  background: rgba(0,0,0,.14);
}
.side-badge{
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(51,255,242,.28);
  background: rgba(0,0,0,.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235,255,255,.92);
}
.side-title{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,255,255,.92);
}
.side-sub{
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
}

.side-section{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(51,255,242,.12);
}
.side-label{
  padding: 0 6px 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,255,255,.60);
}

.nav-item{
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(235,255,255,.90);
  padding: 10px 10px;
  border-radius: 14px;
  cursor: pointer;

  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-item:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(51,255,242,.18);
  transform: translateY(-1px);
}

.nav-item.is-active{
  background: rgba(0,0,0,.22);
  border-color: rgba(123,255,248,.32);
  box-shadow: 0 0 18px rgba(123,255,248,.10) inset;
}

.nav-key{
  justify-self: start;
  width: 44px;
  display:inline-flex;
  justify-content:center;
  padding: 6px 0;
  border-radius: 12px;
  border: 1px solid rgba(51,255,242,.16);
  background: rgba(0,0,0,.14);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(200,255,255,.70);
}

.nav-text{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.nav-hint{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,255,255,.55);
}

/* Links look like nav items */
.nav-link{
  text-decoration: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;

  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: rgba(235,255,255,.90);

  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-link:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(51,255,242,.18);
  transform: translateY(-1px);
}

.side-foot{
  padding: 12px 14px;
  background: rgba(0,0,0,.14);
}
.meta-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 4px 0;
}
.m-k{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,255,255,.55);
}
.m-v{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,255,255,.90);
}

/* Views */
.view{ display:none; padding: 18px; }
.view.is-active{ display:block; }

.card{
  border-radius: 16px;
  border: 1px solid rgba(51,255,242,.16);
  background: rgba(0,0,0,.14);
  padding: 16px;
}
.card-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(240,255,255,.92);
}
.card-text{
  margin: 0;
  color: rgba(200,255,255,.65);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px){
  :root{ --sidebarW: 100%; }
  .shell{ grid-template-columns: 1fr; }
  .sidebar{ position: relative; top: 0; }
}

/* ===== View Loader Overlay ===== */
.content{ position: relative; }

.view-loader{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.view-loader.show{
  opacity: 1;
  pointer-events: auto;
}

.view-loader__card{
  width: min(460px, 88%);
  border-radius: 16px;
  border: 1px solid rgba(51,255,242,.20);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(5,35,45,.14));
  box-shadow: 0 0 18px rgba(51,255,242,.12);
  padding: 14px 14px 12px;
}

.view-loader__title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(235,255,255,.92);
}

.view-loader__meta{
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
}

.view-loader__bar{
  margin-top: 12px;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(123,255,248,.32);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

.view-loader__bar i{
  display:block;
  height:100%;
  width: 0%;
  background: rgba(123,255,248,.75);
  box-shadow: 0 0 18px rgba(123,255,248,.18);
  animation: viewLoad 0.55s ease forwards;
}

@keyframes viewLoad{
  to{ width: 100%; }
}

/* ===== GLOBAL FOOTER (always visible) ===== */
:root{
  --footerH: 46px;
}

.global-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footerH);
  z-index: 9998;

  border-top: 1px solid rgba(51,255,242,.18);
  background: linear-gradient(0deg, rgba(5,35,45,.40), rgba(5,35,45,.18));
  backdrop-filter: blur(10px);
  box-shadow: 0 0 18px rgba(51,255,242,.10);
}

.footer-inner{
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footer-left{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.footer-tag{
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(51,255,242,.28);
  background: rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(235,255,255,.92);
}

.footer-meta{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
}

.footer-right{
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-link{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,255,255,.75);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}

.footer-link:hover{
  color: rgba(240,255,255,.95);
  background: rgba(0,0,0,.18);
}

.footer-sep{
  opacity: .5;
}

/* ===== Platz für Footer schaffen ===== */
#site{
  padding-bottom: var(--footerH);
}

/* Mobile */
@media (max-width: 560px){
  :root{ --footerH: 56px; }
  .footer-inner{
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
}

/* ===== Terminal Scroll Fix ===== */

/* Gesamtes Terminal begrenzen */
.terminal{
  max-height: min(80vh, 720px); /* nie höher als Viewport */
  display: flex;
  flex-direction: column;
}

/* Header bleibt fix sichtbar */
.terminal-header{
  flex: 0 0 auto;
}

/* BODY wird scrollbar */
.terminal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 6px; /* Platz für Scrollbar */
}

/* Optional: sanftes Scrollen */
.terminal-body{
  scroll-behavior: smooth;
}

/* ===== Terminal Scrollbar (WebKit) ===== */
.terminal-body::-webkit-scrollbar{
  width: 6px;
}

.terminal-body::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
}

.terminal-body::-webkit-scrollbar-thumb{
  background: rgba(123,255,248,.45);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(123,255,248,.35);
}

.terminal-body::-webkit-scrollbar-thumb:hover{
  background: rgba(123,255,248,.75);
}

/* ===== FIX: Nur Content scrollt, nicht die ganze Seite ===== */
html, body{
  height: 100%;
}

body{
  overflow: hidden; /* Seite selbst scrollt nicht mehr */
}

/* Shell ist der sichtbare Bereich zwischen HUD und Footer */
.shell{
  height: calc(100vh - var(--hudH) - var(--footerH));
  overflow: hidden; /* verhindert Scroll in shell */
}

/* Sidebar bleibt stehen */
.sidebar{
  height: 100%;
  overflow: hidden;
}

/* Content ist der EINZIGE Scrollcontainer */
.content{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Optional: schöner Scrollbar für Content */
.content::-webkit-scrollbar{ width: 6px; }
.content::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); }
.content::-webkit-scrollbar-thumb{
  background: rgba(123,255,248,.45);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(123,255,248,.25);
}
.content::-webkit-scrollbar-thumb:hover{ background: rgba(123,255,248,.75); }

/* IMPORTANT: Entferne/überschreibe das Padding-bottom im #site,
   weil Footer fixed ist und wir die Höhe schon einkalkulieren */
#site{
  padding-bottom: 0 !important;
}

/* ===== Image Box (UEE Navy Style) ===== */
.image-box{
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(51,255,242,.25);
  background: linear-gradient(
    180deg,
    rgba(10,40,50,.45),
    rgba(5,25,32,.35)
  );
  backdrop-filter: blur(8px);

  box-shadow:
    0 0 18px rgba(51,255,242,.12),
    inset 0 0 0 1px rgba(255,255,255,.04);

  transition: transform .2s ease, box-shadow .2s ease;
}

/* optional: dezenter Hover */
.image-box:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 26px rgba(51,255,242,.22),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Bildbereich */
.image-box__media{
  position: relative;
  background: #000;
}

.image-box__media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* optional: feine Scanline / Overlay */
.image-box__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 4px
    );
  pointer-events: none;
  opacity: .35;
}

/* Caption */
.image-box__caption{
  padding: 10px 12px;

  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;

  color: rgba(210,255,255,.85);

  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(51,255,242,.25);
}

/* ===== Boot Splash ===== */
.boot-splash{
  position: fixed;
  inset: 0;
  z-index: 10050; /* über Gate/Terminal */
  display: grid;
  place-items: center;

  background: radial-gradient(circle at 50% 40%, rgba(20,90,105,.35), rgba(0,0,0,.92) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.boot-splash.show{
  opacity: 1;
  pointer-events: auto;
}

.boot-splash__inner{
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;

  border: 1px solid rgba(51,255,242,.20);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
  padding: 22px 22px 18px;

  box-shadow: 0 0 22px rgba(51,255,242,.12);
}

.boot-splash__logo{
  width: min(220px, 60vw);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(123,255,248,.22));
}

.boot-splash__text{
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 22px;
  color: rgba(240,255,255,.92);
  text-shadow: 0 0 18px rgba(123,255,248,.18);
}

.boot-splash__sub{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
}

/* optional: dezente Scanlines nur im Splash */
.boot-splash::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0px,
    rgba(255,255,255,.03) 1px,
    transparent 2px,
    transparent 5px
  );
}

/* ===== HUD WARNING (RED ALERT) ===== */
.hud-warning{
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-top: 18px;
  padding: 14px 16px;

  border-radius: 12px;
  border: 1px solid rgba(255,80,80,.45);

  background:
    linear-gradient(
      180deg,
      rgba(80,10,10,.55),
      rgba(40,5,5,.55)
    );

  box-shadow:
    0 0 18px rgba(255,80,80,.25),
    inset 0 0 0 1px rgba(255,255,255,.04);

  color: rgba(255,210,210,.95);
}

/* Icon links */
.hud-warning__icon{
  flex: 0 0 auto;

  width: 28px;
  height: 28px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-weight: 900;
  font-size: 16px;
  line-height: 1;

  color: #fff;
  background: rgba(255,80,80,.85);

  box-shadow:
    0 0 10px rgba(255,80,80,.6);
}

/* Text */
.hud-warning__text{
  font-size: 13px;
  line-height: 1.5;
}

.hud-warning__text strong{
  display: block;
  margin-bottom: 4px;

  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,230,230,.9);
}

/* Optional: dezentes Pulsieren */
@keyframes hudWarningPulse{
  0%,100%{ box-shadow: 0 0 18px rgba(255,80,80,.25); }
  50%{ box-shadow: 0 0 26px rgba(255,80,80,.45); }
}

.hud-warning{
  animation: hudWarningPulse 3.5s ease-in-out infinite;
}

/* ===== LEGAL MODAL ===== */
.legal-modal{
  position: fixed;
  inset: 0;
  z-index: 10060; /* über Gate/TopHUD/Footer */
}

.legal-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
}

.legal-modal__window{
  position: relative;
  width: min(920px, 92vw);
  max-height: min(78vh, 720px);
  margin: calc(var(--hudH) + 18px) auto 18px;
  border-radius: 18px;
  border: 1px solid rgba(51,255,242,.22);
  background: linear-gradient(180deg, rgba(5,35,45,.40), rgba(5,35,45,.16));
  box-shadow: 0 0 18px rgba(51,255,242,.18), 0 0 60px rgba(51,255,242,.08);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.legal-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(51,255,242,.16);
  background: rgba(0,0,0,.14);
}

.legal-modal__title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,255,255,.92);
}

.legal-modal__close{
  appearance:none;
  border: 1px solid rgba(51,255,242,.25);
  background: rgba(0,0,0,.18);
  color: rgba(240,255,255,.9);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
}

.legal-modal__close:hover{
  border-color: rgba(123,255,248,.55);
  box-shadow: 0 0 18px rgba(123,255,248,.18);
}

.legal-modal__body{
  padding: 14px;
  overflow:auto;
}

/* Optional: Typo im Modal */
.legal-modal__body h2{
  margin: 0 0 10px;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.legal-modal__body h3{
  margin: 18px 0 8px;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.legal-modal__body p,
.legal-modal__body li{
  color: rgba(200,255,255,.65);
  line-height: 1.6;
}

/* ===== LEGAL MODAL SCROLLBAR ===== */

/* Breite */
.legal-modal__body::-webkit-scrollbar{
  width: 6px;
}

/* Track (Hintergrund) */
.legal-modal__body::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
}

/* Thumb (der bewegliche Balken) */
.legal-modal__body::-webkit-scrollbar-thumb{
  background: rgba(123,255,248,.45);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(123,255,248,.25);
}

/* Hover */
.legal-modal__body::-webkit-scrollbar-thumb:hover{
  background: rgba(123,255,248,.75);
}

/* ===== ACCESS DENIED / GUIDES PLACEHOLDER ===== */
.access-denied{
  margin: 40px auto;
  max-width: 560px;
  text-align: center;

  padding: 28px 22px;
  border-radius: 18px;

  border: 1px solid rgba(255,80,80,.45);
  background: linear-gradient(
    180deg,
    rgba(80,10,10,.45),
    rgba(40,5,5,.35)
  );

  box-shadow:
    0 0 26px rgba(255,80,80,.25),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.access-denied__icon{
  font-size: 42px;
  margin-bottom: 12px;
  color: rgba(255,120,120,.95);
  text-shadow: 0 0 18px rgba(255,80,80,.55);
}

.access-denied__title{
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,230,230,.95);
}

.access-denied__code{
  margin: 6px 0 18px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,170,170,.75);
}

.access-denied__text{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,210,210,.85);
}

.access-denied__meta{
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.access-denied__meta div{
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,80,80,.25);
}

.access-denied__meta span{
  display: block;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,170,170,.65);
}

.access-denied__meta b{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,230,230,.95);
}

.access-denied__hint{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,180,180,.75);
}

/* ===== TERMINE: TERMINAL ENTRY ===== */
.term-entry{
  border-radius: 16px;
  border: 1px solid rgba(51,255,242,.18);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(5,35,45,.10));
  box-shadow: 0 0 18px rgba(51,255,242,.08);
  padding: 14px;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}

/* Subtiles Grid/Scan Overlay */
.term-entry::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 180px at 20% 0%, rgba(51,255,242,.14), transparent 60%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,.03) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity: .45;
  pointer-events:none;
}

.term-entry__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(51,255,242,.14);
  position: relative;
  z-index: 1;
}

.term-entry__badge{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(51,255,242,.28);
  background: rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(235,255,255,.92);
}

.term-entry__stamp{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,255,255,.65);
  white-space: nowrap;
}

.term-entry__k{ opacity: .8; }
.term-entry__v{ color: rgba(230,255,255,.92); font-weight: 900; }
.term-entry__sep{ opacity: .5; padding: 0 6px; }

.term-entry__title{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  text-align:center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,255,255,.92);
  position: relative;
  z-index: 1;
}

.term-entry__pulse{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(123,255,248,.85);
  box-shadow: 0 0 14px rgba(123,255,248,.45);
  animation: termPulse 1.2s ease-in-out infinite;
}
@keyframes termPulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.45); opacity: .55; }
}

.term-entry__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.term-entry__col{
  border-radius: 14px;
  border: 1px solid rgba(51,255,242,.14);
  background: rgba(0,0,0,.16);
  padding: 10px 10px 8px;
}

.term-entry__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(51,255,242,.10);
}
.term-entry__row:last-child{ border-bottom: 0; }

.term-entry__label{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,255,255,.55);
  font-weight: 900;
}

.term-entry__value{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235,255,255,.90);
  font-weight: 900;
  text-align: right;
}

.term-entry__value.ok{
  color: rgba(123,255,248,.92);
  text-shadow: 0 0 14px rgba(123,255,248,.18);
}

.term-entry__body{
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

.term-entry__body p{
  margin: 0;
  color: rgba(200,255,255,.65);
  line-height: 1.6;
}

.term-entry__body strong{
  color: rgba(230,255,255,.92);
}

.term-entry__footer{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:center;
}

.term-entry__chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(51,255,242,.18);
  background: rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,255,255,.75);
}

/* Highlight Version */
.term-entry--highlight{
  border-color: rgba(123,255,248,.32);
  box-shadow: 0 0 22px rgba(123,255,248,.12);
}

/* Muted placeholder */
.term-entry--muted{
  opacity: .8;
}
.term-entry--muted .term-entry__title{
  justify-content:flex-start;
  font-size: 11px;
  opacity: .9;
}
.term-entry--muted::before{
  opacity: .25;
}

/* Responsive */
@media (max-width: 720px){
  .term-entry__grid{ grid-template-columns: 1fr; }
  .term-entry__head{ flex-direction: column; align-items:flex-start; }
  .term-entry__title{ justify-content:flex-start; }
}

#site{
  position: relative;
}

#site::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("images/astryx_ship_overlay.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(1300px, 95%);
  opacity: .12;
  pointer-events:none;
  z-index: 0;
}

#site .shell{
  position: relative;
  z-index: 1;
}