castle-web-cli 0.4.84 → 0.4.85

package/kits/physics-2d/engine/ui.module.css

@@ -0,0 +1,2287 @@
+@font-face {
+  font-family: 'Basteleur';
+  src:
+    url('/Basteleur-Bold.woff2') format('woff2'),
+    url('/Basteleur-Bold.woff') format('woff');
+}
+
+:global(:root) {
+  --castle-font-body:
+    baltomobile, Balto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  --castle-font-display: var(--castle-font-body);
+  --castle-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  --castle-black: #111;
+  --castle-tap-highlight: #111;
+  --castle-panel: #080808;
+  --castle-panel-raised: #101010;
+  --castle-panel-sunken: #050505;
+  --castle-border: #444;
+  --castle-border-soft: #2a2a2a;
+  --castle-text: #fff;
+  --castle-text-dim: #888;
+  --castle-text-muted: #888;
+  --castle-inspector-bg: #0d0d0d;
+  --castle-inspector-text: #e6e6e6;
+  --castle-inspector-muted: #888;
+  --castle-inspector-border: #2a2a2a;
+  --castle-inspector-divider: #2a2a2a;
+  --castle-inspector-input-bg: #161616;
+  --castle-inspector-button-bg: #0d0d0d;
+  --castle-workspace-bg: #0a0a0a;
+  --castle-stage-workspace-bg: #161616;
+  --castle-sheet-bg: #0d0d0d;
+  --castle-card: #121213;
+  --castle-selected: #e6e6e6;
+  --castle-selected-ink: #111;
+  --castle-danger: #ff5d5d;
+  --castle-ok: #81e69b;
+  --castle-blue: #8db7ff;
+  /* Instance-override indicator: label/reset text + a dimmer input border. */
+  --castle-override: #b388ff;
+  --castle-override-border: #5b4a80;
+  --castle-radius: 4px;
+  /* Tools/hotbar strip height -- aligned to the inspector "+ Add behavior" row
+     (top+bottom pad + 1px borders + select padding + text line). The text line
+     uses `rem` (root-relative), NOT `em`: the hotbar inherits the 16px body font
+     while the inspector sets font-size:14px, so an `em` here resolved to 20px on
+     the hotbar but only 17.5px inside the inspector -- leaving the Add-behavior
+     row ~2.5px short of the hotbar. `rem` resolves to the same value in both. */
+  --castle-hotbar-row-pad-y: 12px;
+  --castle-hotbar-row-h: calc(var(--castle-hotbar-row-pad-y) * 2 + 2px + 10px + 1.25rem);
+  /* Full row height shared by the scene hotbar (.sceneTools + its grid track)
+     and the inspector "+ Add behavior" row, so both bottom borders land on the
+     same y. The +2px matches the Add-behavior row's outer box; it also gives the
+     46px hotbar buttons room to sit fully inside the bar (no bottom clipping). */
+  --castle-hotbar-row-full: calc(var(--castle-hotbar-row-h) + 2px);
+  color-scheme: dark;
+}
+
+:global(*) {
+  box-sizing: border-box;
+}
+
+/* Hide scrollbars across the whole editor while keeping scroll functional. */
+:global(*) {
+  scrollbar-width: none;
+}
+
+:global(*)::-webkit-scrollbar {
+  display: none;
+}
+
+:global(html),
+:global(body),
+:global(#root) {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+:global(body) {
+  overflow: hidden;
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-family: var(--castle-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+:global(button),
+:global(input),
+:global(select),
+:global(textarea) {
+  font: inherit;
+}
+
+:global(button),
+:global(input),
+:global(select),
+:global(textarea),
+:global([tabindex]) {
+  outline: none;
+}
+
+:global(*:focus),
+:global(*:focus-visible) {
+  outline: none;
+}
+
+/* Editor-root is a vertical stack: full-width header row, then the
+   `[file list | workspace]` grid row. */
+.editorRoot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+}
+
+/* Portal target for the active editor's header. `display: contents` lets the
+   portaled `.editorHeader` be a direct flex child of `.editorRoot`. */
+.editorHeaderHost {
+  display: contents;
+}
+
+.appShell {
+  flex: 1 1 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+}
+
+/* Desktop: the files toggle collapses the file-list column. (Never set in
+   compact mode, where the file list is a bottom sheet instead.) */
+.editorRoot.filesHidden .appShell {
+  grid-template-columns: 1fr;
+}
+
+.editorRoot.filesHidden .fileBrowser {
+  display: none;
+}
+
+.fileBrowser {
+  min-width: 0;
+  border-right: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Bare file browser for the dockview "Files" panel: no sidebar border or
+   mobile-sheet chrome, just a full-height column so the tree fills the panel
+   and the empty area below the rows still catches the blank-area menu. */
+.fileBrowserBare {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.editorHeader {
+  height: 48px;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+}
+
+.editorTitle {
+  font-family: var(--castle-font-display);
+  letter-spacing: 0.01em;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.muted {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+.fileTree {
+  flex: 1 1 0;
+  min-height: 0;
+  padding-top: 5px;
+  overflow-y: auto;
+}
+
+.fileBranch {
+  min-width: 0;
+}
+
+/* File-list rows ride the workspace "notch" ladder: default sits on the
+   workspace bg (#0a0a0a, transparent), hover lifts one notch to the sheet bg
+   (#0d0d0d), and the selected row lifts one notch further to panel-raised
+   (#101010). Text follows the same idea: unselected rows are the SAME light
+   text token as the selected/hover row, just faded (reduced opacity) so they
+   stay clearly legible on the dark panel; the selected row is the full
+   standard light text. */
+.fileRow,
+.fileDirRow {
+  width: 100%;
+  border: 0;
+  border-radius: var(--castle-radius);
+  background: transparent;
+  /* Plain opaque gray, NOT color-mix(...transparent): Safari fails to paint a
+     semi-transparent color-mix result until a repaint is forced (opening
+     devtools makes it appear), leaving rows invisible at rest. This solid value
+     approximates the light text token faded over the dark panel. */
+  color: #a8a8a8;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 5px 9px 5px calc(9px + var(--file-depth, 0) * 20px);
+  text-align: left;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* Folders read darker than files at rest so the tree's structure (containers
+   vs. leaves) is legible at a glance. Hover/selected still lift both to the full
+   light text via the higher-specificity rules below. */
+.fileDirRow {
+  color: #777;
+}
+
+.fileRow:hover,
+.fileDirRow:hover {
+  background: var(--castle-sheet-bg);
+  color: var(--castle-inspector-text);
+}
+
+/* Compound `.fileRow.fileRowSelected` so the selected look (full text +
+   one-notch-lighter bg) outranks `.fileRow:hover` on specificity, not source
+   order -- the selected row stays put even while hovered. */
+.fileRow.fileRowSelected,
+.fileRow.fileRowSelected:hover {
+  background: var(--castle-panel-raised);
+  color: var(--castle-inspector-text);
+}
+
+/* The disclosure caret only appears on folder rows; keep it a shade darker than
+   the folder name (#666 vs #777) at rest, then lift it to the full light text on
+   hover alongside the name. Compound `.fileIcon.fileDisclosure` (0,2,0) is
+   required to beat the later `.fileIcon` muted-color rule (0,1,0); a bare
+   `.fileDisclosure` ties on specificity and loses on source order. */
+.fileIcon.fileDisclosure {
+  color: #666;
+}
+
+.fileDirRow:hover .fileIcon.fileDisclosure {
+  color: inherit;
+}
+
+.fileDisclosure svg {
+  width: 10px;
+  height: 10px;
+}
+
+/* Icon + name group: its own gap controls icon<->name spacing, independent of
+   the row's disclosure<->label gap. */
+.fileLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/* Inline rename field. Constrained to the row width (flex:1 + min-width:0 +
+   border-box) so a long name never pushes the file browser into horizontal
+   overflow. */
+.fileRenameInput {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 1px 4px;
+  border: 1px solid var(--castle-border);
+  border-radius: 5px;
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  font: inherit;
+  font-size: 13px;
+}
+
+.fileRenameInput:focus {
+  outline: none;
+  border-color: var(--castle-text-dim);
+}
+
+/* Type-based file icon: muted so the file name stays the visual emphasis. */
+.fileIcon {
+  width: 14px;
+  flex: 0 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+}
+
+.mainEditor {
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--castle-sheet-bg);
+}
+
+.editorHeader {
+  justify-content: space-between;
+}
+
+.editorHeaderLeft,
+.editorHeaderRight,
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.editorBody {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size;
+  container-name: editor;
+}
+
+.sceneWorkspace {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
+}
+
+.sceneTools {
+  grid-column: 1;
+  grid-row: 1;
+  height: var(--castle-hotbar-row-full);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+}
+
+/* Blueprint hotbar -- left-aligned djinn-style stamp palette. Today it holds a
+   single "+" Add-actor control; drag-and-drop blueprint slots land here later. */
+.bpHotbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+  padding: 0 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.bpSlot,
+.bpActionSlot {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  /* Never shrink in the flex hotbar -- keep the square 46x46 and let the
+     hotbar scroll (overflow-x: auto) when the panel gets narrow, instead of
+     squishing slots (the add button collapsed since its icon is only 14px). */
+  flex: 0 0 46px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 14px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.bpSlotBadge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 15px;
+  text-align: center;
+}
+
+.bpSlot:hover,
+.bpActionSlot:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.bpSlotSelected,
+.bpSlotSelected:hover {
+  border-color: var(--castle-selected);
+  box-shadow: 0 0 0 1px var(--castle-selected);
+  background: var(--castle-inspector-input-bg);
+}
+
+/* The blueprint of the currently-selected actor: distinct from a direct
+   blueprint selection -- just a white border, no thickening/glow. */
+.bpSlotInstance,
+.bpSlotInstance:hover {
+  border-color: #fff;
+}
+
+.bpSlot:disabled,
+.bpActionSlot:disabled {
+  cursor: default;
+  opacity: 0.35;
+}
+
+.bpSlot svg,
+.bpActionSlot svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+
+.bpSlotThumb,
+.bpSlotFallback {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  border-radius: 3px;
+}
+
+.bpSlotThumb {
+  image-rendering: pixelated;
+  background: var(--castle-card);
+  object-fit: contain;
+}
+
+.bpSlotFallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--castle-inspector-muted);
+}
+
+.bpDragPreview {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--castle-text);
+  background: rgb(230 230 230 / 0.08);
+  opacity: 0.7;
+}
+
+.bpDragPreviewOverStage {
+  opacity: 0.9;
+}
+
+.bpPreviewThumb {
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+}
+
+.confirmBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.confirmDialog {
+  width: min(340px, calc(100vw - 32px));
+  padding: 18px;
+  border: 1px solid var(--castle-border);
+  border-radius: 10px;
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
+}
+
+.confirmTitle {
+  font-size: 15px;
+  font-weight: 650;
+  margin-bottom: 8px;
+}
+
+.confirmMessage {
+  font-size: 13px;
+  color: var(--castle-text-dim);
+  line-height: 1.45;
+  margin-bottom: 16px;
+}
+
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.blueprintBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.editorHeaderTitleRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.instanceHint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.instanceHintLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+.instanceHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.instanceHeaderName {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.instanceHeaderNameText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.instanceHeaderNameStrong {
+  font-weight: 600;
+}
+
+.instanceHeaderNameCol {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.instanceHeaderId {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.revealOverridesButton {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: transparent;
+  color: var(--castle-inspector-muted);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.revealOverridesButton:hover {
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+}
+
+.instanceForkButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  align-self: flex-start;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 6px;
+  background: var(--castle-inspector-input-bg);
+  color: inherit;
+  font-size: 11px;
+  padding: 5px 9px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.instanceForkButton:hover {
+  background: var(--castle-inspector-border);
+}
+
+/* Editable blueprint title: reads as a heading until hovered/focused, where a
+   border + input background reveal that it's editable. */
+.blueprintNameInput {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--castle-radius);
+  background: transparent;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  outline: 0;
+}
+
+.blueprintNameInput:hover {
+  border-color: var(--castle-inspector-border);
+}
+
+.blueprintNameInput:focus {
+  border-color: var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+}
+
+.stageWrap {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--castle-stage-workspace-bg);
+  overflow: hidden;
+}
+
+.stageCard {
+  position: relative;
+  width: min(52vh, 440px);
+  aspect-ratio: 5 / 7;
+  max-width: 100%;
+  overflow: visible;
+}
+
+.stageCardClip {
+  position: absolute;
+  inset: 0;
+  background: var(--castle-card);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+}
+
+.stageCardEditSurface {
+  overflow: visible;
+}
+
+.stageCanvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  touch-action: none;
+  /* tabIndex=-1 (keyboard-focus capture on pointer-down) would otherwise draw a
+     focus ring; focus here is programmatic only, never via keyboard. */
+  outline: none;
+}
+
+.stageCanvasEdit {
+  position: absolute;
+  left: -100%;
+  top: -100%;
+  width: 300%;
+  height: 300%;
+}
+
+/* Game-time UI overlay -- sits exactly over the canvas and clips to the card.
+   Behavior `ui` output lands in `.sceneUiLayer`, which is sized in card units
+   and scaled onto the canvas box. */
+.sceneUiRoot {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.sceneUiLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+}
+
+/* On-canvas selection toolbar ("selection handles"). Two stacked layers cover
+   the canvas box (sized by a ResizeObserver, like .sceneUiRoot):
+   - .selChromeLayer is the card-unit (500x700) layer, scaled onto the canvas
+     and translated by -camera so the dashed box / dots / pivot track the edit
+     camera exactly like the canvas draw path. Chrome lives in card units, so it
+     scales gently with the responsive card.
+   - .selButtonLayer is an un-scaled px layer; the floating buttons are placed
+     in projected px (world -> screen) so they stay crisp and fixed-size with
+     fixed px gaps regardless of card scale. */
+.selOverlayRoot {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+  pointer-events: none;
+  animation: selOverlayIn 150ms ease;
+}
+
+/* Fade only -- no scale. Scaling the full-card overlay about its center made
+   an off-center selection's handles slide inward-from-center on every mount
+   (most visible re-selecting a different actor after a deselect, where the
+   overlay remounts), reading as "animating in from the old position". */
+@keyframes selOverlayIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.selChromeLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.selChromeWorld {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.selColliderBox {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px dotted rgb(141 183 255 / 0.9);
+  background: rgb(141 183 255 / 0.14);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.selColliderPickup {
+  border-color: rgb(255 225 122 / 0.9);
+  background: rgb(255 225 122 / 0.14);
+}
+
+.selBox {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--castle-text);
+  border-radius: 3px;
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+/* Connector stem from the box's right-center edge to the rotate handle. Lives
+   in the un-scaled px layer and is rotated about its left-center anchor, so its
+   thickness matches the selection box border at any zoom. */
+.selStem {
+  position: absolute;
+  height: 2px;
+  background: var(--castle-text);
+  opacity: 0.85;
+  transform-origin: left center;
+  pointer-events: none;
+}
+
+.selScaleHandle {
+  position: absolute;
+  border: 0;
+  padding: 0;
+  background: var(--castle-text);
+  border: 2px solid var(--castle-selected-ink);
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  touch-action: none;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+
+.selScaleCorner {
+  width: 11px;
+  height: 11px;
+  border-radius: 999px;
+}
+
+.selScaleEdge {
+  border-radius: 999px;
+}
+
+.selScaleEdge[data-handle='n'],
+.selScaleEdge[data-handle='s'] {
+  width: 28px;
+  height: 9px;
+}
+
+.selScaleEdge[data-handle='e'],
+.selScaleEdge[data-handle='w'] {
+  width: 9px;
+  height: 28px;
+}
+
+.selPivot {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 999px;
+  border: 2px solid var(--castle-text);
+  background: transparent;
+  opacity: 0.85;
+  transform: translate(-50%, -50%);
+}
+
+.selButtonLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.selBtnWrap {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+}
+
+.selBtnGroup {
+  display: flex;
+  gap: 8px;
+}
+
+.selArrangeWrap {
+  position: relative;
+}
+
+.selArrangeMenu {
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 8px);
+  min-width: 150px;
+  padding: 5px;
+  border: 1px solid var(--castle-border);
+  border-radius: 10px;
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.selArrangeItem {
+  width: 100%;
+  border: 0;
+  border-radius: 7px;
+  padding: 7px 9px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.selArrangeItem:hover {
+  background: var(--castle-panel);
+}
+
+.selArrangeItemDisabled,
+.selArrangeItemDisabled:hover {
+  opacity: 0.4;
+  background: transparent;
+  cursor: default;
+}
+
+.selBtn {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  border: 1px solid var(--castle-border);
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+  touch-action: none;
+}
+
+.selBtn:hover {
+  background: var(--castle-panel);
+  border-color: var(--castle-text-dim);
+}
+
+.selBtn svg {
+  width: 1em;
+  height: 1em;
+}
+
+.selBtnGrab {
+  cursor: grab;
+}
+
+.selBtnRotate {
+  cursor: grab;
+}
+
+/* Touch targets: larger hit area on coarse pointers / compact layout. */
+@media (pointer: coarse), (max-width: 600px) {
+  .selBtn {
+    width: 44px;
+    height: 44px;
+    font-size: 18px;
+  }
+
+  .selBtnGroup {
+    gap: 12px;
+  }
+
+  .selScaleCorner {
+    width: 17px;
+    height: 17px;
+  }
+
+  .selScaleEdge[data-handle='n'],
+  .selScaleEdge[data-handle='s'] {
+    width: 38px;
+    height: 15px;
+  }
+
+  .selScaleEdge[data-handle='e'],
+  .selScaleEdge[data-handle='w'] {
+    width: 15px;
+    height: 38px;
+  }
+}
+
+.inspector {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  min-width: 0;
+  border-left: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  overflow: auto;
+  padding: 0;
+}
+
+.panel {
+  border: 0;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  border-radius: 0;
+  background: var(--castle-inspector-bg);
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  margin: 0;
+  overflow: visible;
+  box-shadow: none;
+}
+
+.panel:last-child {
+  border-bottom: 0;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 6px;
+  border-bottom: 0;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.panelTitleOverridden {
+  color: var(--castle-override);
+}
+
+.panelBody {
+  padding: 8px 16px 4px;
+}
+
+.fieldRow {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  margin-bottom: 0;
+  min-height: 28px;
+}
+
+.fieldRow:last-child {
+  margin-bottom: 0;
+}
+
+.fieldLabel {
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+}
+
+/* Instance override: purple label + input border, plus a "Default: X [Reset]"
+   sub-line rendered below the control (see FieldRow). */
+.fieldLabelOverridden {
+  color: var(--castle-override);
+}
+
+.fieldRowOverridden .input,
+.fieldRowOverridden .select,
+.fieldRowOverridden .colorInput {
+  border-color: var(--castle-override-border);
+}
+
+.fieldOverride {
+  padding-bottom: 12px;
+}
+
+.fieldOverride .fieldRow {
+  padding-bottom: 4px;
+}
+
+.fieldDefault {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.fieldDefaultInner {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+.fieldDefaultInner > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fieldResetBtn {
+  margin-left: auto;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--castle-override);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.fieldResetBtn:hover {
+  color: var(--castle-inspector-text);
+}
+
+.input,
+.select,
+.textarea {
+  width: 100%;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 5px 8px;
+  outline: 0;
+}
+
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  text-overflow: ellipsis;
+}
+
+.numberField {
+  position: relative;
+  width: 100%;
+}
+
+.numberInput {
+  padding-right: 22px;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.numberInput::-webkit-inner-spin-button,
+.numberInput::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.numberSteppers {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  width: 18px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--castle-inspector-divider);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+
+.numberField:hover .numberSteppers,
+.numberField:focus-within .numberSteppers {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.numberStepper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--castle-inspector-muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.numberStepper:first-child {
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.numberStepper:hover {
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+}
+
+.numberStepper:disabled {
+  opacity: 0.3;
+  cursor: default;
+  background: transparent;
+}
+
+.colorInput {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  padding: 2px;
+  outline: 0;
+  cursor: pointer;
+}
+
+.toggle {
+  width: 44px;
+  height: 24px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 999px;
+  background: var(--castle-inspector-input-bg);
+  padding: 2px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-shadow: none;
+}
+
+.toggleOn {
+  background: var(--castle-black);
+  justify-content: flex-end;
+}
+
+.toggleKnob {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--castle-inspector-muted);
+}
+
+.toggleOn .toggleKnob {
+  background: var(--castle-text);
+}
+
+.textarea {
+  min-height: 0;
+  resize: none;
+  font-family: var(--castle-font-mono);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+/* Shared chrome for the inspector "Button" and every square icon button: a 1px
+   border, sunken fill, text-colored glyph, and a subtle drop line. */
+.button,
+.iconButton {
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.button {
+  padding: 6px 10px;
+}
+
+/* The square icon button -- the single source of truth every other square icon
+   button across the editor matches. Default/hover/active follow the pixel
+   editor's eyedropper; the disabled dimming follows the undo button. Fixed
+   28x28, never shrinks in a toolbar row, and centers a 14px glyph. */
+.iconButton {
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconButton svg {
+  width: 14px;
+  height: 14px;
+}
+
+.button:hover,
+.iconButton:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.buttonDanger {
+  color: var(--castle-danger);
+}
+
+.button:disabled,
+.iconButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.actorList {
+  display: grid;
+  gap: 4px;
+}
+
+.actorRow {
+  width: 100%;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--castle-inspector-text);
+  border-radius: var(--castle-radius);
+  padding: 7px 8px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.actorRowSelected {
+  background: var(--castle-black);
+  border-color: var(--castle-black);
+  color: var(--castle-text);
+}
+
+.drawingEditor,
+.codeEditor {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(320px, 1fr) 280px;
+  background: var(--castle-workspace-bg);
+}
+
+.drawingEditor {
+  grid-template-columns: minmax(320px, 1fr) minmax(50px, 250px);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.drawingEditor > .pxArtInspector {
+  grid-column: 2;
+}
+
+.artboardToolColumn,
+.paintColumn {
+  flex: 0 0 50px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  background: var(--castle-workspace-bg);
+}
+
+.paintColumn {
+  display: none;
+}
+
+.drawingToolColumn {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 50px;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  background: var(--castle-workspace-bg);
+}
+
+.drawingCanvasWrap {
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 24px;
+  overflow: hidden;
+}
+
+.artboardStack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.canvasTopStack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.canvasTopBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.canvasSizeBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+.cornerRadiusBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+/* Corner-radius segmented control (0 / ¼ / ½) — same bordered-row-of-
+   buttons pattern as .drawingShapeModeRow, sized for short text labels
+   instead of square glyph buttons. */
+.cornerRadiusSegments {
+  display: flex;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.cornerRadiusSegments > * + * {
+  border-left: 1px solid var(--castle-inspector-border);
+}
+
+.cornerRadiusSegment {
+  min-width: 28px;
+  padding: 3px 8px;
+  border: 0;
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+}
+
+.cornerRadiusSegment:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+/* Compound selector (not a bare `.cornerRadiusSegmentOn`) for the same reason
+   documented above `.drawingToolButton.drawingToolSelected`: it must beat
+   `.cornerRadiusSegment:hover` on specificity no matter source order. */
+.cornerRadiusSegment.cornerRadiusSegmentOn,
+.cornerRadiusSegment.cornerRadiusSegmentOn:hover {
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+.canvasSizeSep {
+  color: var(--castle-inspector-muted);
+  user-select: none;
+}
+
+.canvasSizeSelect {
+  width: 52px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 22px 3px 6px;
+  font-size: 12px;
+  text-align: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+}
+
+.pxArtInspector {
+  min-width: 0;
+  border-left: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.paintStrip {
+  display: flex;
+  flex-direction: column;
+  width: 34px;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+/* Each control group (color, size, shape type, mode toggle) is its own boxed
+   section, separated by the strip's gap. Controls stacked inside a section keep
+   1px dividers so a multi-button group still reads as one segmented unit. */
+.paintStripSection {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.paintStripSection > * + * {
+  border-top: 1px solid var(--castle-inspector-border);
+}
+
+.paintStripColor {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.paintStripSlider {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  flex: 0 0 auto;
+}
+
+.paintStripModeButton {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0;
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.paintStripModeButton svg {
+  width: 1em;
+  height: 1em;
+}
+
+.paintStripModeButton:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.paintStripModeButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.drawingSizeSliderVertical {
+  width: 88px;
+  height: 14px;
+  margin: 0;
+  cursor: pointer;
+  transform: rotate(-90deg);
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.drawingSizeSliderVertical:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.drawingSizeSliderVertical::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: #4a4a4a;
+}
+
+.drawingSizeSliderVertical::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border-radius: 999px;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+}
+
+.drawingSizeSliderVertical::-moz-range-track {
+  height: 4px;
+  border-radius: 999px;
+  background: #4a4a4a;
+}
+
+.drawingSizeSliderVertical::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+}
+
+.palettePopover {
+  position: fixed;
+  z-index: 200;
+  width: min(280px, calc(100vw - 16px));
+  max-height: min(420px, calc(100vh - 16px));
+  overflow: auto;
+  padding: 12px 14px 14px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-workspace-bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+}
+
+.palettePopoverHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.palettePopoverTitle {
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.drawingArtboard {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Stacks the native artboard canvas, the smooth-preview canvas, and the
+   display-resolution overlay so the marching-ants outline renders crisp
+   instead of sub-pixel on the upscaled art. The checkerboard "transparency"
+   background lives on the FRAME (not the main canvas) so it doesn't paint
+   over the smooth-preview canvas underneath in "smooth" render mode. */
+.drawingArtboardFrame {
+  position: relative;
+  flex: 0 0 auto;
+  /* Own stacking context, so the negative-z .drawingSmooth canvas paints just
+     above THIS element's checkerboard background instead of sinking below it
+     (without isolation, negative z-index children paint before all in-flow
+     descendant backgrounds of the outer stacking context — checkerboard
+     included — hiding the smooth render entirely). */
+  isolation: isolate;
+  background:
+    linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
+    linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
+    linear-gradient(-45deg, transparent 75%, #1a1a1a 75%);
+  background-color: #121212;
+  background-size: 16px 16px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  border: 1px solid var(--castle-inspector-border);
+}
+
+.drawingOverlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* Behind the main canvas (negative z-index paints before static content in
+   the same containing block) — holds the corner-rounded render for "smooth"
+   sprites while the main canvas above it stays transparent except for tool
+   overlays, so editing interactions are unaffected. Empty/0-sized in "pixel"
+   mode. */
+.drawingSmooth {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.drawingCanvas {
+  image-rendering: pixelated;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+  /* tabIndex=-1 (for keyboard-focus capture on pointer-down) would otherwise
+     draw a focus ring around the artboard; it's focused programmatically, never
+     via keyboard, so suppressing the outline is safe. */
+  outline: none;
+}
+
+.palette {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 4px;
+  padding-bottom: 12px;
+}
+
+.swatch {
+  aspect-ratio: 1;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  cursor: pointer;
+}
+
+/* Selected paint color. A double ring — light on the inside, dark on the
+   outside — so the selection stays legible over ANY of the 64 swatch colors
+   (a single-color border can vanish against a similar swatch). */
+.swatchSelected {
+  border-color: transparent;
+  box-shadow:
+    inset 0 0 0 2px #fff,
+    0 0 0 2px var(--castle-black);
+}
+
+.drawingToolStrip {
+  display: flex;
+  flex-direction: column;
+  width: 34px;
+  flex: 0 0 auto;
+  max-height: 100%;
+  overflow: auto;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+}
+
+.drawingToolStrip > * + * {
+  border-top: 1px solid var(--castle-inspector-border);
+}
+
+.drawingToolsPanel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.drawingToolsPanelBody {
+  flex: 1 1 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+}
+
+.drawingSettingsColumn {
+  min-width: 0;
+  height: 100%;
+  overflow: auto;
+}
+
+.drawingToolButton,
+.drawingSizeButton {
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+}
+
+.drawingToolButton {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  border: 0;
+  border-radius: 0;
+}
+
+.drawingToolButton svg {
+  width: 1em;
+  height: 1em;
+}
+
+.drawingToolButton:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.drawingToolButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* Active / selected square icon button -- the eyedropper reference: a light
+   fill with a dark glyph. The single selected/engaged look shared by the
+   IconButton component (`active`), the onion-skin toggle, and the pixel
+   editors' tool strip.
+
+   These use COMPOUND selectors (`.button.buttonActive`,
+   `.drawingToolButton.drawingToolSelected`) on purpose: every active button
+   already carries both classes, so the (0,2,0)/(0,3,0) specificity beats the
+   equal-specificity base + size rules (`.button`/`.iconButton`,
+   `.drawingToolButton`) NO MATTER the source order. A bare `.buttonActive`
+   ties those base rules on specificity and only wins if it happens to appear
+   later in the file -- which Vite HMR can reshuffle when this module is edited,
+   silently dropping the active fill. The compound selector removes that
+   fragility. */
+.button.buttonActive,
+.drawingToolButton.drawingToolSelected,
+.paintStripModeButton.drawingToolSelected {
+  background: var(--castle-selected);
+  border-color: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+.button.buttonActive:hover,
+.drawingToolButton.drawingToolSelected:hover,
+.paintStripModeButton.drawingToolSelected:hover {
+  background: var(--castle-selected);
+  border-color: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+/* Horizontal segmented row of shape sub-mode buttons in the wide-layout Tool
+   Settings panel. Reuses .drawingToolButton glyph buttons with shared borders. */
+.drawingShapeModeRow {
+  display: flex;
+  width: max-content;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.drawingShapeModeRow > * + * {
+  border-left: 1px solid var(--castle-inspector-border);
+}
+
+.drawingToolHint {
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+  line-height: 1.35;
+  padding-bottom: 8px;
+}
+
+.drawingToolSettings {
+  padding-bottom: 8px;
+}
+
+.drawingSizePicker {
+  display: grid;
+  gap: 8px;
+  padding-bottom: 8px;
+}
+
+.drawingSizeLabel {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.drawingSizeLabel span:last-child {
+  color: var(--castle-inspector-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.drawingSizeControlRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+
+.drawingSizeSlider {
+  width: 100%;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.drawingSizeSlider:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.drawingSizeSlider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: #4a4a4a;
+}
+
+.drawingSizeSlider::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border-radius: 999px;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+}
+
+.drawingFillToggle {
+  min-height: 28px;
+  padding: 4px 9px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.drawingFillToggleOn {
+  background: var(--castle-selected);
+  border-color: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+.drawingModeRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.drawingSwitch {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 999px;
+  background: #343434;
+  cursor: pointer;
+}
+
+.drawingSwitchOn {
+  border-color: var(--castle-selected);
+  background: var(--castle-selected);
+}
+
+.drawingSwitchKnob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
+  transition: transform 120ms ease;
+}
+
+.drawingSwitchOn .drawingSwitchKnob {
+  transform: translateX(14px);
+}
+
+.drawingSizeSlider::-moz-range-track {
+  height: 4px;
+  border-radius: 999px;
+  background: #4a4a4a;
+}
+
+.drawingSizeSlider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 1px solid #d8d8d8;
+  background: #fff;
+}
+
+.codeEditor {
+  grid-template-columns: 1fr;
+}
+
+.codeMirrorHost {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+/* mobileOnly comes AFTER element-specific rules so `display: none` wins on desktop. */
+.mobileOnly,
+.sheetBackdrop,
+.sheetGrab,
+.sheetGrabBar {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  :root {
+    /* Fallback for the file-browser sheet and the inspector's initial slide-in;
+       the inspector's live height is driven by the hook's --sheet-h (see below). */
+    --sheet-high-height: 62vh;
+  }
+
+  /* `display: contents` makes wrapper spans transparent in layout so their
+     children become direct flex items of the parent (gap applies, etc). */
+  .mobileOnly {
+    display: contents;
+  }
+
+  /* Backdrop sits below the header so the files toggle stays interactive. */
+  .sheetBackdrop {
+    display: block;
+    position: fixed;
+    top: 52px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    background: transparent;
+  }
+
+  .appShell {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    position: relative;
+  }
+
+  .mainEditor {
+    grid-column: 1;
+    grid-row: 1;
+    min-height: 0;
+  }
+
+  /* Header: title (left, compact) + centered icon group (right slot includes files button). */
+  .editorHeader {
+    height: 52px;
+    flex: 0 0 52px;
+    padding: 8px 10px;
+    gap: 8px;
+    justify-content: space-between;
+  }
+
+  .editorHeaderLeft {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .editorHeaderRight {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+    gap: 14px;
+  }
+
+  .editorTitle {
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .muted {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Scene hotbar row stays visible when compact (it holds drag-and-drop
+     blueprints later). Drawing playback lives in the header instead. */
+  .sceneWorkspace {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
+  }
+
+  .drawingEditor {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .stageWrap {
+    grid-column: 1;
+    grid-row: 2;
+    align-items: flex-start;
+    padding: 10px 12px 12px;
+    background: var(--castle-stage-workspace-bg);
+  }
+
+  /* One-column layout: the card MUST keep a definite width. Its clip/canvas
+     children are absolutely positioned (no intrinsic size), so a flex item with
+     `width: auto` + `aspect-ratio` collapses to 0x0 -- the stage went blank and
+     only the dark `.stageWrap` showed. Drive width from the viewport (capped by
+     480px and by 62vh so the aspect-derived height always fits without
+     `max-height` clamping and distorting the maze). */
+  .stageCard {
+    width: min(92vw, 480px, 62vh);
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  /* PxArt artboard: keep flanking tool/paint columns; fit hook drives canvas size. */
+  .drawingCanvasWrap {
+    align-items: center;
+    padding: 10px 8px 12px;
+  }
+
+  .artboardToolColumn,
+  .paintColumn {
+    padding: 8px 4px;
+  }
+
+  /* File-browser + inspector sheets share fixed-bottom positioning, height,
+     transform/transition, and chrome. Per-sheet differences (z-index, side
+     border, background, padding) follow in dedicated rules below. */
+  .fileBrowser,
+  .inspector {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: var(--sheet-high-height);
+    transform: translateY(100%);
+    transition:
+      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
+      height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+    border-top: 1px solid var(--castle-inspector-divider);
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* File-browser sheet: hidden off-screen by default; slides up to high snap. */
+  .fileBrowser {
+    z-index: 50;
+    border-right: 0;
+    background: var(--castle-sheet-bg);
+  }
+
+  .fileBrowser[data-sheet-snap='high'] {
+    transform: translateY(0);
+  }
+
+  .fileTree {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* Inspector sheet: hidden off-screen by default; slides up when open. */
+  .inspector {
+    z-index: 45;
+    border-left: 0;
+    background: var(--castle-workspace-bg);
+    padding: 0;
+  }
+
+  /* Open inspector sheet: continuous height driven by the hook's live --sheet-h
+     (falls back to the default expanded height). Drag the grab handle to resize
+     freely; the hook picks the settle point on release. */
+  .inspector[data-sheet-open='true'] {
+    transform: translateY(0);
+    height: var(--sheet-h, var(--sheet-high-height));
+  }
+
+  /* While dragging, drop the transition so the sheet tracks the finger 1:1; the
+     settle animation returns the moment this class is removed on release. */
+  .inspector.sheetDragging {
+    transition: none;
+  }
+
+  /* Shared sheet chrome -- grab bar pill. Always visible when sheet is visible. */
+  .sheetGrab {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    flex: 0 0 auto;
+    padding: 8px 14px 8px;
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    background: var(--castle-sheet-bg);
+    border-bottom: 1px solid var(--castle-inspector-divider);
+  }
+
+  .inspector .sheetGrab {
+    background: var(--castle-workspace-bg);
+  }
+
+  .sheetGrabBar {
+    display: block;
+    width: 36px;
+    height: 4px;
+    border-radius: 999px;
+    background: var(--castle-inspector-divider);
+    margin: 0 auto;
+    flex: 0 0 4px;
+  }
+
+  .sheetBody {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .inspectorBody {
+    background: var(--castle-workspace-bg);
+  }
+
+  .codeInspectorInfo {
+    display: grid;
+    grid-template-columns: 80px 1fr;
+    gap: 6px 12px;
+    padding: 14px 16px;
+    font-size: 14px;
+    color: var(--castle-inspector-text);
+    word-break: break-all;
+  }
+}
+
+/* Bare (panel) editor wrapper: fills the panel iframe; single column.
+   Use 100% not 100vw/100vh — in a dock iframe vw/vh are the TOP-LEVEL
+   viewport, so the editor "thinks" it is full-window-wide and container
+   queries on .editorBody never flip to compact. */
+.panelBare {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  background: var(--castle-workspace-bg);
+}
+/* In a panel the scene editor's tools row must stay visible even below 860px --
+   it normally moves into the mobile header, which bare mode removes. Restore the
+   full-height tools row (--castle-hotbar-row-full, same as the desktop track) and
+   put the stage back in row 2 (the narrow layout moves it up into row 1). The row
+   must use the full height -- a shorter hardcoded track left the centered 46px
+   hotbar buttons overhanging the stage, which clipped their bottoms.
+
+   The PxArt editor (.drawingEditor) is intentionally NOT included here: it has
+   no docked tools row (its controls live in the header), and its left column
+   (.editorLeft) is pinned to grid-row 1, so injecting a 48px first row collapsed
+   the artboard to zero height across the 600-860px band. PxArt compact layout
+   is driven by the @container editor (max-width: 620px) rule on .editorBody. */
+@media (max-width: 860px) {
+  .panelBare .sceneWorkspace {
+    grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
+  }
+  .panelBare .sceneTools {
+    display: grid;
+  }
+  .panelBare .stageWrap {
+    grid-row: 2;
+  }
+}
+
+/* PxArt compact layout — MUST stay after .drawingToolsPanel / .paintColumn base
+   rules so these container-query overrides win the cascade (same element carries
+   pxArtInspector + drawingToolsPanel; a later bare .drawingToolsPanel{display:flex}
+   was keeping the sidebar visible beside the paint strip). */
+@container editor (max-width: 620px) {
+  .drawingEditor {
+    grid-template-columns: 1fr;
+  }
+
+  .drawingEditor > .pxArtInspector.drawingToolsPanel {
+    display: none;
+  }
+
+  .paintColumn {
+    display: flex;
+  }
+}
+