@import url('./fonts/fonts.css');

:root{
  --bg:#050a08; --bg-hero:#070d0a; --panel:#0a120d;
  --green:#8CFF3B; --green-lit:#d4ffb0; --green-hot:#a9ff6e; --on-green:#04170a;
  --bright:#eafbe4; --text:#cfe8d4; --body:#b9d6bf; --nav:#9dbfa5; --muted:#8fae97;
  --label:#7ea888; --faint:#7d9c85; --dim:#6f9478;
  --line:rgba(140,255,59,.22); --line-soft:rgba(140,255,59,.18); --line-mid:rgba(140,255,59,.3);
  --amber:#ffcf6b; --red:#ff7a6b;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pixel:'Silkscreen','JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000}
body{
  font-family:var(--mono);color:var(--green);overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,var(--bg-hero) 0%,var(--bg) 62%,#000 100%);
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-lit)}

/* CRT overlays (ported from the site) */
.crt-scanlines,.crt-flicker,.crt-sweep,.crt-vignette{position:fixed;pointer-events:none}
.crt-scanlines{inset:0;z-index:90;mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.45) 3px,rgba(0,0,0,0) 4px)}
.crt-flicker{inset:0;z-index:91;background:var(--green);mix-blend-mode:overlay;animation:flick 5s steps(1,end) infinite}
.crt-sweep{left:0;right:0;top:0;height:38vh;z-index:92;
  background:linear-gradient(180deg,rgba(140,255,59,0) 0%,rgba(140,255,59,.09) 82%,rgba(140,255,59,.3) 100%);
  animation:scan 7s linear infinite}
.crt-vignette{inset:0;z-index:93;box-shadow:inset 0 0 160px rgba(0,0,0,.85);
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%)}
@keyframes flick{0%,96%,100%{opacity:.04}97%{opacity:.10}98%{opacity:.05}99%{opacity:.12}}
@keyframes scan{from{transform:translateY(-40vh)}to{transform:translateY(120vh)}}

#crt{position:fixed;inset:0;overflow:hidden;animation:power .8s ease-out both}
@keyframes power{0%{transform:scaleY(.004);filter:brightness(5)}45%{transform:scaleY(.02) scaleX(1);filter:brightness(3)}100%{transform:scale(1);filter:none}}
#flash{position:absolute;inset:0;background:var(--green-lit);opacity:0;z-index:120;pointer-events:none;transition:opacity .06s}

/* screens */
.screen{position:absolute;inset:0;padding:6vh 7vw;display:none;flex-direction:column;
  text-shadow:0 0 7px rgba(140,255,59,.5),0 0 22px rgba(140,255,59,.14);
  font-size:clamp(13px,1.5vw,20px);line-height:1.6;white-space:pre-wrap}
.screen.on{display:flex}
.dim{color:var(--dim);text-shadow:none}.hot{color:var(--green-hot)}.amber{color:var(--amber)}
.pixel{font-family:var(--pixel)}
.cursor::after{content:"█";margin-left:2px;color:var(--green-hot);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.big{font-family:var(--pixel);font-size:clamp(1.1em,2.4vw,1.7em);line-height:1.5;color:var(--bright);letter-spacing:.06em}

#post{font-size:clamp(11px,1.15vw,15px);color:var(--faint);text-shadow:none;margin-bottom:3vh}
#post span{display:block}

#ykey{display:inline-block;border:1px solid var(--green);padding:.05em .6em;margin-top:.5em;cursor:pointer;
  color:var(--green-hot);box-shadow:0 0 12px rgba(140,255,59,.35);animation:pulse 1.4s ease-in-out infinite}
#ykey:hover,#ykey.on{background:var(--green);color:var(--on-green);animation:none}
@keyframes pulse{50%{box-shadow:0 0 22px rgba(140,255,59,.75)}}
.hint{font-size:.72em;color:var(--dim);letter-spacing:.18em;margin-top:5vh;text-shadow:none}

.row{display:flex;white-space:pre}.row .k{width:11ch}
.row .dots{color:var(--dim);text-shadow:none;overflow:hidden;white-space:nowrap;width:0}
.row .v{color:var(--green-hot);opacity:0;padding-left:1ch}
.row.go .dots{animation:lead .5s steps(11) forwards}.row.go .v{animation:pop .2s .5s steps(1) forwards}
@keyframes lead{to{width:10ch}}@keyframes pop{to{opacity:1}}

.tear{animation:tear .5s steps(2) both}
@keyframes tear{0%{transform:translateX(0)}30%{transform:translateX(-1.4vw) skewX(-5deg);filter:brightness(1.6)}
  60%{transform:translateX(1.4vw);clip-path:inset(30% 0 0 0)}100%{transform:none}}

/* workstation */
#ws{padding:0;white-space:normal;font-size:clamp(12px,1.02vw,15px);display:none;flex-direction:column;height:100%}
#ws.on{display:flex}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap;
  padding:.6em 1.3em;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b160f,#070d0a);
  letter-spacing:.12em;font-size:.8em}
