:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0d1117;
  color: #e6edf3;
  font-family: "Courier New", ui-monospace, monospace;
}
#app {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 12px 84px;
}
.line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 2px 0;
  font-size: 15px;
  line-height: 1.4;
}
.art {
  white-space: pre;
  overflow-x: auto;
  color: #3fb950;
  /* 13px computed size (legible); app.js scales wide art down to fit */
  font-size: 13px;
  line-height: 1.25;
}
.board {
  white-space: pre;
  overflow-x: auto;
  color: #79c0ff;
  font-size: 17px;
  line-height: 1.3;
}
.prompt { color: #d29922; }
.error { color: #f85149; }
.success { color: #ffd700; font-weight: bold; }
.echo { color: #8b949e; }
#status { color: #8b949e; font-size: 13px; margin: 8px 0; }
#controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #161b22;
  border-top: 1px solid #30363d;
}
#controls > * { max-width: 860px; }
#prompt-mark { color: #3fb950; font-weight: bold; }
#entry {
  flex: 1;
  min-width: 0;
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px;
  font: inherit;
  font-size: 16px; /* stops iOS auto-zoom */
}
#entry:focus { outline: 2px solid #1f6feb; }
#send {
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: #238636;
  color: #fff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
#send:disabled, #entry:disabled { opacity: .5; cursor: default; }
@media (min-width: 861px) {
  #controls { justify-content: center; }
  #controls #entry { flex: 0 1 700px; }
}
@media (max-width: 480px) {
  #app { padding: 8px 8px 80px; }
  .line { font-size: 14px; }
  .board { font-size: 16px; }
}

#send:focus-visible { outline: 2px solid #79c0ff; outline-offset: 2px; }