.shelf-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 12px;
  transition: padding-right .2s ease;
}
/* Leave room for the look editor down the right side. */
body[data-panel='open'] .shelf-stage { padding-right: calc(var(--panel-width, 360px) + 12px); }
@media (max-width: 760px) {
  body[data-panel='open'] .shelf-stage { padding-right: 12px; padding-bottom: 56svh; }
}
.shelf {
  position: relative;
  /* The room is 256×160. main.js sets the width (whole-number scale by default). */
  width: min(calc(100vw - 24px), calc((100svh - 24px) * 1.6));
  aspect-ratio: 256 / 160;
  outline: var(--frame, 0) solid var(--frame-colour, transparent);
  border-radius: var(--room-radius, 0);
  box-shadow: var(--room-shadow, none);
  overflow: hidden;
}
.shelf[data-cursor='crosshair'] { cursor: crosshair; }
.shelf[data-cursor='none'] { cursor: none; }
.shelf[data-cursor='pointer'] { cursor: pointer; }
.shelf[data-cursor='grab'] { cursor: grab; }
.shelf[data-cursor='grabbing'] { cursor: grabbing; }
.shelf { touch-action: manipulation; }
#scene, #bloom, #fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* Bloom: a blurred copy of everything that glows, added on top (look editor, Effects tab). */
#bloom {
  pointer-events: none; z-index: 2;
  mix-blend-mode: screen;
  opacity: var(--bloom-amount, 0);
  filter: blur(var(--bloom-radius, 10px));
  image-rendering: auto;
}
/* Floating item names (src/scene/hover.js): pixel text drawn on the room grid, with a soft bloom. */
#fx {
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 0 calc(1px * var(--label-glow, 1)) rgba(255, 248, 228, .55)) drop-shadow(0 0 calc(5px * var(--label-glow, 1)) rgba(255, 244, 220, .3));
}

/* The editor's interact / move switch, top left, and the name-and-position readout in move mode. */
.room-modes {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; padding: 3px; gap: 3px;
  background: #14161ae6; border: 1px solid #2b2f37; border-radius: 6px;
  font: 12px/1 'Courier New', Courier, monospace;
}
.room-modes button { background: none; border: 0; color: #9a958a; padding: 6px 12px; border-radius: 4px; letter-spacing: .06em; }
.room-modes button:hover { color: #e6e1d6; }
.room-modes button[aria-pressed='true'] { background: #e2c58f; color: #14161a; }
.room-modes button[data-mode='move'][aria-pressed='true'] { background: #4fd8ff; }
.room-readout {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  padding: 3px 7px; background: #0d0806e6; color: #bfefff; border: 1px solid #4fd8ff; border-radius: 3px;
  font: 11px/1.3 'Courier New', Courier, monospace;
}
body[data-mode='move'] .shelf { outline: 2px dashed #4fd8ff66; outline-offset: 4px; }