castle-web-cli 0.4.71 → 0.4.73

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

@@ -11,33 +11,47 @@
     sans-serif;
   --castle-font-display: var(--castle-font-body);
   --castle-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  --castle-black: #000;
+  --castle-black: #111;
   --castle-tap-highlight: #111;
   --castle-panel: #080808;
   --castle-panel-raised: #101010;
   --castle-panel-sunken: #050505;
   --castle-border: #444;
-  --castle-border-soft: #252525;
+  --castle-border-soft: #2a2a2a;
   --castle-text: #fff;
-  --castle-text-dim: #777;
-  --castle-text-muted: #aaa;
-  --castle-inspector-bg: #fff;
-  --castle-inspector-text: #222;
+  --castle-text-dim: #888;
+  --castle-text-muted: #888;
+  --castle-inspector-bg: #0d0d0d;
+  --castle-inspector-text: #e6e6e6;
   --castle-inspector-muted: #888;
-  --castle-inspector-border: #000;
-  --castle-inspector-divider: #ccc;
-  --castle-inspector-input-bg: #fff;
-  --castle-inspector-button-bg: #fff;
-  --castle-workspace-bg: #f0f0f0;
-  --castle-stage-workspace-bg: #ddd;
-  --castle-sheet-bg: #fff;
+  --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: #e3e6ff;
-  --castle-selected-ink: #242234;
+  --castle-selected: #e6e6e6;
+  --castle-selected-ink: #111;
   --castle-danger: #ff5d5d;
   --castle-ok: #81e69b;
   --castle-blue: #8db7ff;
   --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(*) {
@@ -89,15 +103,42 @@
   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 {
-  width: 100vw;
-  height: 100vh;
+  flex: 1 1 0;
+  min-height: 0;
   display: grid;
-  grid-template-columns: 236px 1fr;
+  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);
@@ -106,7 +147,16 @@
   flex-direction: column;
 }
 
-.fileBrowserHeader,
+/* 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;
@@ -115,18 +165,16 @@
   gap: 8px;
   padding: 10px 12px;
   border-bottom: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-sheet-bg);
+  background: var(--castle-workspace-bg);
 }
 
-.fileBrowserTitle,
 .editorTitle {
   font-family: var(--castle-font-display);
   letter-spacing: 0.01em;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 1;
 }
 
-.fileBrowserSubtitle,
 .muted {
   color: var(--castle-inspector-muted);
   font-size: 12px;
@@ -135,7 +183,7 @@
 .fileTree {
   flex: 1 1 0;
   min-height: 0;
-  padding: 8px 6px;
+  padding-top: 5px;
   overflow-y: auto;
 }
 
@@ -143,24 +191,39 @@
   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;
-  color: var(--castle-inspector-text);
+  /* 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: 8px 9px 8px calc(9px + var(--file-depth, 0) * 16px);
+  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: var(--castle-inspector-muted);
+  color: #777;
 }
 
 .fileRow:hover,
@@ -169,29 +232,82 @@
   color: var(--castle-inspector-text);
 }
 
-.fileRowSelected {
-  background: var(--castle-sheet-bg);
+/* 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);
 }
 
-.fileRowSelected:hover {
-  background: var(--castle-sheet-bg);
-  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;
 }
 
-.fileDisclosure {
-  width: 12px;
-  flex: 0 0 12px;
+.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: 10px;
+  font-size: 14px;
 }
 
 .mainEditor {
   min-width: 0;
   min-height: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--castle-sheet-bg);
@@ -215,6 +331,8 @@
   flex: 1;
   display: flex;
   overflow: hidden;
+  container-type: inline-size;
+  container-name: editor;
 }
 
 .sceneWorkspace {
@@ -222,37 +340,112 @@
   min-width: 0;
   min-height: 0;
   display: grid;
-  grid-template-columns: minmax(360px, 1fr) 320px;
-  grid-template-rows: 48px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) 280px;
+  grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
 }
 
-.sceneTools,
-.drawingTools {
+.sceneTools {
   grid-column: 1;
   grid-row: 1;
+  height: var(--castle-hotbar-row-full);
+  min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 12px;
+  padding: 0;
   border-bottom: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-sheet-bg);
+  background: var(--castle-workspace-bg);
 }
 
-.sceneTools {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 8px;
+/* 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 {
+  width: 46px;
+  height: 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);
+}
+
+.bpSlot:hover,
+.bpActionSlot:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.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);
 }
 
-.sceneToolsGroup {
+.bpDragPreview {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  border: 1px dashed var(--castle-text);
+  background: rgb(230 230 230 / 0.08);
+  opacity: 0.7;
 }
 
-.sceneToolsGroup:last-child {
-  justify-self: end;
+.bpDragPreviewOverStage {
+  opacity: 0.9;
+}
+
+.bpPreviewThumb {
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
 }
 
 .stageWrap {
@@ -265,20 +458,30 @@
   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: calc(100vw - 620px);
+  max-width: 100%;
+  overflow: visible;
+}
+
+.stageCardClip {
+  position: absolute;
+  inset: 0;
   background: var(--castle-card);
-  border: 1px solid var(--castle-inspector-border);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
 }
 
+.stageCardEditSurface {
+  overflow: visible;
+}
+
 .stageCanvas {
   width: 100%;
   height: 100%;
@@ -286,6 +489,14 @@
   touch-action: 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. */
