:root{
  --bg0:#020203;
  --bg1:#050608;

  --phosphor:#b9ffd0;
  --phosphor2:rgba(185,255,208,.78);
  --dim:rgba(185,255,208,.45);
  --hot:rgba(120,255,180,.95);

  --border:rgba(185,255,208,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1000px 700px at 40% 30%, rgba(20,80,55,.12), transparent 55%),
    radial-gradient(900px 650px at 70% 60%, rgba(25,45,90,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow:hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--phosphor);
}

.terminal-wrap{
  height:100%;
  display:grid;
  place-items:center;
  padding: 18px;
}

.terminal{
  position:relative;
  width: min(1100px, 100%);
  height: min(720px, calc(100dvh - 36px));
  border-radius: 18px;
  overflow:hidden;

  background:
    radial-gradient(1200px 800px at 45% 35%, rgba(120,255,180,.08), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.98));
  border: 1px solid var(--border);
  box-shadow:
    0 35px 140px rgba(0,0,0,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* CRT “glass” subtle curvature + chromatic edge */
.terminal::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255,255,255,0.03), transparent 55%),
    radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,0.65), transparent 55%);
  mix-blend-mode: screen;
  pointer-events:none;
}
.terminal::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,80,80,.035), transparent 20%, transparent 80%, rgba(80,160,255,.03));
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.65;
}

.content{
  position:relative;
  height:100%;
  padding: 18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  filter: drop-shadow(0 0 14px rgba(120,255,180,.08));
}

.output{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(185,255,208,.22) transparent;
}
.output::-webkit-scrollbar{ width: 10px; }
.output::-webkit-scrollbar-thumb{
  background: rgba(185,255,208,.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.line{
  white-space: pre-wrap;
  line-height: 1.35;
  color: var(--phosphor2);
  text-shadow:
    0 0 14px rgba(120,255,180,.10),
    0 0 2px rgba(120,255,180,.16);
}
.line.strong{ color: var(--phosphor); }
.line.dim{ color: var(--dim); }
.line.err{
  color: rgba(255,170,170,.9);
  text-shadow:none;
}
.line.sys{
  color: rgba(230,230,236,.72);
  text-shadow:none;
}

/* ASCII: never wrap */
.line.ascii{
  white-space: pre !important;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
@media (max-width: 520px){
  .line.ascii{
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: 0.3px;
  }
}

.input-row{
  display:flex;
  align-items:center;
  gap: 10px;
  border-top: 1px dashed rgba(185,255,208,0.12);
  padding-top: 10px;
}
.prompt{
  color: var(--hot);
  text-shadow: 0 0 16px rgba(120,255,180,.22);
  user-select:none;
}
#input{
  flex:1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--phosphor);
  font: inherit;
  caret-color: transparent;
}
.cursor{
  width: 10px;
  height: 18px;
  background: rgba(185,255,208,.70);
  box-shadow: 0 0 18px rgba(120,255,180,.22);
  animation: blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

/* ===== CRT FX layers ===== */
.fx{
  pointer-events:none;
  position:absolute;
  inset:0;
}

.scanlines{
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 5px
    );
  opacity: 0.16;
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

.noise{
  opacity: 0.24;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: noiseMove 220ms steps(2,end) infinite;
}
@keyframes noiseMove{
  0%{ transform: translate3d(0,0,0); }
  25%{ transform: translate3d(-8px, 5px,0); }
  50%{ transform: translate3d(7px, -6px,0); }
  75%{ transform: translate3d(-5px, -8px,0); }
  100%{ transform: translate3d(0,0,0); }
}

.vignette{
  background: radial-gradient(circle at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.82) 100%);
}

.flicker{
  background: rgba(255,255,255,0.02);
  opacity: 0.10;
  animation: flicker 3.2s infinite;
}
@keyframes flicker{
  0%, 100% { opacity: .07; }
  4% { opacity: .13; }
  7% { opacity: .06; }
  12% { opacity: .14; }
  16% { opacity: .08; }
  21% { opacity: .12; }
  28% { opacity: .06; }
  36% { opacity: .12; }
  55% { opacity: .08; }
  72% { opacity: .13; }
  81% { opacity: .07; }
}

/* Mobile layout tweaks */
@media (max-width: 640px){
  .terminal-wrap{ padding: 10px; }
  .terminal{
    height: calc(100dvh - 20px);
    border-radius: 14px;
  }
  .content{ padding: 14px 12px 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .noise, .flicker{ animation: none; }
  .cursor{ animation:none; }
}