:root {
  --color-bg: #000;
  --color-fg: #0f0;
  --color-host: #0a0;
  --font-press-start: 'Press Start 2P', 'PixelOperatorMono8', 'PixelOperator Mono', 'Share Tech Mono', 'Fira Mono', 'Cascadia Mono', 'Consolas', 'Menlo', 'monospace';
  --font-terminal: var(--font-press-start);
  --glow: 0 0 5px rgba(0,255,0,0.5);
  --glow-soft: 0 0 1px rgba(0,255,0,0.5);
  --blur-low: 1px;
  --blur-med: 2px;
  --blur-hi: 3px;
  --opacity-low: 0.8;
  --opacity-med: 0.7;
  --opacity-hi: 0.6;
  --height-full: 100vh;
  --transition-privacy: filter 0.5s ease-out;
  --scrollbar-width: 8px;
  --scrollbar-radius: 4px;
  --scrollbar-bg: #0f0;
  --scrollbar-bg-hover: #0a0;
  --scrollbar-track: #000;
  --ansi-max-width-ch: 80;
}

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'PixelOperatorMono8';
  src:
    local('PixelOperatorMono8'), 
    url('https://fonts.cdnfonts.com/s/77798/PixelOperator8.woff') format('woff');
  font-display: swap;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-terminal);
  margin: 0;
  padding: 0;
  height: var(--height-full);
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}

#terminal {
  background-color: rgba(0,0,0,0.8);
  border: none;
  padding: 15px 0 15px 0;
  height: var(--height-full);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-fg) var(--color-bg);
  --scale: 1;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  transform-origin: top left;
  transform: scale(var(--scale));
  overflow-x: hidden !important;
  width: calc(var(--ansi-max-width-ch) * 1ch);
  min-width: 0;
  max-width: none !important; 
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
}

html, body {
  overflow-x: hidden !important;
  width: 100vw;
  max-width: 100vw;
}

body::after {
  content: "";
  display: block;
  background: var(--color-bg);
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

#terminal::-webkit-scrollbar {
  width: var(--scrollbar-width);
}
#terminal::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
#terminal::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg);
  border-radius: var(--scrollbar-radius);
}
#terminal::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-bg-hover);
}

.terminal-style,
.terminal-line,
.output,
.prompt,
#input,
#input-line {
  font-family: var(--font-terminal);
  color: var(--color-fg);
  text-shadow: var(--glow);
  white-space: pre;
  box-sizing: border-box;
  animation: flicker 1s infinite alternate, marching 1s linear forwards;
  overflow: hidden;
  width: calc(var(--ansi-max-width-ch) * 1ch);
  min-width: 0;
  max-width: calc(var(--ansi-max-width-ch) * 1ch);
  margin-left: 0;
  margin-right: 0;
  left: 0;
  right: unset;
  word-break: normal;
}

.terminal-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(-20px);
  min-height: 1em;
  width: calc(var(--ansi-max-width-ch) * 1ch);
  margin-top: 0;
  overflow-wrap: normal;
  overflow: visible !important;
  padding-bottom: 0;
  animation: fadeIn 0.5s ease-out forwards, flicker 1s infinite alternate, marching 1s linear forwards;
}

.prompt {
  flex-shrink: 0;
  margin-right: 8px;
  font-weight: normal;
  text-shadow: var(--glow);
  color: var(--color-fg);
  overflow: hidden;
  transform: translateX(-100%);
  width: auto;
  max-width: calc(var(--ansi-max-width-ch) * 1ch);
}

.user {
  color: var(--color-fg);
}
.host {
  color: var(--color-host);
}

#input-line {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-top: 8px;
  transition: var(--transition-privacy);
  width: calc(var(--ansi-max-width-ch) * 1ch);
}

.input-area {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  position: relative;
  width: 100%;
}

#input {
  background: none;
  border: none;
  color: var(--color-fg);
  font-family: var(--font-terminal);
  font-size: inherit;
  outline: none;
  flex: 1;
  min-width: 0;
  padding-right: 0;
  width: 100%;
  text-shadow: var(--glow);
  overflow: hidden;
  transform: translateX(-100%);
  transition: var(--transition-privacy);
  max-width: calc(var(--ansi-max-width-ch) * 1ch);
}

.output {
  color: var(--color-fg);
  width: calc(var(--ansi-max-width-ch) * 1ch);
  overflow: visible !important;
}

@media (max-width: 1400px) {
  #terminal {
    /* handled by JS scaling */
  }
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flicker {
  0%   { opacity: 1.0; text-shadow: 0 0 0px rgba(0,255,0,1.0);}
  100% { opacity: var(--opacity-low); text-shadow: var(--glow-soft);}
}
@keyframes marching {
  0% { transform: translateX(-100%);}
  100%{ transform: translateX(0);}
}

.float-character,
.fly-back {
  position: absolute;
  top: var(--orig-top);
  left: var(--orig-left);
  pointer-events: none;
  will-change: transform;
  font-size: inherit;
  line-height: inherit;
}
.float-character { animation: floatAround 10s ease-in-out infinite; }
.fly-back       { animation: flyBack 2s ease-in-out forwards; }

@keyframes floatAround {
  0% { transform: translate(0,0);}
  100% { transform: translate(var(--random-x), var(--random-y)) rotate(360deg);}
}
@keyframes flyBack {
  0%   { transform: translate(var(--random-x), var(--random-y)) rotate(360deg);}
  100% { transform: translate(0,0) rotate(0deg);}
}

.privacy-effect-low    { filter: blur(var(--blur-low))   opacity(var(--opacity-low)); }
.privacy-effect-medium { filter: blur(var(--blur-med))   opacity(var(--opacity-med)); }
.privacy-effect-high   { filter: blur(var(--blur-hi))    opacity(var(--opacity-hi));  }