@@ -303,334 +514,1064 @@
   transform-origin: 0 0;
 }
 
-.inspector {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  min-width: 0;
-  border-left: 1px solid var(--castle-inspector-divider);
-  background: var(--castle-inspector-bg);
-  color: var(--castle-inspector-text);
-  overflow: auto;
-  padding: 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;
 }
 
-.panel {
-  border: 0;
-  border-bottom: 1px solid var(--castle-inspector-divider);
-  border-radius: 0;
-  background: var(--castle-inspector-bg);
-  color: var(--castle-inspector-text);
-  margin: 0;
-  overflow: visible;
-  box-shadow: none;
+@keyframes selOverlayIn {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
-.panel:last-child {
-  border-bottom: 0;
+.selChromeLayer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+  pointer-events: none;
 }
 
-.panelHeader {
-  padding: 14px 16px 6px;
-  border-bottom: 0;
-  color: var(--castle-inspector-text);
-  font-size: 16px;
-  font-weight: 650;
+.selChromeWorld {
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-.panelBody {
-  padding: 8px 16px 4px;
+.selChromeRotate {
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-.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;
+.selColliderBox {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid rgb(141 183 255 / 0.9);
+  background: rgb(141 183 255 / 0.14);
+  border-radius: 2px;
+  pointer-events: none;
 }
 
-.fieldRow:last-child {
-  margin-bottom: 0;
+.selColliderPickup {
+  border-color: rgb(255 225 122 / 0.9);
+  background: rgb(255 225 122 / 0.14);
 }
 
-.fieldLabel {
-  color: var(--castle-inspector-text);
-  font-size: 16px;
+.selBox {
+  position: absolute;
+  border: 2px dashed var(--castle-text);
+  border-radius: 3px;
+  opacity: 0.85;
 }
 
-.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;
+/* Connector stem from the box's right-center edge to the rotate handle. */
+.selStem {
+  position: absolute;
+  height: 2px;
+  background: var(--castle-text);
+  opacity: 0.7;
+  transform: translateY(-50%);
 }
 
-.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='%23222' 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;
+.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);
 }
 
-.numberField {
-  position: relative;
-  width: 100%;
+.selScaleCorner {
+  width: 11px;
+  height: 11px;
+  border-radius: 999px;
 }
 
-.numberInput {
-  padding-right: 22px;
-  appearance: textfield;
-  -moz-appearance: textfield;
+.selScaleEdge {
+  border-radius: 999px;
 }
 
-.numberInput::-webkit-inner-spin-button,
-.numberInput::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
+.selScaleEdge[data-handle='n'],
+.selScaleEdge[data-handle='s'] {
+  width: 28px;
+  height: 9px;
 }
 
-.numberSteppers {
+.selScaleEdge[data-handle='e'],
+.selScaleEdge[data-handle='w'] {
+  width: 9px;
+  height: 28px;
+}
+
+.selPivot {
   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;
+  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;
-  transition: opacity 0.1s;
 }
 
-.numberField:hover .numberSteppers,
-.numberField:focus-within .numberSteppers {
-  opacity: 1;
+.selBtnWrap {
+  position: absolute;
+  transform: translate(-50%, -50%);
   pointer-events: auto;
 }
 
-.numberStepper {
-  flex: 1;
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.dashedSquareIcon {
+  width: 14px;
+  height: 14px;
+  border: 2px dashed currentColor;
+  border-radius: 2px;
+}
+
+.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%;
+}
+
+.canvasSizeBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+.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;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.paintStrip > * + * {
+  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);
+}
+
+.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;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: var(--castle-inspector-muted);
-  cursor: pointer;
-  font-size: 8px;
-  line-height: 1;
-}
-
-.numberStepper:first-child {
-  border-bottom: 1px solid var(--castle-inspector-divider);
 }
 
-.numberStepper:hover {
-  background: #eee;
-  color: var(--castle-inspector-text);
+.drawingCanvas {
+  image-rendering: pixelated;
+  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);
+  flex: 0 0 auto;
 }
 
-.numberStepper:disabled {
-  opacity: 0.3;
-  cursor: default;
-  background: transparent;
+.palette {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 4px;
+  padding-bottom: 12px;
 }
 
-.colorInput {
-  width: 100%;
-  height: 28px;
+.swatch {
+  aspect-ratio: 1;
   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: #fff;
-  padding: 2px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+/* 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);
 }
 
-.toggleOn {
-  background: var(--castle-black);
-  justify-content: flex-end;
+.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);
 }
 
-.toggleKnob {
-  width: 18px;
-  height: 18px;
-  border-radius: 999px;
-  background: var(--castle-black);
+.drawingToolStrip > * + * {
+  border-top: 1px solid var(--castle-inspector-border);
 }
 
-.toggleOn .toggleKnob {
-  background: var(--castle-text);
+.drawingToolsPanel {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.textarea {
+.drawingToolsPanelBody {
+  flex: 1 1 0;
   min-height: 0;
-  resize: none;
-  font-family: var(--castle-font-mono);
-  font-size: 12px;
-  line-height: 1.45;
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
 }
 
-.button {
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
+.drawingSettingsColumn {
+  min-width: 0;
+  height: 100%;
+  overflow: auto;
+}
+
+.drawingToolButton,
+.drawingSizeButton {
   background: var(--castle-inspector-button-bg);
   color: var(--castle-inspector-text);
-  padding: 6px 10px;
   cursor: pointer;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.iconButton {
+.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;
 }
 
-.iconButton svg {
+.drawingToolButton svg {
   width: 1em;
   height: 1em;
 }
 
-.button:hover {
-  background: #eee;
+.drawingToolButton:hover {
+  background: var(--castle-inspector-input-bg);
 }
 
-.buttonPrimary,
-.buttonActive {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
+.drawingToolButton:disabled {
+  opacity: 0.35;
+  cursor: default;
 }
 
-.buttonPrimary:hover,
-.buttonActive:hover {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
+/* 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);
+}
+
+.drawingToolHint {
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+  line-height: 1.35;
+  padding-bottom: 8px;
 }
 
-.buttonDanger {
-  color: var(--castle-danger);
+.drawingToolSettings {
+  padding-bottom: 8px;
 }
 
-.button:disabled {
-  opacity: 0.35;
-  cursor: default;
+.drawingSizePicker {
+  display: grid;
+  gap: 8px;
+  padding-bottom: 8px;
 }
 
-.actorList {
+.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;
-  gap: 4px;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
 }
 
-.actorRow {
+.drawingSizeSlider {
   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;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
 }
 
-.actorRowSelected {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
+.drawingSizeSlider:disabled {
+  cursor: default;
+  opacity: 0.45;
 }
 
-.drawingEditor,
-.codeEditor {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(320px, 1fr) 280px;
-  background: var(--castle-workspace-bg);
+.drawingSizeSlider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 999px;
+  background: #4a4a4a;
 }
 
-.drawingEditor {
-  grid-template-rows: 48px minmax(0, 1fr);
+.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;
 }
 
-.drawingCanvasWrap {
-  grid-column: 1;
-  grid-row: 2;
+.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: center;
-  padding: 24px;
-  min-width: 0;
-  min-height: 0;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--castle-inspector-muted);
+  font-size: 14px;
+  line-height: 1.35;
 }
 
-.drawingCanvas {
-  image-rendering: pixelated;
-  background:
-    linear-gradient(45deg, #ddd 25%, transparent 25%),
-    linear-gradient(-45deg, #ddd 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ddd 75%),
-    linear-gradient(-45deg, transparent 75%, #ddd 75%);
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    0 8px,
-    8px -8px,
-    -8px 0;
+.drawingSwitch {
+  position: relative;
+  width: 34px;
+  height: 20px;
+  padding: 0;
   border: 1px solid var(--castle-inspector-border);
-  max-width: min(70vh, 520px);
-  max-height: min(70vh, 520px);
+  border-radius: 999px;
+  background: #343434;
+  cursor: pointer;
 }
 
-.palette {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 6px;
-  padding-bottom: 12px;
+.drawingSwitchOn {
+  border-color: var(--castle-selected);
+  background: var(--castle-selected);
 }
 
-.swatch {
-  aspect-ratio: 1;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  cursor: pointer;
+.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;
 }
 
-.swatchSelected {
-  outline: 2px solid var(--castle-black);
-  outline-offset: 1px;
+.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 {
@@ -643,28 +1584,8 @@
   height: 100%;
 }
 
-.headerFilesButton {
-  width: 34px;
-  height: 34px;
-  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;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 34px;
-}
-
-.headerFilesButton[aria-pressed='true'] {
-  background: var(--castle-black);
-  border-color: var(--castle-black);
-  color: var(--castle-text);
-}
-
 /* mobileOnly comes AFTER element-specific rules so `display: none` wins on desktop. */
 .mobileOnly,
-.headerFilesButton,
 .sheetBackdrop,
 .sheetGrab,
 .sheetGrabBar,
@@ -674,7 +1595,7 @@
   display: none;
 }
 
-@media (max-width: 860px) {
+@media (max-width: 600px) {
   :root {
     --sheet-high-height: 62vh;
     --sheet-low-height: 18vh;
@@ -686,10 +1607,6 @@
     display: contents;
   }
 
-  .headerFilesButton {
-    display: inline-flex;
-  }
-
   /* Backdrop sits below the header so the files toggle stays interactive. */
   .sheetBackdrop {
     display: block;
@@ -735,7 +1652,7 @@
   }
 
   .editorTitle {
-    font-size: 15px;
+    font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -747,15 +1664,11 @@
     white-space: nowrap;
   }
 
-  /* Hide the desktop tools row on mobile -- buttons live in the header instead. */
-  .sceneTools,
-  .drawingTools {
-    display: none;
-  }
-
+  /* 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: minmax(0, 1fr);
+    grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
   }
 
   .drawingEditor {
@@ -765,29 +1678,33 @@
 
   .stageWrap {
     grid-column: 1;
-    grid-row: 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 {
-    max-width: min(92vw, 480px);
+    width: min(92vw, 480px, 62vh);
+    max-width: 100%;
     max-height: 100%;
-    width: auto;
   }
 
-  /* Drawing centers higher in the canvas region -- around the 1/3-from-top mark. */
+  /* PxArt artboard: keep flanking tool/paint columns; fit hook drives canvas size. */
   .drawingCanvasWrap {
-    grid-column: 1;
-    grid-row: 1;
-    align-items: flex-start;
-    padding: 6vh 16px 16px;
+    align-items: center;
+    padding: 10px 8px 12px;
   }
 
-  .drawingCanvas {
-    max-width: min(82vw, 480px);
-    max-height: min(54vh, 480px);
+  .artboardToolColumn,
+  .paintColumn {
+    padding: 8px 4px;
   }
 
   /* File-browser + inspector sheets share fixed-bottom positioning, height,
@@ -823,23 +1740,17 @@
     transform: translateY(0);
   }
 
-  /* Hide the desktop fileBrowserHeader on mobile (the grab handle replaces it). */
-  .fileBrowserHeader {
-    display: none;
-  }
-
   .fileTree {
     flex: 1 1 0;
     min-height: 0;
     overflow-y: auto;
-    padding: 4px 6px 12px;
   }
 
   /* Inspector sheet: hidden off-screen by default; slides up to high (full) or low (partial). */
   .inspector {
     z-index: 45;
     border-left: 0;
-    background: var(--castle-inspector-bg);
+    background: var(--castle-workspace-bg);
     padding: 0;
   }
 
@@ -875,7 +1786,7 @@
   }
 
   .inspector .sheetGrab {
-    background: var(--castle-inspector-bg);
+    background: var(--castle-workspace-bg);
   }
 
   .sheetGrabBar {
@@ -907,7 +1818,7 @@
 
   .sheetGrabHint {
     display: inline;
-    font-size: 12px;
+    font-size: 14px;
     color: var(--castle-inspector-muted);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -922,7 +1833,7 @@
   }
 
   .inspectorBody {
-    background: var(--castle-inspector-bg);
+    background: var(--castle-workspace-bg);
   }
 
   .codeInspectorInfo {
@@ -930,38 +1841,63 @@
     grid-template-columns: 80px 1fr;
     gap: 6px 12px;
     padding: 14px 16px;
-    font-size: 13px;
+    font-size: 14px;
     color: var(--castle-inspector-text);
     word-break: break-all;
   }
 }
 
-/* Bare (panel) editor wrapper: fills the panel iframe; single column. */
+/* 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: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
   background: var(--castle-workspace-bg);
 }
-/* In a panel the editor toolbar (play / undo / add) must stay visible even
-   below 860px -- it normally moves into the mobile header, which bare mode
-   removes. Keep it; the inspector still drops below at narrow widths. */
+/* 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) {
-  /* restore the 48px tools row the narrow layout drops, show the toolbar, and
-     put the stage back in row 2 (the narrow layout moves it up into row 1). */
-  .panelBare .sceneWorkspace,
-  .panelBare .drawingEditor {
-    grid-template-rows: 48px minmax(0, 1fr);
+  .panelBare .sceneWorkspace {
+    grid-template-rows: var(--castle-hotbar-row-full) minmax(0, 1fr);
   }
   .panelBare .sceneTools {
     display: grid;
   }
-  .panelBare .drawingTools {
-    display: flex;
-  }
-  .panelBare .stageWrap,
-  .panelBare .drawingCanvasWrap {
+  .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;
+  }
+}