:root { --bg: #0a0f0a; --fg: #33ff66; --dim: #1f9940; --accent: #aaffcc; --err: #ff5555; }
[data-theme="amber"]   { --bg: #120c02; --fg: #ffb000; --dim: #a06e00; --accent: #ffe0a0; }
[data-theme="dracula"] { --bg: #282a36; --fg: #f8f8f2; --dim: #6272a4; --accent: #bd93f9; --err: #ff5555; }
[data-theme="matrix"]  { --bg: #000; --fg: #00ff41; --dim: #008f11; --accent: #d0ffd0; }
[data-theme="outlaw"]  { --bg: #1a100a; --fg: #e8c48a; --dim: #8b5a2b; --accent: #ff7043; --err: #c0392b; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font: 15px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: flex; flex-direction: column;
}
body::after { /* scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
#term { flex: 1; overflow-y: auto; padding: 16px; text-shadow: 0 0 4px var(--dim); }
#output pre, #output div { margin: 0; white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--accent); white-space: nowrap; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.err { color: var(--err); }
a { color: var(--accent); }
#input-line { display: flex; gap: .6ch; }
#cmd {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--fg); font: inherit; caret-color: var(--fg); text-shadow: inherit;
}
#quick {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--dim);
}
#quick button {
  background: transparent; color: var(--fg); border: 1px solid var(--dim);
  font: inherit; padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
#quick button:hover { background: var(--dim); color: var(--bg); }
.banner { color: var(--accent); font-size: clamp(6px, 2.1vw, 14px); line-height: 1.1; }
@media (min-width: 800px) { #quick { display: none; } }

#game {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px;
}
#game[hidden] { display: none; }
#game canvas { touch-action: none; }
#game-status { color: var(--accent); }
#game-quit {
  background: transparent; color: var(--fg); border: 1px solid var(--dim);
  font: inherit; padding: 6px 14px; border-radius: 4px; cursor: pointer;
}