*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --bg: #000;
  --fg: #3cff7a;
  --dim: #1e8c45;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
}

.terminal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  background: var(--bg);
  cursor: text;
}

.terminal .xterm { height: 100%; }
.terminal .xterm,
.terminal .xterm-viewport,
.terminal .xterm-screen,
.terminal .xterm-scrollable-element { background-color: var(--bg) !important; }

/* faint phosphor glow */
.terminal .xterm-rows { text-shadow: 0 0 3px rgba(60, 255, 122, 0.28); }

.terminal .xterm-viewport { scrollbar-width: thin; scrollbar-color: #0f3d20 transparent; }
.terminal .xterm-viewport::-webkit-scrollbar { width: 6px; }
.terminal .xterm-viewport::-webkit-scrollbar-thumb { background: #0f3d20; }

/* barely-there scanlines */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0.5;
}

.noscript {
  position: fixed;
  inset: 0;
  padding: 24px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--fg);
}

@media (max-width: 640px) {
  .terminal {
    padding:
      max(10px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines { display: none; }
}