/* Retro CRT theme */
:root{
  --green:#00ff66;
  --amber:#ffb000;
  --bg:#000;
  --glow:0 0 12px rgba(0,255,102,0.6);
  --glow-amber:0 0 12px rgba(255,176,0,0.6);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--green);font-family:'VT323',monospace}
.screen{max-width:960px;margin:0 auto;padding:18px}
.hidden{display:none}

.bar{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--green);padding:8px 12px;box-shadow:var(--glow);margin:10px 0}
h1{margin:0;font-weight:400;text-shadow:var(--glow)}
button{background:transparent;border:1px solid var(--green);color:var(--green);font-family:'VT323',monospace;font-size:20px;padding:4px 10px;cursor:pointer}
button:hover{background:#001900}

#prompt{min-height:96px;border:1px solid var(--green);padding:12px;font-size:28px;line-height:1.5;box-shadow:inset 0 0 16px rgba(0,255,102,0.15);word-wrap:break-word}
#prompt .green{color:var(--green)}
#prompt .amber{color:var(--amber)}
#prompt .ok{filter:brightness(1.3)}
#prompt .bad{background:rgba(255,0,0,0.2)}

.input-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.caret{color:var(--amber);font-size:28px}
#input{flex:1;background:#001900;border:1px solid var(--green);color:var(--green);font-size:24px;padding:8px;box-shadow:inset 0 0 16px rgba(0,255,102,0.15)}

.boot-text{color:var(--green);font-size:22px;line-height:1.5;text-shadow:var(--glow)}
#boot{display:grid;place-items:center;height:100vh}

/* Subtle scanlines overlay */
.crt-overlay{pointer-events:none;position:fixed;inset:0;background:
repeating-linear-gradient(rgba(0,255,102,0.06) 0px, rgba(0,255,102,0.06) 2px, transparent 2px, transparent 4px);
mix-blend-mode:multiply;opacity:0.25;}

/* Rolling refresh surge */
.crt-roll{pointer-events:none;position:fixed;inset:0;background:linear-gradient(to bottom, rgba(255,255,255,0.0), rgba(255,255,255,0.20), rgba(255,255,255,0.0));filter:blur(1px);opacity:0}
.crt-roll.surge{animation:roll 1.2s ease-out}
@keyframes roll{
  0%{opacity:0.0;transform:translateY(-100%)}
  30%{opacity:0.5}
  100%{opacity:0.0;transform:translateY(100%)}
}

/* Flicker pulse */
@keyframes flicker{
  0%{opacity:0.25}
  20%{opacity:0.35}
  40%{opacity:0.22}
  60%{opacity:0.30}
  80%{opacity:0.25}
  100%{opacity:0.28}
}
.crt-overlay{animation:flicker 6s infinite alternate}