/* ========== Reset & Base ========== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:#050507;
  color:#cfd3d8;
  font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  overflow:hidden; /* Terminal scrollt intern */
}

/* ========== Font-Face (Restlicht) ========== */
@font-face{
  font-family:'Restlicht';
  src:url('/ebene1/fonts/restlicht.woff2') format('woff2'),
      url('/ebene1/fonts/restlicht.woff')  format('woff'),
      url('/ebene1/fonts/restlicht.ttf')   format('truetype');
  font-display:swap;
}
.font-loader{
  position:absolute;left:-9999px;top:-9999px;opacity:0;
  font-family:'Restlicht',monospace!important;font-size:1px;line-height:1;
}

/* ========== Bühne/Layout ========== */
.app,.stage{
  width:100%;height:100%;
  display:grid;place-items:center;
  perspective:1400px;
}
.stage{
  background:
    radial-gradient(1200px 600px at 20% 0%, #0a0c12 0%, transparent 60%),
    linear-gradient(#050507,#040406);
}

/* Hinweis: #matrix-Styles kommen aus effects.js (kein CSS-Override hier, um Konflikte zu vermeiden) */

/* ========== Terminal (schwebend, minimal) ========== */
.terminal-wrap{
  position:relative;
  transform-style:preserve-3d;
  transform: translateZ(-120px) rotateX(1deg) rotateY(.5deg);
  will-change:transform;
  animation:floatZ 9s ease-in-out infinite;
}
@keyframes floatZ{
  0%   {transform:translateZ(-120px) rotateX(1deg)   rotateY(.5deg)}
  50%  {transform:translateZ(-160px) rotateX(1.6deg) rotateY(.8deg)}
  100% {transform:translateZ(-120px) rotateX(1deg)   rotateY(.5deg)}
}

.terminal{
  position:relative; z-index:2;
  width:min(940px,92vw); height:min(560px,76vh);
  display:grid; grid-template-rows:auto 1fr auto;
  background:#000; /* SOLID schwarz */
  border:1px solid rgba(200,200,210,.28);
  border-radius:14px;
  box-shadow:0 12px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%   { background:rgba(0,0,0,1);   border-color:rgba(185,185,195,.22);}
  50%  { background:rgba(0,0,0,.94); border-color:rgba(185,185,195,.28);}
  100% { background:rgba(0,0,0,1);   border-color:rgba(185,185,195,.22);}
}

.term-header{
  display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.term-header .dots span{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#666;margin-right:6px;
}
.term-header .dots span:nth-child(2){background:#777}
.term-header .dots span:nth-child(3){background:#888;margin-right:0}
.term-header .title{
  font-size:12px; letter-spacing:.08em; color:#aeb2b7; text-transform:uppercase;
}

/* ========== Ausgabe ========== */
.view{
  position:relative; padding:14px 16px 8px 16px; overflow:auto;
  scrollbar-width:thin; scrollbar-color:#3a3f47 transparent;
  mask-image:linear-gradient(to bottom,transparent 0,black 16px,black calc(100% - 16px),transparent 100%);
  background:transparent;
}
.view::-webkit-scrollbar{height:10px;width:10px}
.view::-webkit-scrollbar-thumb{background:#3a3f47;border-radius:10px}
.view::-webkit-scrollbar-track{background:transparent}

.view .block{ white-space:pre-wrap; word-break:break-word; margin:0 0 6px 0; color:#cdd0d4; }
.view .block.dim{ filter:blur(1.25px); opacity:.65; }

/* User-Echo */
.user-echo{ color:#DB6B21; font-weight:500; }

/* ========== Prompt unten ========== */
.prompt{
  display:flex;align-items:center;gap:.25rem;
  padding:10px 14px 12px 14px; border-top:1px solid rgba(255,255,255,.06);
  background:transparent; color:#cfd3d8; min-height:42px;
}
.prompt .pre{ color:#9aa2ab; }
.prompt .buf{ white-space:pre; }
.caret{
  width:9px;height:1.15em;background:#d6dae0;display:inline-block;margin-left:2px;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{opacity:0} }

/* echtes Eingabefeld verstecken */
.cmd-input{ position:absolute;opacity:0;pointer-events:none;width:0;height:0;border:0;outline:0; }

/* ========== Z-Index-Sicherheit ========== */
#terminal, .terminal, .terminal-wrap { position:relative; z-index:2; }

/* Ende */