:root {
  color-scheme: dark;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c0d10;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  display: block;
  width: 100vw;
  height: 100vh;
  /* dvh keeps the canvas stable when mobile browser chrome resizes the viewport */
  height: 100dvh;
  cursor: default;
}

#pia-debug {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #9ad1ff;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 10px;
  border-radius: 4px;
  white-space: pre;
  pointer-events: none;
  max-height: 92vh;
  max-width: min(560px, 92vw);
  overflow: hidden;
}

/* Physical cursor interactions (js/cursor-interactions.js) — several of
   these (eat, steal, drag, sit-on, trap, push, as-ball) hide the real OS
   cursor for a few seconds while a fake one (#fake-cursor) stands in
   visually. cursor-hidden is only ever toggled by that module. */
body.cursor-hidden,
body.cursor-hidden * {
  cursor: none !important;
}

#fake-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  will-change: transform;
}

/* A second, independent cursor element for the "copy" interaction only —
   it never hides the real cursor (spec: "do not interfere with actual
   input"), so a duplicate briefly appears alongside it instead. */
#copy-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9998;
  display: none;
  will-change: transform, opacity;
}

/* A third, independent fake-cursor element for clones.js's own "eat the
   cursor on hover/click" mechanic (js/clones.js) — kept separate from
   #fake-cursor for the same reason #copy-cursor already is: two
   independently-driven systems sharing one element risk confusing each
   other's state. */
#clone-fake-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  will-change: transform;
}

/* The permanent copyright notice a small group of creatures assembles near
   the start of every visit (js/copyright-notice.js). Starts empty/invisible
   — "nothing in the page" — until they place the last piece, then fades in
   and stays for the rest of the session. Deliberately selectable text
   (unlike the rest of the page's chrome) since it needs to read as a real
   notice, not decoration. */
#copyright-notice {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 5;
  font: 12px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#copyright-notice.visible {
  opacity: 1;
}