/* --- Theme (Neoitan tokens) --- */
:root {
  --bg: #16181d;
  --bg-panel: #1d2026;
  --bg-hover: #23262d;
  --border: #2c3038;
  --text: #d5d9e0;
  --text-muted: #8a919e;
  --accent: #6aa1e0;
  --ok: #5cb872;
  --err: #d9605c;
  --warn: #d9a05c;

  --font-ui: system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
}

/* --- Base --- */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--font-ui);
}

#scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.muted { color: var(--text-muted); }

/* --- Loading screen (until the hub sends the first state) --- */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  font: 13px var(--font-mono);
}
.loading[hidden] { display: none; }

/* --- Buddy or project card --- */
.card {
  position: fixed;
  z-index: 100;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.card[hidden] { display: none; }
.card-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.card-meta,
.card-foot {
  color: var(--text-muted);
  font: 12px/1.5 var(--font-mono);
  overflow-wrap: anywhere;
}
.card-status {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0;
  min-width: 0;
}
.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}
.dot.ok { background: var(--ok); }
.dot.err { background: var(--err); }
.dot.warn { background: var(--warn); }

/* --- Connection banner --- */
.status {
  position: fixed;
  z-index: 500;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--err);
  border-radius: 4px;
  color: var(--err);
  font-size: 13px;
  white-space: nowrap;
}
.status[hidden] { display: none; }