#computer-browser { position:fixed; inset:0; pointer-events:none; }
#view { position:relative; z-index:1; }
#vignette,#help { z-index:2; }
#computer-surface { position:relative; background:white; overflow:hidden; }
#computer-page { display:block; border:0; width:100%; height:100%; pointer-events:none; }
#computer-pointer { position:absolute; top:0; left:0; width:24px; height:32px; pointer-events:none; }
#computer-pointer svg { display:block; width:100%; height:100%; }

#computer-toggle { position:fixed; top:12px; left:12px; z-index:10; font:24px monospace; min-width:36px; padding:0 6px; height:36px; cursor:pointer; }
.computer-direct #dbg,.computer-direct #view,.computer-direct #help,.computer-direct #vignette,.computer-direct #computer-pointer { visibility:hidden; }
.computer-direct #computer-browser { z-index:3; pointer-events:auto; }
.computer-direct #computer-browser div { transform:none !important; perspective:none !important; }
.computer-direct #computer-surface { position:fixed !important; inset:0; width:100% !important; height:100% !important; }
.computer-direct #computer-page { pointer-events:auto; }

/* Native mode exposes the real transformed iframe to browser hit testing. */
.computer-native #view { pointer-events:none; }
.computer-native #computer-page { pointer-events:auto; }
.computer-native #computer-pointer,.computer-native #help { display:none; }

/* Invisible accessible hit target; the visible button is WebGL geometry. */
.computer-native #computer-toggle {
  min-width:0;
  padding:0;
  transform:translate(-50%, -50%);
  border:0;
  border-radius:50%;
  color:transparent;
  background:transparent;
  box-shadow:none;
  outline:none;
  line-height:1;
}
.computer-native #computer-toggle[hidden] { display:none; }
#computer-toggle::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid #d6b45d;
  border-radius: 3px;
  background: #242016;
  color: #ffe5a1;
  font: 12px/1.4 monospace;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
#computer-toggle:hover::after, #computer-toggle:focus-visible::after { opacity: 1; }

/* The room portal shares the monitor's CSS3D renderer, but not its input routing. */
.computer-direct #door-surface { display:none !important; }
#door-handle[hidden] { display:none; }
#door-handle:focus-visible { outline:2px solid #ffd47c; border-radius:50%; }

#cork-board-target,#postit-stack-target { position:fixed;z-index:9;padding:0;border:0;background:transparent;cursor:pointer; }
#cork-board-target[hidden],#postit-stack-target[hidden],#cork-layer[hidden],#cork-toolbar[hidden] {display:none;}
#cork-layer {position:fixed;inset:0;z-index:15;cursor:crosshair;}
#cork-toolbar {position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:16px;align-items:center;padding:8px 12px;background:#ede4c9;color:#514935;border:1px solid #a69c7e;box-shadow:0 3px 12px #0004;}
#cork-toolbar button,#postit-editor button,#postit-reader button {font:inherit;cursor:pointer;border:1px solid #ab9c72;background:#fbf4dc;color:#3c3627;padding:6px 12px;}
#postit-editor,#postit-reader {padding:16px;border:1px solid #a99a73;background:#ece3ca;color:#393426;box-shadow:0 16px 70px #0008;max-height:95vh;overflow:auto;}
#postit-editor::backdrop,#postit-reader::backdrop {background:#191a1855;}
#postit-editor form {display:grid;gap:12px;}
.note-header,.note-tools {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
#postit-font{font:inherit;padding:5px 7px;background:#fff8dc;color:#29271f;border:1px solid #b1a173;}
#postit-font[hidden]{display:none;}
.note-header input {min-width:0;flex:1;width:180px;font:16px monospace;padding:8px;border:1px solid #b1a57d;background:#fffaf0;color:#393426;}
.note-tools button[aria-pressed=true] {background:#e4c96d!important;}
#postit-editor button:disabled {opacity:.4;cursor:default;}
.note-paper {position:relative;width:min(340px,72vw);aspect-ratio:1;}
#postit-canvas {display:block;width:100%;height:100%;cursor:crosshair;}
#postit-text {position:absolute;inset:0 0 16%;width:100%;height:84%;resize:none;border:0;outline:0;padding:20px 25px;background:transparent;color:#29271f;font:20px/28px Georgia;}
#postit-text[hidden] {display:none;}
#postit-reader canvas {display:block;width:min(480px,75vw);height:auto;margin-top:10px;}
#postit-pin {justify-self:end;}
#postit-remove {float:right;}
#postit-remove[hidden] {display:none;}
#cork-toolbar button:disabled {opacity:.4;cursor:default;}