:root {
  --amber: #ffb000;
  --dim: #8a6a2f;
  --bg: #0a0908;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  font-family: "IBM Plex Mono", "SF Mono", "Cascadia Mono", Consolas, "Noto Sans Mono CJK SC", monospace;
}

#frame {
  position: fixed;
  inset: 0;
  padding: 18px 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, #17130d 0%, #0a0908 55%, #050403 100%);
}

#screen {
  height: 100%;
  width: 100%;
}

#screen .xterm-viewport {
  background: transparent !important;
  scrollbar-width: thin;
  scrollbar-color: #3a2f1d transparent;
}

#screen .xterm-viewport::-webkit-scrollbar { width: 8px; }
#screen .xterm-viewport::-webkit-scrollbar-thumb {
  background: #2d2415;
  border-radius: 4px;
}

/* CRT texture: very subtle, can be disabled by removing this node */
#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 176, 0, 0.035) 0px,
    rgba(255, 176, 0, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  opacity: 0.55;
}

@media (max-width: 640px) {
  #frame { padding: 10px 10px; }
  #scanlines { display: none; }
}

::selection {
  background: rgba(255, 176, 0, 0.28);
}

#frame.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 176, 0, 0.10);
  animation: flash 320ms ease-out;
}

@keyframes flash {
  from { opacity: 1; }
  to { opacity: 0; }
}