* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #111;
  color: #eee;
  font-family: system-ui, sans-serif;
}

#connect-panel {
  max-width: 28rem;
  margin: 4rem auto;
  padding: 1.5rem;
  background: #1b1b1b;
  border-radius: 0.5rem;
}

#connect-panel h1 {
  margin-top: 0;
  font-size: 1.25rem;
}

#connect-panel .hint {
  color: #999;
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

#connect-panel label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #ccc;
}

#connect-panel input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem;
  background: #0c0c0c;
  border: 1px solid #333;
  color: #eee;
  border-radius: 0.25rem;
}

#connect-panel button {
  width: 100%;
  padding: 0.6rem;
  background: #3b82f6;
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 0.25rem;
  cursor: pointer;
}

#connect-panel button:hover { background: #2563eb; }

#status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: #f59e0b;
}

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}

#screen {
  max-width: 100%;
  max-height: 100%;
}

/* Only hide the local cursor once pointer lock is actually engaged -- the remote cursor
   (captured into the video via show-cursor on d3d11screencapturesrc) stands in for it from
   that point on. Before locking, hiding it unconditionally left no cursor visible at all,
   local or remote, making the canvas hard to even find/click. */
#screen.pointer-locked {
  cursor: none;
}

/* config.js's showLocalCursor: false -- unconditional, regardless of lock state. !important
   is needed to win over the inline `cursor: url(...)` app.js's applyCursor sets per-frame. */
#screen.cursor-hidden {
  cursor: none !important;
}

#stats {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.6);
  color: #0f0;
  font-size: 0.6rem;
  line-height: 1.3;
  border-radius: 0.25rem;
  pointer-events: none;
  white-space: pre;
}