.bar .brand{display:flex;align-items:center;gap:.6em}
.bar .brand img{width:22px;height:22px;border:1px solid var(--line)}
.bar b{color:var(--bright);font-family:var(--pixel);font-weight:400}
.bar .live{color:var(--green-hot)}
.grid{flex:1;display:grid;gap:1.1vw;padding:1.2vw 1.3em;overflow:auto;
  grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto auto}
.win{border:1px solid var(--line-soft);background:var(--panel);display:flex;flex-direction:column;min-height:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 22px rgba(0,0,0,.5)}
.win .t{display:flex;justify-content:space-between;background:linear-gradient(90deg,rgba(140,255,59,.14),rgba(140,255,59,.03));
  color:var(--bright);padding:.35em .8em;font-size:.8em;letter-spacing:.16em;font-family:var(--pixel);border-bottom:1px solid var(--line-soft)}
.win .t i{font-style:normal;color:var(--green)}
.win .c{padding:1em 1.1em;line-height:1.7;overflow:auto}
.win.hero{grid-row:1/3}
.hero .c{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1em}
.hero img{width:min(20vw,190px);border:1px solid var(--line);image-rendering:auto;
  filter:drop-shadow(0 0 22px rgba(140,255,59,.28))}
.hero h1{font-family:var(--pixel);font-size:clamp(1.1em,2.3vw,1.7em);color:var(--bright);letter-spacing:.14em}
.hero .sub{color:var(--muted);font-size:.85em;max-width:32ch}
.btns{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
.btn{-webkit-appearance:none;appearance:none;background:transparent;font-family:var(--mono);border:1px solid var(--line-mid);color:var(--green);padding:.28em .9em;font-size:.82em;letter-spacing:.1em;line-height:1.3;cursor:pointer;display:inline-block;text-align:center}
.btn:hover{background:rgba(140,255,59,.12);color:var(--green-lit)}
table{border-collapse:collapse;width:100%}
td{padding:.22em 0;vertical-align:top}
td:first-child{color:var(--label);width:16ch}
td:last-child{color:var(--bright)}
.live-val{color:var(--green-hot)}
.meter{height:8px;border:1px solid var(--line-mid);margin-top:.7em;position:relative}
.meter i{position:absolute;inset:0;width:0;background:var(--green);box-shadow:0 0 8px var(--green);transition:width 1.2s ease}
.span2{grid-column:2/4}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9em 1.3em}
.stat .l{color:var(--label);font-size:.72em;letter-spacing:.12em}
.stat .n{color:var(--green-hot);font-size:1.3em;letter-spacing:.02em}
.stat .s{color:var(--dim);font-size:.66em}
.log{font-size:.86em;color:var(--faint);text-shadow:none}.log .ok{color:var(--green-hot)}
.log .err{color:var(--red)}.log .cmd{color:var(--green-lit)}.log .amber{color:var(--amber)}
.console-c{display:flex;flex-direction:column;min-height:0;height:100%}
.console-c .log{flex:1;overflow:auto;min-height:0}
.console-input{display:flex;align-items:center;gap:.5ch;border-top:1px solid var(--line-soft);padding-top:.5em;margin-top:.5em}
.console-input .prompt{color:var(--green-hot)}
.console-input input{flex:1;background:transparent;border:0;outline:0;color:var(--green-lit);
  font-family:var(--mono);font-size:1em;caret-color:var(--green-hot)}
.foot{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;padding:.5em 1.3em;border-top:1px solid var(--line-soft);
  font-size:.72em;letter-spacing:.14em;color:var(--dim)}

/* ROM Bay overlay */
.emu-overlay{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;background:rgba(3,7,5,.96)}
.emu-overlay[hidden]{display:none}
.emu-bar{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.7em 1.3em;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0b160f,#070d0a);
  letter-spacing:.14em;font-size:clamp(11px,1.1vw,14px);color:var(--green)}
.emu-bar b{color:var(--bright);font-family:var(--pixel);font-weight:400}
.emu-overlay iframe{flex:1;width:100%;border:0;background:#000}
.badge-mode{color:var(--amber);border:1px solid var(--amber);padding:.02em .5em;font-size:.9em;letter-spacing:.12em}
.badge-mode.live{color:var(--green-hot);border-color:var(--green-hot)}

@media (max-width:900px){
  body{overflow:auto}
  #crt{position:relative;min-height:100dvh}
  .screen{position:relative;min-height:100dvh;padding:5vh 6vw}
  #ws{position:relative}
  .grid{grid-template-columns:1fr;grid-template-rows:none}
  .win.hero{grid-row:auto}.span2{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  #crt,.crt-flicker,.crt-sweep,#ykey,.cursor::after{animation:none}
  .crt-flicker{opacity:.05}
}