@font-face{
  font-family:"BBSMono";
  src:url("fonts/PTMono.ttc") format("truetype-collection");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"BBSMono";
  src:url("fonts/PTMono.ttc") format("truetype-collection");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --black:#050505;
  --green:#0f6b3a;
  --white:#f3f6f2;
  --bg:var(--black);
  --fg:var(--green);
  --btnbg:var(--white);
  --btnfg:var(--black);
  --shadow:none;
  --border:var(--fg);
  --mono:"BBSMono","PT Mono","Monaco","Lucida Console","Courier New",monospace;
}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);overflow:hidden;transition:background-color 160ms linear,color 160ms linear;text-shadow:var(--shadow);letter-spacing:0.02em;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;font-variant-ligatures:none}
#screen{position:fixed;inset:0;display:flex;align-items:stretch;justify-content:center;padding:1px}
#term{position:relative;width:99vw;height:97vh;display:flex;flex-direction:column;border:2px solid var(--fg);border-radius:0;background:var(--bg);box-shadow:inset 0 0 0 1px var(--fg),inset 0 0 0 3px var(--bg),inset 0 0 0 4px var(--fg);overflow:hidden;z-index:2}
#sprites{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.dipfie{position:absolute;max-height:38vh;max-width:34vw;opacity:0;animation:dipfIn 420ms ease-out forwards, dipfFloat 3.6s ease-in-out infinite}
.dipfie.fadeout{animation:dipfOut 420ms ease-in forwards}
@keyframes dipfIn{from{opacity:0;transform:translateY(8px) scale(0.98)}to{opacity:0.98;transform:translateY(0) scale(1)}}
@keyframes dipfOut{from{opacity:0.98;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(0.98)}}
@keyframes dipfFloat{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
#hud{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 10px;border-bottom:2px double var(--fg);background:var(--bg)}
#brand{font-weight:700;letter-spacing:.35em;text-transform:uppercase;font-size:13px}
#hud-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:70%}
#state{font-size:11px;opacity:.82;line-height:1.2;text-align:right;color:var(--fg)}
#lang{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;user-select:none}
#lang .lang-label{margin-right:6px;opacity:.7}
#lang .lang-option{cursor:pointer;padding:0 2px;border-bottom:1px solid transparent}
#lang .lang-option.active{border-color:var(--fg);opacity:1}
#lang .lang-sep{opacity:.45;padding:0 2px}
#buffer{flex:1;overflow:auto;padding:8px 10px;background-color:var(--bg);background-image:linear-gradient(rgba(15,107,58,0.06) 1px,transparent 1px);background-size:100% 3px;font-size:16px;scrollbar-color:var(--fg) var(--bg);scrollbar-width:thin;text-rendering:optimizeSpeed}
#buffer::-webkit-scrollbar{width:6px}
#buffer::-webkit-scrollbar-track{background:var(--bg)}
#buffer::-webkit-scrollbar-thumb{background:var(--fg)}
.line{margin:0 0 8px 0;line-height:1.45;color:var(--fg)}
.line .spk{font-weight:700;color:var(--fg)}
.line.stage{opacity:.9;border-left:3px solid var(--fg);padding-left:10px}
.line.hackled{border-left:3px dashed var(--fg);padding-left:10px}
em{font-style:italic}
strong{font-weight:700}
u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
#buffer .kw{border-bottom:1px dashed var(--fg);cursor:pointer}
#buffer .map-node{border-bottom:1px solid var(--fg);cursor:pointer}
#buffer .map-node.map-origin{font-weight:700;letter-spacing:.08em}
#buffer .map-node.map-locked{border-bottom-style:dashed;opacity:.82}
#buffer .map-line.map-keyline{opacity:.9;letter-spacing:.08em}
#buffer .spk{cursor:pointer}
.line.typed{opacity:0;animation:typeIn 180ms ease forwards}
@keyframes typeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
#ghost{margin:0 0 6px 0;border-top:1px dashed var(--fg);border-bottom:1px dashed var(--fg);border-left:0;border-right:0;border-radius:0;padding:6px 10px;background:var(--bg);min-height:30px}
#ghost-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
#ghost-text{font-size:12px;line-height:1.35;min-height:14px}
#oracle{padding:4px 10px 6px 10px;border-top:1px solid var(--fg);background:var(--bg)}
#q{font-size:12px;opacity:.9;margin-bottom:4px;line-height:1.3}
#q::after{content:" █";animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
#choices{display:grid;grid-template-columns:1fr;gap:2px;max-height:64px;overflow-y:auto;scrollbar-color:var(--fg) var(--bg);scrollbar-width:thin}
#choices::-webkit-scrollbar{width:6px}
#choices::-webkit-scrollbar-track{background:var(--bg)}
#choices::-webkit-scrollbar-thumb{background:var(--fg)}
.choice{cursor:pointer;user-select:none;padding:2px 0;border-radius:0;border:0;background:transparent;color:var(--fg);font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:filter 120ms ease;line-height:1.2}
.choice::before{content:"> ";opacity:.7}
.choice:hover{filter:brightness(1.18)}
.choice:active{transform:translateY(1px)}
#crt{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:4}
#scan{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:5}
body.morph #term{transform:scale(0.997)}
body.origin-breach #term{animation:originShake 180ms steps(2,end) 9;border-color:var(--white);box-shadow:inset 0 0 0 1px var(--white),inset 0 0 0 3px var(--black),inset 0 0 0 4px var(--white),0 0 24px var(--green)}
body.origin-breach #buffer{animation:originFlash 220ms steps(2,end) 7}
body.origin-breach #oracle,body.origin-breach #ghost,body.origin-breach #hud{border-color:var(--white)}
body.origin-breach #brand,body.origin-breach #state,body.origin-breach #q,body.origin-breach #ghost-text{color:var(--white)}
body.origin-breach #crt{opacity:.65;background:repeating-linear-gradient(to bottom,rgba(243,246,242,0.22) 0 1px,rgba(5,5,5,0) 1px 3px);animation:originNoise 120ms steps(2,end) 12}
body.origin-breach #scan{opacity:.95;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(243,246,242,0.78) 48%,rgba(0,166,81,0.46) 52%,rgba(0,0,0,0) 100%);animation:originSweep 700ms linear 3}
@keyframes originShake{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}
@keyframes originFlash{0%{filter:invert(0)}50%{filter:invert(1)}100%{filter:invert(0)}}
@keyframes originNoise{0%{transform:translateY(0)}50%{transform:translateY(1px)}100%{transform:translateY(0)}}
@keyframes originSweep{0%{transform:translateY(-120%)}100%{transform:translateY(120%)}}
@media (max-width:720px){
  #choices{grid-template-columns:1fr}
  #hud-meta{max-width:55%}
  #buffer{font-size:15px}
}
