@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700;800&family=VT323&display=swap');

:root{
  --amber:#f5a623;
  --green:#33ff66;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:'JetBrains Mono', monospace;
  background:#080604;
  color:#f5c56a;
}

.mono{ font-family:'JetBrains Mono', monospace; }

.crt-bg{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(245,166,35,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    #080604;
}

.title-glow{
  font-family:'VT323', monospace;
  font-weight:400;
  color:#ffcf6b;
  letter-spacing:0.08em;
  text-shadow:0 0 6px rgba(245,166,35,0.7), 0 0 22px rgba(245,166,35,0.4);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,97%,100%{ opacity:1; }
  98%{ opacity:0.85; }
  99%{ opacity:0.95; }
}

/* CRT bezel around screen */
.crt-bezel{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(145deg,#2a2018,#0d0a07);
  box-shadow:
    inset 0 2px 6px rgba(255,220,150,0.15),
    inset 0 -4px 12px rgba(0,0,0,0.8),
    0 10px 40px rgba(0,0,0,0.7);
}
.crt-screen{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 60px rgba(245,166,35,0.12), inset 0 0 10px rgba(0,0,0,0.9);
  line-height:0;
}
.crt-screen canvas{
  display:block;
  filter:saturate(1.15) brightness(1.05);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}

/* debug panel */
.debug-panel{
  background:rgba(20,14,8,0.85);
  border:1px solid rgba(245,166,35,0.25);
  border-radius:10px;
  padding:14px 16px;
  box-shadow:inset 0 0 20px rgba(245,166,35,0.05);
}
.panel-title{
  color:#ffb347;
  font-weight:800;
  letter-spacing:0.15em;
  font-size:11px;
  margin:10px 0 6px;
  padding-bottom:3px;
  border-bottom:1px solid rgba(245,166,35,0.2);
}
.panel-title:first-child{ margin-top:0; }
.reg{
  background:rgba(0,0,0,0.4);
  padding:4px 6px; border-radius:4px;
  border:1px solid rgba(245,166,35,0.15);
  color:#ffd98a;
}
.flag{
  display:inline-flex; width:22px; height:22px;
  align-items:center; justify-content:center;
  border-radius:4px; font-weight:800; font-size:11px;
}
.flag-on{ background:rgba(51,255,102,0.2); color:#7dff9e; border:1px solid rgba(51,255,102,0.5); box-shadow:0 0 8px rgba(51,255,102,0.4); }
.flag-off{ background:rgba(0,0,0,0.4); color:#5a4a30; border:1px solid rgba(245,166,35,0.1); }
.psgreg{
  background:rgba(0,0,0,0.4); border:1px solid rgba(245,166,35,0.12);
  border-radius:4px; padding:3px 2px; text-align:center; color:#ffd98a; font-size:10px;
}
.memdump{
  background:#000; color:#7dff9e;
  border:1px solid rgba(51,255,102,0.2);
  border-radius:6px; padding:8px; font-size:10px;
  overflow-x:auto; white-space:pre; margin:0;
  text-shadow:0 0 4px rgba(51,255,102,0.4);
}

.key-lit{
  background:rgba(51,255,102,0.35) !important;
  color:#eaffef !important;
  box-shadow:inset 0 0 8px rgba(51,255,102,0.6);
  font-weight:800;
}

input:focus, select:focus{ outline:1px solid var(--amber); }
a{ text-decoration:none; }

@media (max-width:640px){
  .title-glow{ font-size:2rem; }
  .crt-bezel{ padding:12px; }
}