:root{
  --bg:#020602;
  --green:#3bff6a;
  --green-dim:#1f8c3c;
  --amber:#ffcf5a;
  --red:#ff5d5d;
  --glow:0 0 4px rgba(59,255,106,.55), 0 0 12px rgba(59,255,106,.25);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);
  color:var(--green);
  font-family:'VT323','Courier New',monospace;
  font-size:22px;
  line-height:1.18;
  overflow:hidden;
  text-shadow:var(--glow);
}
.crt::before{
  content:"";
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px);
}
.crt::after{
  content:"";
  position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%);
  animation:flicker 4s infinite steps(60);
}
@keyframes flicker{0%,100%{opacity:.94;}50%{opacity:1;}7%{opacity:.9;}13%{opacity:1;}71%{opacity:.92;}}
#terminal{position:relative; z-index:1; height:100vh; width:100vw; padding:18px 18px 8px; overflow:hidden; display:flex; flex-direction:column;}
#output{flex:1 1 auto; overflow-y:auto; white-space:pre-wrap; word-break:break-word; scrollbar-width:thin; scrollbar-color:var(--green-dim) transparent;}
#output::-webkit-scrollbar{width:8px;}
#output::-webkit-scrollbar-thumb{background:var(--green-dim);}
.line{margin:0;}
.cmd{color:var(--green);}
.dim{color:var(--green-dim);}
.amber{color:var(--amber);}
.file{color:#9be8ff; text-shadow:0 0 4px rgba(155,232,255,.45);}
.red{color:var(--red);}
.inputline{display:flex; align-items:center; flex:0 0 auto; padding-top:2px;}
.inputline.hidden{display:none;}
.prompt{margin-right:8px; white-space:nowrap;}
#userInput{flex:1 1 auto; background:transparent; border:none; outline:none; color:var(--green); font-family:inherit; font-size:inherit; line-height:inherit; text-shadow:var(--glow); caret-color:var(--green);}
a{color:var(--amber);}

/* alt phosphor profile (display calibration) */
body.p3{ --green:#ffc24d; --green-dim:#9a6a12; --glow:0 0 4px rgba(255,194,77,.6), 0 0 14px rgba(255,194,77,.30); }
body.p3 .amber{ color:#fff7e0; }
body.p3 .file{ color:#ffe39a; text-shadow:0 0 4px rgba(255,227,154,.5); }

/* ---- full-screen game / program overlay ---- */
.game-overlay{
  position:fixed; inset:0; z-index:9998;
  background:#020602;
  display:flex; flex-direction:column;
  padding:10px;
}
.game-bar{
  flex:0 0 auto;
  color:var(--amber);
  font-family:'VT323',monospace; font-size:20px;
  letter-spacing:1px;
  padding:4px 8px 8px;
  text-shadow:var(--glow);
  display:flex; align-items:center; gap:14px;
}
.game-exit{
  margin-left:auto;
  background:#020602; color:var(--amber);
  border:1px solid var(--amber);
  font-family:'VT323',monospace; font-size:18px;
  padding:2px 12px; cursor:pointer;
  text-shadow:var(--glow);
}
.game-exit:hover{ background:#1a1300; }
.game-crt{
  position:relative; flex:1 1 auto;
  border:3px solid var(--green-dim);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(59,255,106,.18), inset 0 0 40px rgba(0,0,0,.5);
  background:#000;
}
.game-frame{
  width:100%; height:100%; border:0; display:block;
  background:#000;
}
/* CRT overlay on top of the frame: scanlines + vignette + faint phosphor tint */
.game-crt::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}
/* games are amber/green terminals already; tint lightly. programs (forza) get a
   gentler green wash so they read as "on the CRT" without wrecking readability */
.game-crt::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  mix-blend-mode:overlay;
  background:rgba(59,255,106,.05);
}
.game-overlay.prog .game-crt::before{ background:rgba(120,212,255,.06); }