:root {
  --purple:     #9b30ff;
  --purple-dim: #4a0080;
  --bg:         #0a0a0f;
  --bg2:        #0e0e1e;
  --bg3:        #12122a;
  --border:     #2a2a40;
  --text:       #c8c8d4;
  --red:        #ff5555;
  --green:      #55ff55;
  --yellow:     #ffff55;
  --blue:       #5588ff;
  --gold:       #ffd700;
  --safe-b:     env(safe-area-inset-bottom, 0px);
  --safe-l:     env(safe-area-inset-left, 0px);
  --safe-r:     env(safe-area-inset-right, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  height: -webkit-fill-available;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  overflow: hidden;
  touch-action: manipulation;
}

.screen {
  display: none;
  height: 100%;
  height: -webkit-fill-available;
}
.screen.active { display: flex; flex-direction: column; }

.ansi-bold   { font-weight: bold; }
.ansi-red    { color: #ff5555; }
.ansi-green  { color: #55ff55; }
.ansi-yellow { color: #ffff55; }
.ansi-blue   { color: #5588ff; }
.ansi-mag    { color: #ff55ff; }
.ansi-cyan   { color: #55ffff; }
.ansi-white  { color: #fff; }