:root {
  color-scheme: dark;
  --ground: #0b1016;
  --panel: rgba(11, 16, 22, 0.85);
  --field: #111a24;
  --line: #243140;
  --text: #e6edf3;
  --muted: #8b98a5;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
  color: var(--text);
  font: 14px/1.4 system-ui, sans-serif;
}

#world { position: fixed; inset: 0; }

.panel {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

#status { top: 12px; left: 12px; right: 12px; width: fit-content; padding: 6px 10px; }

#chat {
  left: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 8px;
}

.chat-log { list-style: none; margin: 0 0 8px; padding: 0; max-height: 30vh; overflow-y: auto; }
.chat-log:empty { display: none; }
.chat-log li { margin: 2px 0; overflow-wrap: anywhere; }
.chat-log .who { font-weight: 600; margin-right: 6px; }
.chat-log .nearby .who { color: #2dd4bf; }
.chat-log .global .who { color: #60a5fa; }
.chat-log .notice { color: var(--muted); font-style: italic; }

.chat-row { display: flex; gap: 6px; }
.chat-row input { flex: 1; min-width: 0; }
.chat-row select, .chat-row input, .chat-row button {
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}
.chat-row button { cursor: pointer; }