:root {
  --bg: #0d1222;
  --panel: #141b30;
  --panel2: #1a2340;
  --line: #2a3557;
  --text: #ebe5da;
  --muted: #8d93ad;
  --accent: #ff004d;
  --blue: #29adff;
  --green: #00e436;
  --yellow: #ffec27;
  --ui: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 14px/1.45 var(--ui);
  display: flex; flex-direction: column; overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
button:hover { border-color: var(--muted); }
select.demos {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 6px; cursor: pointer; max-width: 9em;
}
select.demos:hover { border-color: var(--muted); }
button.on { background: var(--blue); border-color: var(--blue); color: #0d1222; }
input, select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
}
input[type=number] { width: 4.2em; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
kbd {
  font: 11px var(--mono); background: var(--panel2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 4px;
}
.hint { color: var(--muted); font-size: 12px; }

/* ---------- top bar */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
.brand img { height: 28px; width: auto; display: block; }
.cube.big { width: 64px; height: 64px; display: block; margin: 0 auto 12px; }
.cartname { background: transparent; border-color: transparent; font-weight: 500; width: 14em; }
.cartname:hover { border-color: var(--line); }
.spacer { flex: 1; }
.group { display: flex; gap: 6px; }
/* the small link to the repo, at the end of the header */
.gh { color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; padding: 4px 2px; }
.gh:hover { color: var(--text); text-decoration: underline; }
.info-link { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.info-link a { color: var(--text); }
.run { background: var(--green); border-color: var(--green); color: #0d1222; font-weight: 600; }
.stop { background: transparent; }

/* ---------- layout */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%); }
.left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }
.right { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 0; }
/* the game pane can be hidden on desktop, giving the editors the whole width */
.tabs .gametoggle { margin-left: auto; align-self: center; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: 12px; }
@media (min-width: 821px) {
  body.game-hidden .layout { grid-template-columns: minmax(0, 1fr); }
  body.game-hidden .right { display: none; }
  body.game-hidden .left { border-right: none; }
}

.tabs { display: flex; gap: 2px; padding: 8px 10px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.tabs button {
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  background: transparent; color: var(--muted); padding: 6px 16px;
}
.tabs button.on { background: var(--bg); color: var(--text); border-color: var(--line); margin-bottom: -1px; }

.panel { display: none; flex: 1; min-height: 0; overflow: auto; }
.panel.on { display: flex; flex-direction: column; }

/* ---------- code */
#tab-code { overflow: hidden; }
#code { flex: 1; width: 100%; resize: none; border: 0; padding: 12px; background: var(--bg); font: 13px/1.5 var(--mono); }
.CodeMirror { flex: 1; height: auto; background: var(--bg); color: var(--text); font: 13px/1.55 var(--mono); }
.CodeMirror-gutters { background: var(--bg); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: #4a557a; }
.CodeMirror-cursor { border-left: 2px solid var(--yellow); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: #2a3a6a; }
.CodeMirror-activeline-background { background: #121a30; }
.cm-s-default .cm-keyword { color: #ff77a8; }
.cm-s-default .cm-def { color: var(--yellow); }
.cm-s-default .cm-variable { color: var(--text); }
.cm-s-default .cm-variable-2 { color: #c2c3c7; }
.cm-s-default .cm-property { color: #83d0ff; }
.cm-s-default .cm-number { color: #ffa300; }
.cm-s-default .cm-string { color: #a8e72e; }
.cm-s-default .cm-comment { color: #6b7396; font-style: italic; }
.cm-s-default .cm-operator { color: #c2c3c7; }
.cm-s-default .cm-atom { color: #ffa300; }
.CodeMirror .errline { background: rgba(255, 0, 77, 0.18); }
/* the Code tab's small toolbar */
.codebar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.codebar button { padding: 3px 10px; font-size: 12px; }
.codebar .hint { margin-left: 4px; }
.codebar select { font: 12px var(--mono); max-width: 16em; }
/* code folding (foldgutter add-on) */
.CodeMirror-foldgutter { width: 1.1em; }
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { color: #4a557a; cursor: pointer; }
.CodeMirror-foldgutter-open:hover, .CodeMirror-foldgutter-folded { color: var(--yellow); }
.CodeMirror-foldmarker { color: var(--yellow); background: #2a3a6a; border-radius: 3px; padding: 0 4px; font-family: var(--mono); text-shadow: none; }
/* find / replace bar (CodeMirror's dialog add-on) */
.CodeMirror-dialog { background: var(--panel); color: var(--text); font: 13px var(--ui); padding: 6px 10px; }
.CodeMirror-dialog-top { border-bottom: 1px solid var(--line); }
.CodeMirror-dialog input { color: var(--text); font: 13px var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; width: 16em; }
.CodeMirror-dialog button { font-size: 12px; padding: 2px 10px; margin-left: 4px; }
.CodeMirror-search-hint { color: var(--muted); }
.cm-searching { background: rgba(255, 201, 60, 0.28); }
/* autocomplete popup (show-hint add-on) */
.CodeMirror-hints { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); font: 13px var(--mono); max-height: 16em; z-index: 50; }
.CodeMirror-hint { color: var(--text); padding: 2px 10px; }
.CodeMirror-hint .sig { color: var(--muted); margin-left: 10px; }
li.CodeMirror-hint-active { background: #2a3a6a; color: var(--text); }
.CodeMirror-matchingbracket { background: rgba(255, 201, 60, 0.18); }
.CodeMirror-nonmatchingbracket { color: #ff004d !important; }
.CodeMirror-matchingbracket { color: var(--yellow) !important; }

/* ---------- map editor */
.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.toolbar label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.toolbar label input, .toolbar label select { color: var(--text); }
.xyz input { width: 3.6em; }
.sep { width: 1px; height: 20px; background: var(--line); }
/* Shift: move a whole map, model or scene one step along an axis */
.shiftpick { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.shiftpick > span { margin-right: 3px; }
.shiftpick button { padding-left: 6px; padding-right: 6px; }
.tilebar { display: flex; gap: 4px; padding: 8px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
/* many tiles: the bar scrolls after three rows instead of pushing the map grid down */
.tilebar { max-height: 128px; overflow-y: auto; flex-shrink: 0; }
.tilebtn {
  position: relative; padding: 0; width: 34px; height: 34px; border-radius: 5px; overflow: hidden;
  border: 2px solid transparent; background: #000;
}
.tilebtn canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.tilebtn span {
  position: absolute; right: 1px; bottom: 0; font: 600 9px var(--mono); color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}
.tilebtn.on { border-color: var(--yellow); }
.tilebtn.eraser { background: repeating-conic-gradient(#2a3557 0 25%, #141b30 0 50%) 0 0 / 10px 10px; }

.mapwork { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); }
.gridwrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px 12px; gap: 8px; }
.layerbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); }
.layerbar b { color: var(--yellow); font: 600 15px var(--mono); min-width: 1.6em; text-align: center; }
.layerbar input[type=range] { width: 120px; }
.check { display: flex; align-items: center; gap: 4px; }
.gridscroll { flex: 1; min-height: 120px; overflow: auto; display: flex; align-items: flex-start; justify-content: center; }
#mapGrid { image-rendering: pixelated; cursor: crosshair; }
.previewwrap { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-left: 1px solid var(--line); min-height: 0; }
.previewwrap canvas { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); cursor: grab; touch-action: none; }

/* ---------- sprite editor */
.sprwork { flex: 1; display: grid; grid-template-columns: 186px minmax(0, 1fr) 220px; min-height: 0; }
.tilelist { border-right: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.tilegrid { display: grid; grid-template-columns: repeat(4, 34px); gap: 4px; }
/* a long list scrolls on its own, so the Add / Duplicate buttons under it stay in view */
.tilelist > .tilegrid { min-height: 0; flex: 0 1 auto; overflow-y: auto; align-content: start; scrollbar-gutter: stable; scrollbar-width: thin; }
.tilelist .row { display: flex; flex-wrap: wrap; gap: 4px; }
.spreditor { padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; overflow: auto; min-width: 0; }
.sprhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sprhead b { color: var(--yellow); font: 600 16px var(--mono); }
.toolpick { display: flex; gap: 4px; }
.faces { display: flex; gap: 18px; flex-wrap: wrap; }
.face { display: flex; flex-direction: column; gap: 6px; }
.facehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 500; }
.facehead button { font-size: 12px; padding: 2px 8px; }
.facecanvas { width: 176px; height: 176px; image-rendering: pixelated; cursor: crosshair; border-radius: 4px; border: 1px solid var(--line); touch-action: none; }
.palette { display: grid; grid-template-columns: repeat(16, 22px); gap: 2px; }
.swatch { width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent; padding: 0; position: relative; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--yellow); }
.colorinfo { color: var(--muted); display: flex; gap: 8px; align-items: center; }
.colorinfo b { color: var(--yellow); font-family: var(--mono); }
.colorinfo code { font-family: var(--mono); color: var(--text); }
.previewwrap.small { border-left: 1px solid var(--line); }

/* ---------- vox editor */
.voxwork { flex: 1; display: grid; grid-template-columns: 186px minmax(0, 1fr) minmax(240px, 34%); min-height: 0; }
.voxeditor { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; min-width: 0; }
#voxName { width: 8em; }
.voxgrid { width: 288px; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; cursor: crosshair; border-radius: 4px; border: 1px solid var(--line); touch-action: none; }
.voxside { gap: 8px; }
.voxside label.xyz { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.voxside label.xyz input { width: 4em; }
.playbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.playbar input { width: 3.4em; }
.playbar .fps { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
#playBtn.on { background: var(--green); border-color: var(--green); color: #0d1222; }
#voxPalette { grid-template-columns: repeat(16, minmax(0, 22px)); }
#voxPalette .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.tilebtn.voxthumb { background: #1a2340; }
.tilebtn.playing { border-color: var(--green); }

/* ---------- sfx editor */
.sfxwork { flex: 1; display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 0; }
.sfxlist { border-right: 1px solid var(--line); padding: 10px; display: grid; grid-template-columns: repeat(4, 34px); grid-auto-rows: 28px; gap: 4px; overflow: auto; align-content: start; }
.sfxlist button { padding: 0; font: 11px var(--mono); color: var(--muted); }
.sfxlist button.has { color: var(--text); border-color: #4a557a; background: #222d52; }
.sfxlist button.on { background: var(--yellow); border-color: var(--yellow); color: #0d1222; }
.sfxeditor { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-width: 0; }
.sfxhead { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.sfxhead b { color: var(--yellow); font: 600 16px var(--mono); }
.sfxhead label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.sfxhead input[type=number] { width: 3.6em; }
#sfxPlay.on { background: var(--green); border-color: var(--green); color: #0d1222; }
.sfxbrush { display: flex; flex-direction: column; gap: 6px; }
.brushrow { display: flex; align-items: center; gap: 8px; }
.brushrow > span:first-child { width: 4.5em; color: var(--muted); font-size: 13px; }
.pick { display: flex; flex-wrap: wrap; gap: 3px; }
.pick button { padding: 2px 7px; font-size: 12px; }
.pick button i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.sfxgraphs { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.sfxgraphs canvas { width: 100%; border: 1px solid var(--line); border-radius: 4px; cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.glabel { color: var(--muted); font-size: 12px; display: flex; gap: 10px; }
.sfxstring { display: flex; align-items: center; gap: 8px; max-width: 640px; }
.sfxstring label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sfxstring input { flex: 1; min-width: 0; font: 11px var(--mono); }

/* ---------- scale + music */
.scalebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scalebar select { min-width: 0; }
.sfxlist button.playing { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
#musPlay.on { background: var(--green); border-color: var(--green); color: #0d1222; }
.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-width: 880px; }
.chan { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); min-width: 0; }
.chan.off { opacity: 0.55; }
.chanhead { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; }
.chanhead .check { white-space: nowrap; }
.chanpick { display: flex; align-items: center; gap: 4px; }
.chanpick input { flex: 1; min-width: 0; text-align: center; }
.chanpick button { padding: 2px 8px; }
.chan canvas { width: 100%; aspect-ratio: 2.5; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; image-rendering: pixelated; }
.chan .edit { font-size: 12px; padding: 2px 8px; align-self: flex-start; }

/* ---------- info */
.apiref { padding: 18px 22px 40px; max-width: 860px; }
.apiref h2 { font: 600 15px var(--mono); color: var(--yellow); margin: 26px 0 6px; }
.apiref h2:first-child { margin-top: 4px; }
.apiref p { margin: 4px 0 10px; color: var(--muted); }
.apiref table { border-collapse: collapse; width: 100%; }
.apiref td { padding: 6px 10px 6px 0; vertical-align: top; border-top: 1px solid var(--line); }
.apiref td:first-child { white-space: nowrap; width: 1%; }
.apiref code, .apiref pre { font-family: var(--mono); font-size: 12.5px; }
.apiref td code { color: #83d0ff; }
.apiref pre { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow: auto; }

/* ---------- game + console */
.screen {
  /* the square game plus the 46px row of system buttons (pause, mute, fullscreen) under it */
  position: relative; width: 100%; max-height: calc(100vh - 230px); aspect-ratio: 256 / 290; margin: 0 auto;
  background: #000; border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
}
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--muted); text-align: center; background: radial-gradient(circle at 50% 40%, #1a2340, #000 75%);
}
.controls { color: var(--muted); font-size: 12px; text-align: center; }
.savebar { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; min-width: 0; }
.savebar code { font: 11px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.savebar button { font-size: 12px; padding: 2px 8px; }
.savebar .coverthumb { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--line, #333); margin-right: auto; }
.console {
  flex: 1; min-height: 70px; overflow: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: 12px/1.5 var(--mono);
}
.console div { white-space: pre-wrap; }
.console .error { color: #ff6e59; cursor: pointer; }
.console .error:hover { text-decoration: underline; }
.console .info { color: var(--muted); }

/* ---------- scene editor */
.scenework { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; min-height: 0; }
.scenelist { border-right: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.addrow { display: flex; gap: 4px; }
.addrow select { flex: 1; min-width: 0; }
.itemlist { display: flex; flex-direction: column; gap: 2px; }
.itemlist .grouphead { color: var(--muted); font-size: 12px; margin-top: 6px; }
.itemlist button { text-align: left; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; }
.itemlist button b { font-family: var(--mono); color: var(--yellow); font-weight: 600; margin-right: 4px; }
.itemlist button.on b { color: #0d1222; }
.itemlist .empty { color: var(--muted); font-size: 12px; }
.scenepreview { border-left: none; }
.scenepreview canvas { aspect-ratio: auto; flex: 1; min-height: 240px; }
.scenepreview .row { display: flex; gap: 4px; }
.sceneprops { border-left: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.sceneprops label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.sceneprops label input, .sceneprops label select { color: var(--text); }
#selFields { display: flex; flex-direction: column; gap: 10px; }
#selFields[hidden] { display: none; }
.sceneprops .xyz input { width: 3.3em; min-width: 0; }
.sceneprops label.xyz { gap: 4px; }
.selhead b { color: var(--yellow); }
.nudge { display: flex; flex-direction: column; gap: 6px; }
.nudgegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sceneprops .row { display: flex; gap: 4px; }

@media (max-width: 1100px) {
  .mapwork { grid-template-columns: 1fr; }
  .previewwrap { border-left: none; border-top: 1px solid var(--line); }
  .previewwrap canvas { max-width: 280px; }
  .sprwork { grid-template-columns: 150px minmax(0, 1fr); }
  .sprwork .previewwrap { grid-column: 1 / -1; }
  .voxwork { grid-template-columns: 150px minmax(0, 1fr); }
  .voxwork .previewwrap { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); }
  .tilegrid { grid-template-columns: repeat(3, 34px); }
  .scenework { grid-template-columns: 180px minmax(0, 1fr); }
  .sceneprops { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); }
  .scenepreview canvas { max-width: none; }
}

/* ---------- touch screens: the game page brings its own controls (js/shell.js) */
.mobile-only { display: none; }
@media (pointer: coarse) {
  .controls { display: none; }
}

/* ---------- phones and other tall, narrow screens: one panel at a time, the game is a tab */
@media (max-width: 820px) {
  body { height: 100dvh; }
  .mobile-only { display: revert; }
  .desktop-only { display: none; }
  button { min-height: 38px; }
  input, select { font-size: 16px; }   /* keeps iOS from zooming in when a field gets focus */

  .topbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  }
  .topbar .spacer { display: none; }
  .brand img { height: 22px; }
  .cartname { width: 100%; min-width: 0; }
  .group.play { grid-column: 3; grid-row: 1; }
  .group.files { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; scrollbar-width: none; }
  .group.files::-webkit-scrollbar { display: none; }
  .group.files button, .group.files select { flex: 1 0 auto; }
  select.demos { min-height: 38px; }

  .layout { display: flex; flex-direction: column; }
  .left { flex: 1; min-height: 0; border-right: none; }
  .right { display: none; }
  body[data-tab="game"] .left { flex: 0 0 auto; }
  body[data-tab="game"] .left .panel { display: none; }
  body[data-tab="game"] .right { display: flex; flex: 1; min-height: 0; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); overflow: auto; }

  .tabs { overflow-x: auto; padding: 6px 8px 0; scrollbar-width: none; }
  .tabs button { flex: 1 0 auto; padding: 8px 12px; }

  /* map editor */
  .toolbar { gap: 8px; padding: 8px 10px; }
  .sep { display: none; }
  .tilebar { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; }
  .tilebtn { width: 40px; height: 40px; flex: 0 0 auto; }
  .mapwork { display: flex; flex-direction: column; }
  .gridwrap { padding: 10px; }
  .gridscroll { flex: none; min-height: 0; }
  #mapGrid { touch-action: none; }
  .previewwrap { padding: 10px; }
  .previewwrap canvas { max-width: none; }

  /* tile editor */
  .sprwork { display: flex; flex-direction: column; }
  .tilelist { border-right: none; border-bottom: 1px solid var(--line); padding: 8px 10px; overflow: visible; }
  .tilegrid { display: flex; overflow-x: auto; gap: 4px; }
  .tilegrid .tilebtn { width: 40px; height: 40px; flex: 0 0 auto; }
  .tilelist > .tilegrid { overflow-y: hidden; scrollbar-gutter: auto; padding-right: 0; }
  .spreditor { padding: 10px; gap: 12px; overflow: visible; }
  .faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .facehead { flex-wrap: wrap; gap: 4px; font-size: 13px; }
  .facehead button { min-height: 30px; padding: 2px 6px; font-size: 11px; }
  .facecanvas { width: 100%; height: auto; aspect-ratio: 1; }
  .palette { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .swatch { width: 100%; height: 34px; }
  .sprwork .previewwrap canvas { max-width: 260px; margin: 0 auto; }

  /* vox editor */
  .voxwork { display: flex; flex-direction: column; }
  .voxeditor { padding: 10px; gap: 10px; overflow: visible; }
  .voxgrid { width: 100%; }
  .voxwork .previewwrap canvas { max-width: 320px; margin: 0 auto; }

  /* scene editor: the view first, then the selected thing, then the list */
  .scenework { display: flex; flex-direction: column; }
  .scenework > * { flex: none; }
  .scenepreview { order: 1; }
  .scenepreview canvas { flex: none; width: 100%; height: auto; aspect-ratio: 1; min-height: 0; }
  .sceneprops { order: 2; border-top: 1px solid var(--line); }
  .scenelist { order: 3; border-right: none; border-top: 1px solid var(--line); overflow: visible; }

  /* sfx editor */
  .sfxwork { display: flex; flex-direction: column; }
  .sfxlist { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 32px; border-right: none; border-bottom: 1px solid var(--line); flex: none; height: 118px; }
  .sfxlist button { min-height: 0; }
  .sfxeditor { padding: 10px; overflow: visible; }
  .brushrow { align-items: flex-start; }
  .pick button { min-height: 32px; }

  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* API reference: one entry per block instead of a two-column table */
  .apiref { padding: 14px 14px 40px; }
  .apiref tr { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
  .apiref td { display: block; border: none; padding: 2px 0; width: auto; }
  .apiref td:first-child { white-space: normal; width: auto; }

  /* game tab */
  .screen { max-height: none; width: 100%; aspect-ratio: auto; flex: 1; min-height: 0; }
  .console { flex: none; min-height: 72px; max-height: 30vh; }
}
.sceneprops [hidden] { display: none !important; }
.planepick button { padding: 3px 8px; }
.undopick { display: inline-flex; gap: 4px; }
.planerow { display: flex; align-items: center; gap: 6px; color: var(--muted); flex-wrap: wrap; }
.voxside label.check { color: var(--muted); }