:root { --header-h: 56px; --footer-h: 36px; --main-color: #00FF00; --main-color-rgb: 0, 255, 0; }

html, body {
  margin: 0; padding: 0;
  background: #000; color: var(--main-color);
  font-family: monospace; font-size: 18px; line-height: 1.25;
  height: 100%; overflow: hidden;
}

body {
  animation: flicker 0.15s infinite;
}

/* Reset headers for SEO semantic tags while keeping terminal look */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  margin: 0;
  font-weight: inherit;
  display: block; /* Default to block, classes can override */
}

/* Obere & untere Leiste: exakt 80 Zeichen (80ch), DOS-Stil */
header.dosbar, footer.dosbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 80ch; box-sizing: border-box;
  background: #000; color: var(--main-color);
  display: flex; align-items: center; gap: 2px; /* Engere Abstände */
  padding: 4px 2px; z-index: 10;
  overflow-x: auto; /* Scrollbar für mobile */
  scrollbar-width: none; /* Firefox */
}
header.dosbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

header.dosbar { top: 0; border-bottom: 2px solid var(--main-color); }
footer.dosbar { bottom: 0; border-top: 2px solid var(--main-color); justify-content: center; }
footer.dosbar a { color:var(--main-color); text-decoration:none; padding:0 6px; white-space: nowrap; }
footer.dosbar a:hover { text-decoration: underline; }

/* 80 Zeichen breit, scrollend, Höhe berücksichtigt Leisten */
#viewport {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: var(--header-h); bottom: var(--footer-h);
  width: 100%; max-width: 80ch; padding: 10px; 
  overflow-y: auto; overflow-x: auto; /* Horizontal scrollen wenn nötig */
  box-sizing: border-box;
}

@media (max-width: 600px) {
  /* Schriftgröße beibehalten (18px) oder sogar vergrößern, damit es mobil gut lesbar ist */
  .dos-btn { padding: 4px 8px; flex-shrink: 0; }
  #screen { padding-right: 0; min-width: 80ch; /* Erzwinge Breite für Layout */ }
}

@media (max-width: 900px) and (orientation: landscape) {
  :root { --header-h: 40px; --footer-h: 28px; }
  html, body { font-size: 14px; }
  
  /* Allow width to shrink below 80ch on mobile landscape */
  header.dosbar, footer.dosbar, #viewport, .page {
    max-width: 100%;
  }
  
  #screen {
    min-width: 0; /* Allow wrapping */
    width: 100%;
  }
  
  /* ASCII Art should scroll horizontally if needed */
  pre, .content-block {
    overflow-x: auto;
  }
  
  .dos-btn {
    font-size: 13px;
    padding: 2px 6px;
  }
}

/* Screen als Bezug für Cursor */
#screen { position: relative; white-space: pre-wrap; word-break: break-word; padding-right: 1ch; cursor: text; min-height: 50vh; }

/* Cursor */
#cursor { position: absolute; width: 14px; height: 1em; background: var(--main-color); animation: blink 1s steps(1) infinite; pointer-events: none; transform: translate(1px, 0); }

/* DOS-Buttons für Topbar & Inline */
.dos-btn { background: #000; color: var(--main-color); border: 2px solid var(--main-color); padding: 2px 4px; cursor: pointer; font-family: monospace; font-size: 16px; text-transform: uppercase; flex-shrink: 0; }
.dos-btn:hover { background: var(--main-color); color: #000; box-shadow: 0 0 8px var(--main-color); }
.dos-btn:active { filter: brightness(.9); }

/* Inline Content Box */
.inline-box { border-left: 2px solid var(--main-color); padding-left: 1ch; margin: .5em 0; opacity: .95; white-space: normal; }
.inline-box a { color:var(--main-color); text-decoration:none; }
.inline-box a:hover { text-decoration: underline; }

/* Layout Klassen */
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
.h-title { font-weight: bold; text-transform: uppercase; border-bottom: 2px solid var(--main-color); margin-bottom: 1em; display: inline-block; }
.h-sect { background: var(--main-color); color: #000; font-weight: bold; padding: 2px 6px; margin-top: 1.5em; margin-bottom: 0.2em; display: inline-block; }
.content-block { padding-left: 1ch; }

/* Effekte */
@keyframes blink { 50% { opacity: 0; } }
@keyframes slow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.btn-highlight {
  color: #fff !important;
  border-color: #fff !important;
  animation: slow-blink 4s infinite;
}
.btn-highlight:hover {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 0 10px #fff !important;
  animation: none;
}

@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1} 20%,24%,55%{opacity:.96} }
@keyframes glitch { 0%,95%,100%{text-shadow:none} 96%{text-shadow:2px 0 red,-2px 0 blue} }
body::after {
  content:""; position: fixed; inset:0; z-index: 20000;
  /* 1px hell (für Hintergrund-Raster), 2px dunkel (für Text-Scanlines) */
  background: repeating-linear-gradient(
    to bottom, 
    rgba(255,255,255,0.05) 0px, 
    rgba(255,255,255,0.05) 1px, 
    rgba(0,0,0,0.2) 1px, 
    rgba(0,0,0,0.2) 3px
  ); 
  pointer-events:none;
}

/* Content Area for Static Pages */
.page {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: var(--header-h); bottom: var(--footer-h);
  width: 100%; max-width: 80ch; padding: 10px; 
  overflow-y: auto; overflow-x: auto; box-sizing: border-box;
}

/* Orientation Overlay */
#orientation-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 21000;
  background: #000;
  align-items: center; justify-content: center;
}

#orientation-overlay .error-box {
  border: 2px solid var(--main-color);
  padding: 20px;
  color: var(--main-color);
  background: #000;
  text-align: center;
  font-family: monospace;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.2);
  max-width: 80%;
}

/* Magnetic Distortion Class */
.magnetic-active {
  filter: url(#magnetic-distortion);
  will-change: filter; /* Hint for browser optimization */
  transform: translateZ(0); /* Force GPU layer */
}

/* Rolling Bar Effect - Dedicated Element */
#magnetic-bar {
  position: fixed;
  top: var(--mag-pos, -10%);
  left: 0;
  width: 100%;
  height: 3em;
  background: rgba(255, 255, 255, 0.02);
  /* backdrop-filter removed for Firefox compatibility */
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  transition: top 0.1s linear;
  display: none; /* Hidden by default */
}
#magnetic-bar.active {
  display: block;
}

@media screen and (orientation: portrait) and (max-width: 900px) {
  #orientation-overlay { display: flex; }
}