:root { --bg: #0f0f13; --fg: #d6d3cd; --accent: #a78bfa; --dim: #6b6b7b; --bad: #d97070; }

body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

#terminal { display: flex; flex-direction: column; height: 100dvh; }

.rail { display: flex; gap: 1.5rem; padding: .5rem .75rem;
        border-bottom: 1px solid #23232c; color: var(--accent); flex: 0 0 auto; }

#scrollback { flex: 1 1 auto; overflow-y: auto; padding: .75rem;
              overflow-wrap: anywhere; }

#scrollback p { margin: 0 0 .35rem; }
#scrollback .room-name { color: var(--accent); font-weight: 600; }
#scrollback .echo { color: var(--dim); }
#scrollback .error { color: var(--bad); }
#scrollback .exits, #scrollback .actors { color: var(--dim); }

#command-form { display: flex; gap: .5rem; align-items: center;
                padding: .5rem .75rem; border-top: 1px solid #23232c; flex: 0 0 auto; }

#command { flex: 1; background: transparent; border: 0; color: var(--fg);
           font: inherit; outline: none; }

.creation { max-width: 32rem; margin: 4rem auto; padding: 0 1rem; }
.creation input[type=text] { background: #17171f; border: 1px solid #23232c;
  color: var(--fg); font: inherit; padding: .5rem; width: 100%; }
.creation input[type=submit] { margin-top: .75rem; background: var(--accent);
  border: 0; color: #0f0f13; font: inherit; padding: .5rem 1rem; cursor: pointer; }

.visually-hidden { position: absolute; width: 1px; height: 1px;
                   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#send { background: transparent; border: 1px solid #23232c; color: var(--dim);
        font: inherit; padding: .15rem .6rem; border-radius: 3px; cursor: pointer; }
#send:hover, #send:focus { color: var(--accent); border-color: var(--accent); }

.creation h1 { color: var(--accent); margin-bottom: .25rem; }
.creation .dim { color: var(--dim); }
.creation .dim a { color: var(--dim); }
.creation .dim a:hover { color: var(--accent); }
.creation input[type=email], .creation input[type=password] {
  background: #17171f; border: 1px solid #23232c; color: var(--fg);
  font: inherit; padding: .5rem; width: 100%; margin-bottom: .5rem; }
.creation .flash { color: var(--bad); }
.creation .flash.notice { color: var(--accent); }