:root {
    --bg: #101010;
    --bg-panel: #161616;
    --bg-panel-alt: #181818;
    --fg: #e0e0e0;
    --fg-soft: #b0b0b0;
    --accent: #6fd3ff;
    --accent-soft: #3b8fad;
    --border: #333;
    --warn: #ffb347;
    --error: #ff6b6b;
    --mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: radial-gradient(circle at top, #191919 0, #070707 60%, #000 100%);
    color: var(--fg);
    font-family: var(--mono);
    font-size: 14px;
  }

  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  header {
    background: #141414;
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .header-inner { text-align: center; }

  header .title {
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }

  header .subtitle { font-size: 11px; color: var(--fg-soft); }
  header .subtitle:empty { display: none; }
  header .subtitle span { color: var(--accent); }

  .lang-switch {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
  }

  .lang-btn {
    border-radius: 999px;
    border: 1px solid #333;
    background: #181818;
    color: var(--fg-soft);
    font-family: var(--mono);
    font-size: 11px;
    padding: 3px 8px 4px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    cursor: pointer;
  }

  .lang-btn.active {
    background: #222;
    color: var(--accent);
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(111,211,255,0.4);
  }
  .lang-btn:hover { background: #202020; }

  main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 18px 20px 32px;
  }

  .grid {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(480px, 1fr);
    gap: 24px;
  }

  .panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 16px;
    box-shadow: 0 0 0 1px #000, 0 16px 30px rgba(0,0,0,0.6);
  }

  .panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .panel-title {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .panel-tag { font-size: 11px; color: var(--fg-soft); }

  fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px 10px;
    margin: 0 0 10px;
  }
  legend {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0 6px;
    color: var(--fg-soft);
  }

  label {
    display: block;
    font-size: 12px;
    margin: 4px 0 2px;
  }

  select, input[type="text"] {
    width: 100%;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #2b2b2b;
    background: #101010;
    color: var(--fg);
    font-family: var(--mono);
    font-size: 13px;
    outline: none;
  }
  select:focus, input[type="text"]:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(111,211,255,0.3);
  }

  input[type="checkbox"] { width: auto; margin: 0; }

  .small-note {
    font-size: 11px;
    color: var(--fg-soft);
    margin-top: 4px;
  }

  .inline-code {
    padding: 0 3px;
    border-radius: 4px;
    background: #1b1b1b;
    border: 1px solid #252525;
    font-size: 11px;
  }

  .caps {
    text-transform: uppercase;
    letter-spacing: 0.16em;
  }

  .result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
  }

  .result-block {
    background: var(--bg-panel-alt);
    border-radius: 8px;
    border: 1px dashed #2c2c2c;
    padding: 7px 9px 9px;
  }

  .result-block h3 {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-soft);
  }

  .result-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    gap: 8px;
  }
  .result-row span:first-child { color: var(--fg-soft); }

  .vis-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px;
  }

  canvas {
    background: #050505;
    border-radius: 10px;
    border: 1px solid #252525;
    display: block;
  }

  #screenCanvas {
    width: 100%;
    max-width: 800px;
  }

  #miniCanvas {
    width: 220px;
    height: 450px;
  }

  .vis-caption {
    font-size: 11px;
    color: var(--fg-soft);
    margin-top: 4px;
  }

  .badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid #2e2e2e;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-soft);
  }

  .badge.warn  { border-color: var(--warn);  color: var(--warn); }
  .badge.error { border-color: var(--error); color: var(--error); }

  .warnings { margin-top: 6px; font-size: 11px; }
  .warnings div { margin-bottom: 2px; }
  .warnings .warn  { color: var(--warn); }
  .warnings .error { color: var(--error); }

  .preset-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
  }
  .preset-row span {
    font-size: 11px;
    color: var(--fg-soft);
  }

  .fields-vertical .field-vert-row {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed #2a2a2a;
  }
  .fields-vertical .field-vert-row:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .bit-range {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-soft);
    margin-bottom: 2px;
  }

  .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 4px;
  }

  .scroll-fieldset { margin-top: 6px; }

  .scroll-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .scroll-cell {
    flex: 1;
    min-width: 260px;
  }

  .scroll-line {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .scroll-label {
    font-size: 11px;
    color: var(--fg-soft);
    white-space: nowrap;
  }

  .scroll-line input[type="text"] {
    width: 80px;
  }

  .scroll-cell input[type="range"] {
    width: 100%;
    margin-top: 2px;
  }

  .scroll-extra { margin-top: 4px; }
  .scroll-extra.hidden { display: none; }

  @media (max-width: 880px) {
    main { max-width: 100%; padding: 10px; }
    .grid { grid-template-columns: 1fr; }
    .lang-switch { top: 8px; transform: none; }
    .scroll-row { flex-wrap: wrap; }
    .vis-wrapper { flex-direction: column; }
    #miniCanvas { width: 100%; height: 160px; }
  }


/* Blitter modeller application shell */
.hidden { display: none !important; }

.app-tabs {
  max-width: 1280px;
  margin: 12px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.app-tab {
  border: 1px solid var(--border);
  background: #151515;
  color: var(--fg-soft);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
}

.app-tab:hover { border-color: var(--accent-soft); color: var(--fg); }
.app-tab.active {
  background: linear-gradient(180deg, #1e3440, #14232b);
  color: var(--fg);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, 0.10) inset;
}

.app-tab-panel { width: 100%; }

.blitter-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(520px, 1fr);
  gap: 16px;
  align-items: start;
}

.blitter-stack { display: grid; gap: 16px; }

.blitter-placeholder {
  border: 1px dashed #3f3f3f;
  border-radius: 8px;
  padding: 10px;
  color: var(--fg-soft);
  background: rgba(255, 255, 255, 0.02);
}

.blitter-kv {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 6px 10px;
  margin: 8px 0;
}

.blitter-kv div:nth-child(odd) { color: var(--fg-soft); }
.blitter-kv div:nth-child(even) { color: var(--fg); }

.blitter-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 8px;
}

.blitter-memory-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: #121212;
}

.blitter-memory-chip strong { display: block; color: var(--accent); margin-bottom: 4px; }
.blitter-memory-chip span { color: var(--fg-soft); font-size: 12px; }

.blitter-command-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.blitter-command-list li {
  border: 1px solid var(--border);
  background: #121212;
  border-radius: 6px;
  padding: 8px;
  color: var(--fg-soft);
}

.blitter-canvas-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 12px;
}

.blitter-canvas-stub {
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #111 0, #111 8px, #151515 8px, #151515 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  text-align: center;
  padding: 12px;
}

.blitter-memory-map-stub {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(111,211,255,.10) 0 8%, rgba(160,120,255,.12) 8% 16%, rgba(120,255,150,.10) 16% 24%, rgba(255,190,90,.10) 24% 32%, rgba(255,80,80,.12) 32% 40%, #101010 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-soft);
  text-align: center;
  padding: 12px;
}

@media (max-width: 900px) {
  .blitter-layout { grid-template-columns: 1fr; }
  .blitter-mini-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .blitter-canvas-row { grid-template-columns: 1fr; }
}

/* M2: editable memory model and layer0 renderer */
.blitter-page-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.blitter-page-form.two-cols {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.blitter-page-form label {
  display: grid;
  grid-template-rows: minmax(30px, auto) auto;
  align-content: start;
  gap: 3px;
  margin: 0;
  min-width: 0;
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-page-field-label {
  display: block;
  min-height: 30px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.blitter-page-form input[type="text"] {
  margin-top: 0;
  min-height: 31px;
}

.blitter-button-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.blitter-btn {
  border: 1px solid var(--border);
  background: #151515;
  color: var(--fg);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}

.blitter-btn:hover {
  border-color: var(--accent-soft);
  background: #1b2428;
}

.blitter-mode-info {
  min-height: 70px;
  margin: 8px 0 0;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  overflow: auto;
  font-family: var(--mono);
  font-size: 11px;
}

.blitter-screen-canvas {
  width: 100%;
  height: auto;
  min-height: 220px;
  image-rendering: pixelated;
}

@media (max-width: 1180px) {
  .blitter-page-form { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

.blitter-memory-chip.warn {
  border-color: var(--warn);
}

.blitter-memory-chip.error {
  border-color: var(--error);
}

/* M2.1: desktop 16:9 layout fix -------------------------------------------------
   The blitter tab uses wide technical panels. The previous two-column layout
   allowed fixed-width inner grids to overflow from the left column and visually
   slide under the right column. These rules make the grid explicit for desktop,
   allow inner items to shrink, and wrap form grids instead of overflowing. */

main,
.app-tabs {
  width: min(1840px, calc(100vw - 40px));
  max-width: 1840px;
}

.app-tabs {
  padding-left: 0;
  padding-right: 0;
}

.app-tab-panel,
.grid,
.blitter-layout,
.blitter-stack,
.panel,
fieldset,
.result-block,
.blitter-canvas-row,
.blitter-page-form,
.blitter-mini-grid {
  min-width: 0;
}

.panel {
  overflow: hidden;
}

.blitter-layout {
  grid-template-columns: minmax(560px, 680px) minmax(0, 1fr);
  gap: 20px;
}

.blitter-stack {
  align-content: start;
}

.blitter-page-form {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.blitter-page-form.two-cols {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.blitter-mini-grid {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}

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

.blitter-screen-canvas,
.blitter-canvas-stub,
.blitter-memory-map-stub,
.blitter-mode-info,
.blitter-placeholder,
.small-note {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.blitter-screen-canvas {
  min-height: 180px;
  max-height: 42vh;
  object-fit: contain;
}

.blitter-memory-map-stub {
  min-height: 220px;
}

@media (max-width: 1360px) {
  main,
  .app-tabs {
    width: min(100%, calc(100vw - 24px));
  }

  .blitter-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  main,
  .app-tabs {
    width: min(100%, calc(100vw - 16px));
  }

  .blitter-canvas-row {
    grid-template-columns: 1fr;
  }
}

/* M3: sprite/data loader ------------------------------------------------------ */
.blitter-loader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 8px 0;
  min-width: 0;
}

.blitter-loader-grid.two-cols {
  grid-template-columns: minmax(140px, 220px) minmax(240px, 1fr);
}

.blitter-loader-grid label,
.blitter-textarea-label {
  color: var(--fg-soft);
  font-size: 11px;
  display: block;
  min-width: 0;
}

.blitter-loader-grid input,
.blitter-loader-grid select,
.blitter-loader-grid input[type="file"] {
  margin-top: 3px;
  min-width: 0;
  width: 100%;
}

.blitter-textarea-label textarea {
  width: 100%;
  margin-top: 4px;
  min-height: 126px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #101010;
  color: var(--fg);
  padding: 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
}

.blitter-status {
  margin: 8px 0 0;
  min-height: 72px;
  max-height: 180px;
  overflow: auto;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 11px;
}

.blitter-status.warn { border-color: var(--warn); color: #ffd08a; }
.blitter-status.error { border-color: var(--error); color: #ff9d9d; }

.blitter-preview-layout {
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.blitter-preview-canvas {
  width: 100%;
  max-width: 310px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #111 0, #111 8px, #151515 8px, #151515 16px);
  image-rendering: pixelated;
}

.blitter-sprite-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}

.blitter-sprite-list li {
  border: 1px solid var(--border);
  background: #121212;
  border-radius: 8px;
  padding: 7px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
}

.blitter-sprite-list li.selected {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(111,211,255,.12) inset;
}

.blitter-sprite-list .sprite-select {
  grid-row: span 2;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #18232a;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 7px;
  cursor: pointer;
}

.blitter-sprite-list span {
  color: var(--fg);
  overflow-wrap: anywhere;
}

.blitter-sprite-list small {
  color: var(--fg-soft);
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 1360px) {
  .blitter-preview-layout { grid-template-columns: 1fr; }
  .blitter-preview-canvas { max-width: 360px; }
}

@media (max-width: 760px) {
  .blitter-loader-grid.two-cols { grid-template-columns: 1fr; }
}

/* M4: one-command constructor and op0 fill ---------------------------------- */
.blitter-btn.primary {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, #1e3440, #14232b);
  color: #e8f8ff;
}

.blitter-command-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin: 10px 0;
  min-width: 0;
}

/* M32: every editor control is a self-contained field.  The small ? button
   exposes an explicit keyboard-operable tip; the full text also remains tied
   to the input via aria-describedby. */
.blitter-command-field {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: start;
}

.blitter-field-label-row {
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  gap: 6px;
  min-width: 0;
}

.blitter-field-label-row > label {
  min-width: 0;
  color: var(--fg-soft);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.blitter-field-tip {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #3a5562;
  border-radius: 50%;
  background: #14232b;
  color: var(--accent);
  font: 700 12px/16px var(--mono);
  cursor: help;
}

.blitter-field-tip:hover,
.blitter-field-tip:focus-visible,
.blitter-field-tip[aria-expanded="true"] {
  border-color: var(--accent-soft);
  color: #f0fbff;
  box-shadow: 0 0 0 1px rgba(111,211,255,.18);
  outline: none;
}

.blitter-field-tip-popover {
  position: absolute;
  z-index: 1200;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid var(--accent-soft);
  border-radius: 7px;
  background: #101820;
  box-shadow: 0 10px 24px rgba(0,0,0,.56);
  color: #d9edf5;
  font: 11px/1.38 var(--mono);
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}

.blitter-field-tip-popover.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.blitter-command-editor input,
.blitter-command-editor select {
  margin-top: 0;
  min-width: 0;
  width: 100%;
  min-height: 31px;
}

.blitter-command-live-note {
  margin-top: 2px;
  color: #b7d6e5;
}

select,
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid #2b2b2b;
  background: #101010;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(111,211,255,0.3);
}

.blitter-command-output {
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0;
  background: #101010;
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-words-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.blitter-words-grid div {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #151515;
  padding: 6px;
  min-width: 0;
}

.blitter-words-grid span {
  display: block;
  color: var(--fg-soft);
  font-size: 10px;
  margin-bottom: 2px;
}

.blitter-words-grid strong {
  display: block;
  color: var(--accent);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.blitter-decode {
  min-height: 116px;
  max-height: 240px;
  overflow: auto;
  margin: 8px 0 0;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 11px;
}

.blitter-command-list li.selected {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(111,211,255,.12) inset;
}

.blitter-command-list small {
  display: block;
  margin-top: 4px;
  color: var(--fg-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 1520px) {
  .blitter-words-grid { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
}

@media (max-width: 760px) {
  .blitter-words-grid { grid-template-columns: repeat(2, minmax(72px, 1fr)); }
}

.blitter-journal-panel {
  margin-top: 10px;
  border: 1px solid #2b3a2d;
  border-radius: 10px;
  background: rgba(12, 20, 14, .78);
  overflow: hidden;
}

.blitter-journal-panel summary {
  cursor: pointer;
  user-select: none;
  padding: 9px 10px;
  color: #d7f3dd;
  font-family: var(--mono);
  font-size: 12px;
  border-bottom: 1px solid #253529;
  background: rgba(32, 58, 38, .35);
}

.blitter-journal-panel:not([open]) summary {
  border-bottom: 0;
}

.blitter-journal {
  min-height: 160px;
  height: 300px;
  max-height: none;
  resize: vertical;
  overflow: auto;
  color: #d7f3dd;
  border: 0;
  border-top: 1px dashed #2c3f31;
  border-radius: 0;
  margin: 0;
  white-space: pre;
}

/* M6 command packet controls */
.blitter-command-list li { cursor: pointer; }
.blitter-command-list li:hover { border-color: rgba(111,211,255,.55); }
.preset-row-blitter { align-items: center; }
.preset-row-blitter .small-note { margin-right: 4px; }


/* M6.1: screen scale controls and wider journal byte text */
.blitter-screen-scale-panel {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(220px, 320px) minmax(360px, 1fr);
  gap: 10px;
  align-items: end;
  margin: 0 0 10px;
  min-width: 0;
}

.blitter-screen-scale-panel input[type="range"] {
  width: 170px;
  vertical-align: middle;
}

.blitter-canvas-row > div {
  min-width: 0;
  overflow: auto;
  border-radius: 10px;
}

.blitter-screen-canvas[data-scale-mode="auto"] {
  width: 100%;
  height: auto;
}

.blitter-screen-canvas:not([data-scale-mode="auto"]) {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

.blitter-journal {
  tab-size: 2;
}

@media (max-width: 900px) {
  .blitter-screen-scale-panel {
    grid-template-columns: 1fr;
  }
}


/* M6.3: no overlay text on preview canvases; one small meta label below screens */
.blitter-screen-meta {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.78;
}

/* M7: virtual memory map ------------------------------------------------------ */
.blitter-memory-map-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 92px repeat(4, auto);
  gap: 8px;
  align-items: end;
  margin: 8px 0 10px;
  min-width: 0;
}

.blitter-memory-map-toolbar label {
  color: var(--fg-soft);
  font-size: 11px;
  min-width: 0;
}

.blitter-memory-map-toolbar input[type="range"] {
  width: 100%;
  margin-top: 5px;
}

.blitter-memory-map-shell {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #050505;
  padding: 8px;
  height: 430px;
  overflow: auto;
}

.blitter-memory-map-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100%;
  min-width: 320px;
  height: auto;
  background: #050505;
  border-radius: 4px;
}

.blitter-memory-map-info {
  margin: 8px 0 0;
  min-height: 64px;
  max-height: 150px;
  overflow: auto;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 11px;
}

@media (max-width: 900px) {
  .blitter-memory-map-toolbar {
    grid-template-columns: 1fr 92px;
  }
}

/* M8: export/status polish ---------------------------------------------------- */
.blitter-export-panel {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #2a2a2a;
}

.blitter-export-status {
  margin: 6px 0 0;
  min-height: 42px;
  max-height: 130px;
  overflow: auto;
  resize: vertical;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 11px;
}

.blitter-export-status.warn {
  border-color: var(--warn);
  color: #ffd08a;
}

.blitter-export-status.error {
  border-color: var(--error);
  color: #ff9d9d;
}


/* M8.1: visible pixel surfaces must be rectangular. Outer panels may stay rounded. */
.blitter-screen-canvas,
.blitter-preview-canvas {
  border-radius: 0 !important;
}


/* M9: word8 semantics for conditional blit operations ------------------------ */
.word8-semantics {
  grid-column: 1 / -1;
  border: 1px dashed #2c2c2c;
  border-radius: 6px;
  background: #101010;
  color: var(--fg-soft);
  font-size: 10px;
  line-height: 1.35;
  padding: 6px 7px;
  min-height: 28px;
}

.blitter-command-editor .blitter-command-field.word8-inactive {
  opacity: .48;
}

.blitter-command-editor .blitter-command-field.word8-inactive input {
  cursor: not-allowed;
}

/* M10: swap bytes and destination mirroring -------------------------------- */
/* Canvas pixel surfaces must remain rectangular. The outer fieldset/panel may stay rounded. */
.blitter-canvas-row > div {
  border-radius: 0;
}

.blitter-screen-canvas,
.blitter-preview-canvas {
  border-radius: 0 !important;
}

.blitter-command-field.blitter-flag-toggle {
  display: grid !important;
  grid-template-rows: 34px minmax(31px, auto);
  gap: 3px;
  min-height: 31px;
  padding: 0 7px 4px;
  border: 1px dashed #2c2c2c;
  border-radius: 6px;
  background: #101010;
  color: var(--fg-soft);
}

.blitter-checkbox-row {
  display: flex;
  align-items: center;
  min-height: 31px;
  gap: 7px;
  cursor: pointer;
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent-soft);
}

.blitter-mirror-hint {
  grid-column: 1 / -1;
  min-height: 30px;
  padding: 6px 7px;
  border: 1px dashed #2c2c2c;
  border-radius: 6px;
  background: #101010;
  color: var(--fg-soft);
  font-size: 10px;
  line-height: 1.35;
}


/* M11: active journal debugger -------------------------------------------------
   Journal rows are clickable. Selection drives the blink overlay on source/destination
   pixels in the sprite preview, screens and memory map. */
.blitter-journal {
  padding: 0;
  white-space: normal;
  font-variant-ligatures: none;
}

.blitter-journal-meta {
  padding: 8px 9px;
  border-bottom: 1px dashed #2c3f31;
  color: #a8c6af;
  white-space: pre-wrap;
  line-height: 1.4;
}

.blitter-journal-entry {
  display: block;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  padding: 3px 9px;
  border: 0;
  border-bottom: 1px solid rgba(77, 110, 84, .18);
  background: transparent;
  color: #d7f3dd;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  white-space: pre;
}

.blitter-journal-entry:hover {
  background: rgba(111, 211, 255, .10);
  color: #effbff;
}

.blitter-journal-entry.active {
  background: rgba(111, 211, 255, .19);
  color: #f4fcff;
  box-shadow: inset 3px 0 0 var(--accent-soft);
}

.blitter-journal-entry:focus-visible {
  outline: 1px solid var(--accent-soft);
  outline-offset: -2px;
}

/* M12: 256-colour layered VGA composition ---------------------------------- */
.blitter-layer-inspection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}

.blitter-layer-inspector {
  min-width: 0;
  overflow: auto;
  padding: 8px;
  border: 1px dashed #2b3c2f;
  border-radius: 8px;
  background: #0d110e;
}

.blitter-layer-inspector-canvas {
  display: block;
  border: 1px solid #35533d;
  border-radius: 0 !important;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.blitter-layer-inspector .vis-caption {
  margin-top: 6px;
  font-size: 10px;
}

@media (max-width: 1360px) {
  .blitter-layer-inspection-grid {
    grid-template-columns: 1fr;
  }
  .blitter-layer-inspector-canvas {
    max-width: 100%;
  }
}


/* M13: collapsible layer scroll controls in Blitter → Visualization ---------- */
.blitter-scroll-panel {
  margin-top: 10px;
  border: 1px solid #2b3a2d;
  border-radius: 10px;
  background: rgba(12, 20, 14, .78);
  overflow: hidden;
}

.blitter-scroll-panel summary {
  cursor: pointer;
  user-select: none;
  padding: 9px 10px;
  color: #d7f3dd;
  font-family: var(--mono);
  font-size: 12px;
  border-bottom: 1px solid #253529;
  background: rgba(32, 58, 38, .35);
}

.blitter-scroll-panel:not([open]) summary {
  border-bottom: 0;
}

.blitter-scroll-panel-note {
  margin: 9px 10px 0;
}

.blitter-scroll-panel .scroll-fieldset {
  margin: 8px 10px 10px;
}

.scroll-controls-relocated {
  margin-top: 10px;
  color: var(--fg-soft);
}

/* M14: palette display / import / export ------------------------------------ */
.blitter-palette-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin: 9px 0 7px;
}

.blitter-palette-toolbar label {
  min-width: min(100%, 250px);
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-palette-toolbar input[type="file"] {
  width: 100%;
  margin-top: 3px;
}

.blitter-palette-meta {
  display: grid;
  gap: 3px;
  margin: 7px 0;
  color: var(--fg-soft);
  font-family: var(--mono);
  font-size: 11px;
}

#bltPaletteHover {
  color: var(--accent);
}

.blitter-palette-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  width: min(100%, 420px);
  border: 1px solid var(--border);
  background: #0c0c0c;
}

.blitter-palette-swatch {
  appearance: none;
  display: block;
  min-width: 0;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 1px solid rgba(255,255,255,.38);
  outline-offset: -1px;
  background: var(--swatch);
  cursor: crosshair;
}

.blitter-palette-swatch:hover,
.blitter-palette-swatch:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.blitter-palette-swatch.selected {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.blitter-palette-status {
  margin: 8px 0 0;
  min-height: 30px;
  max-height: 100px;
  overflow: auto;
  resize: vertical;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 7px;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 11px;
}

.blitter-palette-status.warn { border-color: var(--warn); color: #ffd08a; }
.blitter-palette-status.error { border-color: var(--error); color: #ff9d9d; }

@media (max-width: 760px) {
  .blitter-palette-grid { width: 100%; }
  .blitter-palette-toolbar { align-items: stretch; }
}

/* M15: sprite-page allocator and compact technical controls ----------------- */
.blitter-btn.danger {
  border-color: #7d3d3d;
  color: #ffb2b2;
  background: #251515;
}

.blitter-btn.danger:hover {
  border-color: #e06a6a;
  background: #351919;
}

.blitter-sprite-scale-panel {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(220px, 320px);
  gap: 10px;
  align-items: end;
  margin: 0 0 10px;
  min-width: 0;
}

.blitter-sprite-scale-panel input[type="range"] {
  width: 170px;
  vertical-align: middle;
}

.blitter-sprite-preview-shell {
  min-width: 0;
  max-width: 100%;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #111 0, #111 8px, #151515 8px, #151515 16px);
}

.blitter-sprite-preview-shell .blitter-preview-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  background: transparent;
  border-radius: 0 !important;
}

.blitter-words-grid div {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 7px 6px;
}

.blitter-words-grid strong {
  margin: 0;
  text-align: center;
}

/* Keep slider+row on the first line. All memory map jump buttons form a clean second line. */
.blitter-memory-map-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.blitter-memory-map-position {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 92px;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.blitter-memory-map-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 900px) {
  .blitter-sprite-scale-panel,
  .blitter-memory-map-position {
    grid-template-columns: 1fr;
  }
}

/* M16: command colour picker ------------------------------------------------- */
.blitter-color-command-field {
  min-width: 0;
}

.blitter-color-input-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 3px;
}

.blitter-color-input-row input {
  min-width: 0;
  flex: 1 1 auto;
}

.blitter-color-target-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 76px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #141414;
  color: var(--fg-soft);
  font: 11px var(--mono);
  cursor: pointer;
}

.blitter-color-target-btn:hover:not(:disabled),
.blitter-color-target-btn.active {
  border-color: var(--accent-soft);
  color: var(--fg);
}

.blitter-color-target-btn.active {
  box-shadow: 0 0 0 1px rgba(111,211,255,.16) inset;
}

.blitter-color-target-btn:disabled,
.blitter-color-target-btn.inactive {
  opacity: .42;
  cursor: not-allowed;
}

.blitter-color-target-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid rgba(255,255,255,.55);
  background: #000;
}

.blitter-color-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 2px 10px 10px;
  padding: 8px;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #111;
  min-width: 0;
}

.blitter-color-picker-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--fg-soft);
  font: 11px var(--mono);
}

.blitter-color-picker-toolbar strong {
  color: var(--accent);
  font-weight: 500;
}

.blitter-color-picker-toolbar .blitter-btn.armed {
  border-color: #ffe080;
  color: #fff2bb;
  background: #3a3114;
}

.blitter-color-picker-info,
.blitter-color-picker-status {
  min-height: 16px;
  color: var(--fg-soft);
  font: 11px/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.blitter-color-picker-status.warn { color: #ffd08a; }
.blitter-color-picker-status.error { color: #ff9d9d; }

.blitter-preview-canvas.blitter-color-pick-armed {
  cursor: crosshair;
  outline: 3px solid #ffe080;
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .blitter-color-input-row { flex-wrap: wrap; }
  .blitter-color-target-btn { min-width: 64px; }
}

/* M16.1: command colour picker is a context menu opened with right-click. */
.blitter-color-command-field {
  cursor: context-menu;
}

.blitter-color-command-field.blitter-color-context-active {
  outline: 1px solid var(--accent-soft);
  outline-offset: 3px;
}

.blitter-color-command-field.blitter-color-context-inactive {
  opacity: .55;
}

.blitter-color-context-menu {
  position: fixed;
  z-index: 1000;
  width: min(390px, calc(100vw - 20px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .65);
  color: var(--fg-soft);
  font: 11px/1.35 var(--mono);
}

.blitter-color-context-menu.hidden {
  display: none !important;
}

.blitter-color-context-title {
  color: var(--fg-soft);
}

.blitter-color-context-title strong {
  color: var(--accent);
  font-weight: 500;
}

.blitter-color-context-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.blitter-color-context-close {
  margin-left: auto;
}

.blitter-color-context-menu .blitter-btn.armed {
  border-color: #ffe080;
  color: #fff2bb;
  background: #3a3114;
}

@media (max-width: 760px) {
  .blitter-color-context-close {
    margin-left: 0;
  }
}

/* M17: project persistence + deferred sprite command action ---------------- */
.blitter-project-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-top: 8px;
}

.blitter-project-file-label {
  display: grid;
  gap: 3px;
  min-width: 190px;
  color: var(--fg-soft);
  font: 11px var(--mono);
}

.blitter-project-file-label input[type="file"] {
  max-width: 100%;
}

.blitter-project-status {
  margin: 8px 0 0;
  min-height: 48px;
  max-height: 160px;
  overflow: auto;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font: 11px/1.35 var(--mono);
}

.blitter-project-status.warn { border-color: var(--warn); color: #ffd08a; }
.blitter-project-status.error { border-color: var(--error); color: #ff9d9d; }

.blitter-sprite-list li {
  cursor: context-menu;
}

.blitter-sprite-list small .sprite-dimensions {
  color: var(--accent);
}

.blitter-sprite-context-menu {
  position: fixed;
  z-index: 1001;
  width: min(410px, calc(100vw - 20px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .65);
  color: var(--fg-soft);
  font: 11px/1.35 var(--mono);
}

.blitter-sprite-context-menu.hidden {
  display: none !important;
}

.blitter-sprite-context-title {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.blitter-sprite-context-info {
  color: var(--fg-soft);
  overflow-wrap: anywhere;
}

.blitter-sprite-context-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.blitter-sprite-context-close {
  margin-left: auto;
}

.blitter-sprite-delete-modal {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .70);
}

.blitter-sprite-delete-modal.hidden {
  display: none !important;
}

.blitter-sprite-delete-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #b65b5b;
  border-radius: 10px;
  background: #151515;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .72);
  color: var(--fg-soft);
  font: 12px/1.42 var(--mono);
}

.blitter-sprite-delete-title {
  color: #ffb0b0;
  font-weight: 700;
}

.blitter-sprite-delete-intro {
  color: var(--fg-soft);
}

.blitter-sprite-delete-detail,
.blitter-sprite-delete-warning {
  margin: 0;
  min-height: 42px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px dashed #373737;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 9px;
  font: 11px/1.42 var(--mono);
}

.blitter-sprite-delete-warning.warn {
  border-color: var(--warn);
  color: #ffd08a;
}

.blitter-sprite-delete-warning.clear {
  border-color: #306b45;
  color: #a6dcb4;
}

.blitter-sprite-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.blitter-sprite-delete-cancel {
  margin-left: auto;
}

@media (max-width: 760px) {
  .blitter-project-toolbar { align-items: stretch; }
  .blitter-project-file-label { min-width: 100%; }
  .blitter-sprite-context-close { margin-left: 0; }
  .blitter-sprite-delete-cancel { margin-left: 0; }
}

/* M18D/M19.1: journal-first command packet workflow ------------------------
   Operation colours are semantic: every fill/copy/transparent/save/silhouette
   command keeps its colour when reordered.  M19.1 adds native disclosure per
   command-run: multi-command packets start collapsed, one-command runs open. */
.blitter-command-list-help {
  margin: 8px 0 0;
  line-height: 1.4;
}

.blitter-command-list .blitter-command-item {
  cursor: grab;
  border-left: 4px solid hsl(var(--command-hue) 72% 58% / .90);
  background: linear-gradient(90deg, hsl(var(--command-hue) 66% 34% / .40), #121212 64%);
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}

.blitter-command-list .blitter-command-item:active { cursor: grabbing; }

.blitter-command-list .blitter-command-item.selected {
  border-color: hsl(var(--command-hue) 82% 72% / 1);
  border-left-color: hsl(var(--command-hue) 82% 72% / 1);
  background: linear-gradient(90deg, hsl(var(--command-hue) 70% 42% / .58), rgba(32, 50, 60, .88) 72%);
}

.blitter-command-list .blitter-command-item.dragging {
  opacity: .48;
  transform: scale(.985);
}

.blitter-command-list .blitter-command-item.drag-over {
  border-bottom-color: hsl(var(--command-hue) 88% 78% / 1);
  box-shadow: 0 3px 0 hsl(var(--command-hue) 88% 78% / .72);
}

/* Each command-run is a native <details>: clicking its summary expands or
   collapses only that command's word transactions, without changing the
   active journal selection or the rendered before/after screenshots. */
details.blitter-journal-command-group {
  margin: 0;
  border-top: 1px solid hsl(var(--command-hue) 60% 58% / .45);
  border-bottom: 1px dashed hsl(var(--command-hue) 48% 45% / .38);
  background: linear-gradient(90deg, hsl(var(--command-hue) 58% 32% / .52), rgba(19, 27, 22, .94) 72%);
  color: #edf8ef;
  font: 11px/1.35 var(--mono);
  scroll-margin-block: 12px;
}

details.blitter-journal-command-group > summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: baseline;
  padding: 6px 9px 5px 26px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.blitter-journal-command-group > summary::-webkit-details-marker { display: none; }

details.blitter-journal-command-group > summary::before {
  content: "▸";
  position: absolute;
  left: 9px;
  top: 7px;
  color: hsl(var(--command-hue) 84% 78% / 1);
  transition: transform .12s ease;
}

details.blitter-journal-command-group[open] > summary::before { transform: rotate(90deg); }

details.blitter-journal-command-group > summary:focus-visible {
  outline: 1px solid hsl(var(--command-hue) 86% 78% / .95);
  outline-offset: -2px;
}

details.blitter-journal-command-group strong {
  grid-column: 2;
  color: hsl(var(--command-hue) 84% 78% / 1);
  font-weight: 700;
}

.blitter-journal-command-title {
  grid-column: 2;
  color: #dcefe0;
  overflow-wrap: anywhere;
}

.blitter-journal-command-metrics {
  grid-column: 2;
  color: #b7d7bd;
}

.blitter-journal-command-entries {
  padding: 0 0 4px;
}

details.blitter-journal-command-group.selected {
  box-shadow: inset 4px 0 0 hsl(var(--command-hue) 90% 78% / 1), inset 0 0 0 1px hsl(var(--command-hue) 76% 70% / .42);
  background: linear-gradient(90deg, hsl(var(--command-hue) 68% 39% / .68), rgba(29, 48, 39, .96) 72%);
}

.blitter-command-context-menu {
  position: fixed;
  z-index: 1002;
  width: min(430px, calc(100vw - 20px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .65);
  color: var(--fg-soft);
  font: 11px/1.35 var(--mono);
}

.blitter-command-context-menu.hidden { display: none !important; }

/* M31: command deletion uses an explicit modal, matching the existing sprite
   deletion safety pattern.  The dialog is deliberately separate from the
   context-menu so a click outside the menu never deletes a packet row. */
.blitter-command-delete-modal {
  position: fixed;
  z-index: 1101;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .70);
}

.blitter-command-delete-modal.hidden { display: none !important; }

.blitter-command-delete-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #b65b5b;
  border-radius: 10px;
  background: #151515;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .72);
  color: var(--fg-soft);
  font: 12px/1.42 var(--mono);
}

.blitter-command-delete-title {
  color: #ffb0b0;
  font-weight: 700;
}

.blitter-command-delete-intro { color: var(--fg-soft); }

.blitter-command-delete-detail,
.blitter-command-delete-warning {
  margin: 0;
  min-height: 42px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px dashed #373737;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 9px;
  font: 11px/1.42 var(--mono);
}

.blitter-command-delete-warning.warn {
  border-color: var(--warn);
  color: #ffd08a;
}

.blitter-command-delete-warning.clear {
  border-color: #306b45;
  color: #a6dcb4;
}

.blitter-command-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.blitter-command-delete-cancel { margin-left: auto; }

.blitter-command-context-title {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.blitter-command-context-info {
  color: var(--fg-soft);
  overflow-wrap: anywhere;
}

.blitter-command-rename-label {
  display: grid;
  gap: 4px;
  color: var(--fg-soft);
}

.blitter-command-rename-label input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}

.blitter-command-context-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.blitter-command-context-close { margin-left: auto; }

@media (max-width: 760px) {
  .blitter-command-context-close { margin-left: 0; }
  .blitter-command-delete-cancel { margin-left: 0; }
}

.blitter-command-list .blitter-command-item:hover {
  border-color: hsl(var(--command-hue) 82% 72% / 1);
  border-left-color: hsl(var(--command-hue) 82% 72% / 1);
}

/* M19.2/M19.2.1/M19.2.2: command list stays navigable for long
   packets. The list itself is the scroll container so rows retain native
   HTML5 drag/drop behaviour. M19.2.2 starts compactly: one actual command
   row for one command and automatic growth through the third row. After a
   user drags the native vertical resize grip, JavaScript preserves that manual
   working height instead of applying automatic row sizing again. */
.blitter-command-list {
  /* Safe no-JavaScript fallback: about one two-line command card. JavaScript
     replaces these values with measured command-row geometry after render. */
  min-height: 52px;
  height: 52px;
  max-height: none;
  resize: vertical;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 8px;
  padding-inline-end: 4px;
  box-sizing: border-box;

  /* M31: an outer visible frame belongs to the list itself, not to individual
     cards.  Inset shadow avoids changing the measured 1/2/3-row geometry. */
  border-radius: 8px;
  background: rgba(12, 18, 22, .72);
  box-shadow: inset 0 0 0 1px rgba(111, 211, 255, .38);
}

.blitter-command-list:focus-visible {
  outline: 1px solid var(--accent-soft);
  outline-offset: 3px;
}

/* M20: client-side scenario fixture UI removed; project-based ready scenarios will be introduced later. */

/* M19: actionable blocking validation diagnostics. */
.blitter-blocking-diagnostic {
  display: none;
  margin: 9px 0;
  border: 1px solid rgba(239, 94, 94, .70);
  border-radius: 6px;
  color: #ffd0d0;
  background: rgba(101, 23, 23, .46);
}
.blitter-blocking-diagnostic.visible { display: block; }
.blitter-blocking-diagnostic-title {
  padding: 7px 9px;
  font-weight: 800;
  color: #ffe0e0;
  border-bottom: 1px solid rgba(239, 94, 94, .35);
}
.blitter-blocking-diagnostic ul { margin: 0; padding: 6px 9px 8px 29px; }
.blitter-blocking-diagnostic li { margin: 6px 0; }
.blitter-blocking-diagnostic li > span { display: block; margin-top: 2px; }
.blitter-blocking-diagnostic code { color: #fff1b9; }

/* M21: Project JSON v4 metadata ------------------------------------------ */
.blitter-project-meta {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.blitter-project-meta > label {
  display: grid;
  gap: 4px;
  font: 11px var(--mono);
}

.blitter-project-meta input,
.blitter-project-meta textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
}

.blitter-project-meta textarea {
  min-height: 56px;
  max-height: 240px;
}

.required-mark { color: var(--error); }

/* M21.1: Project JSON form controls must use the same dark technical theme as
   the rest of the modeller.  M21 introduced a textarea and exposed the native
   file selector; neither inherited the pre-existing text-input theme in every
   browser.  Keep this scope narrow so loader/editor controls retain their own
   established sizing rules. */
:root {
  color-scheme: dark;
  --project-control-bg: #101010;
  --project-control-bg-hover: #141a1d;
  --project-control-border: #2b2b2b;
  --project-control-placeholder: #7f8a91;
}

.blitter-project-meta input[type="text"],
.blitter-project-meta textarea,
.blitter-project-file-label input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--project-control-border);
  border-radius: 6px;
  background: var(--project-control-bg);
  color: var(--fg);
  color-scheme: dark;
  font: 13px/1.35 var(--mono);
  outline: none;
}

.blitter-project-meta input[type="text"],
.blitter-project-meta textarea {
  padding: 6px 7px;
}

.blitter-project-meta textarea {
  display: block;
  min-height: 56px;
  max-height: 240px;
  resize: vertical;
}

.blitter-project-meta input[type="text"]::placeholder,
.blitter-project-meta textarea::placeholder {
  color: var(--project-control-placeholder);
  opacity: 1;
}

.blitter-project-meta input[type="text"]:hover,
.blitter-project-meta textarea:hover,
.blitter-project-file-label input[type="file"]:hover {
  border-color: #3b4650;
  background: var(--project-control-bg-hover);
}

.blitter-project-meta input[type="text"]:focus,
.blitter-project-meta textarea:focus,
.blitter-project-file-label input[type="file"]:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, .34);
}

.blitter-project-file-label input[type="file"] {
  min-height: 33px;
  padding: 3px 4px;
  cursor: pointer;
  color: var(--fg-soft);
}

.blitter-project-file-label input[type="file"]::file-selector-button {
  margin-right: 7px;
  padding: 4px 8px;
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
  background: linear-gradient(180deg, #1e3440, #14232b);
  color: #e8f8ff;
  font: 11px var(--mono);
  cursor: pointer;
}

.blitter-project-file-label input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, #254451, #172a34);
}

/* Legacy WebKit name keeps the same result in older browser engines. */
.blitter-project-file-label input[type="file"]::-webkit-file-upload-button {
  margin-right: 7px;
  padding: 4px 8px;
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
  background: linear-gradient(180deg, #1e3440, #14232b);
  color: #e8f8ff;
  font: 11px var(--mono);
  cursor: pointer;
}

/* Chromium otherwise paints a saved/autofilled project title with a light
   background.  Explicit inset paint preserves the dark theme. */
.blitter-project-meta input[type="text"]:-webkit-autofill,
.blitter-project-meta input[type="text"]:-webkit-autofill:hover,
.blitter-project-meta input[type="text"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  box-shadow: 0 0 0 1000px var(--project-control-bg) inset,
              0 0 0 1px rgba(111, 211, 255, .20);
  caret-color: var(--fg);
}

/* M22: server-side read-only ready-scenario catalog ------------------------ */
.blitter-ready-scenario-preview {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid #2c2c2c;
  border-radius: 8px;
  background: #101010;
}

.blitter-ready-scenario-caption {
  color: var(--fg-soft);
  font: 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.blitter-ready-scenario-title {
  min-height: 18px;
  color: var(--accent);
  font: 12px/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.blitter-ready-scenario-description {
  min-height: 42px;
  color: var(--fg-soft);
  font: 11px/1.4 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.blitter-ready-scenario-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.blitter-ready-scenario-status {
  margin: 8px 0 0;
  min-height: 48px;
  max-height: 160px;
  overflow: auto;
  border: 1px dashed #2c2c2c;
  border-radius: 8px;
  background: #101010;
  color: var(--fg-soft);
  padding: 8px;
  white-space: pre-wrap;
  font: 11px/1.35 var(--mono);
}

.blitter-ready-scenario-status.warn { border-color: var(--warn); color: #ffd08a; }
.blitter-ready-scenario-status.error { border-color: var(--error); color: #ff9d9d; }

#bltReadyScenarioSelect:disabled,
#bltReadyScenarioRefresh:disabled,
#bltReadyScenarioLoad:disabled {
  cursor: not-allowed;
  opacity: .58;
}


/* M23: one-cell Palette256 editor ------------------------------------------- */
.blitter-palette-context-menu {
  position: fixed;
  z-index: 1003;
  width: min(390px, calc(100vw - 20px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .65);
  color: var(--fg-soft);
  font: 11px/1.35 var(--mono);
}

.blitter-palette-context-menu.hidden { display: none !important; }

.blitter-palette-context-title {
  color: var(--accent);
  overflow-wrap: anywhere;
}

.blitter-palette-context-info {
  color: var(--fg-soft);
  overflow-wrap: anywhere;
}

.blitter-palette-context-actions,
.blitter-palette-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.blitter-palette-context-close,
.blitter-palette-editor-cancel { margin-left: auto; }

.blitter-palette-editor-modal {
  position: fixed;
  z-index: 1010;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
  background: rgba(0, 0, 0, .72);
}

.blitter-palette-editor-modal.hidden { display: none !important; }

.blitter-palette-editor-dialog {
  width: min(680px, 100%);
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
  background: #151515;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .76);
  color: var(--fg-soft);
  font: 12px/1.4 var(--mono);
}

.blitter-palette-editor-title {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
}

.blitter-palette-editor-index,
.blitter-palette-editor-note {
  color: var(--fg-soft);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.blitter-palette-editor-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.blitter-palette-editor-preview-block {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid #2c2c2c;
  border-radius: 7px;
  background: #101010;
}

.blitter-palette-editor-preview-block > span:first-child {
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-palette-editor-preview {
  display: block;
  width: 42px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 3px;
  background: #000;
}

.blitter-palette-editor-preview-block code {
  min-width: 0;
  color: var(--fg);
  font: 11px/1.25 var(--mono);
  overflow-wrap: anywhere;
}

.blitter-palette-editor-form {
  display: grid;
  grid-template-columns: minmax(128px, 1.3fr) repeat(3, minmax(62px, .55fr)) minmax(150px, 1.15fr);
  gap: 8px;
  align-items: end;
}

.blitter-palette-editor-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--fg-soft);
  font-size: 11px;
}

.blitter-palette-editor-form input[type="text"],
.blitter-palette-editor-form input[type="color"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
  background: #101010;
  color: var(--fg);
  font: 13px var(--mono);
}

.blitter-palette-editor-form input[type="color"] {
  padding: 3px;
  cursor: pointer;
}

.blitter-palette-editor-form input[type="text"].input-error {
  border-color: var(--error);
  box-shadow: 0 0 0 1px rgba(255, 110, 110, .24);
}

.blitter-palette-editor-status {
  min-height: 30px;
  padding: 7px;
  border: 1px dashed #2c2c2c;
  border-radius: 7px;
  background: #101010;
  color: var(--fg-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 11px/1.35 var(--mono);
}

.blitter-palette-editor-status.warn { border-color: var(--warn); color: #ffd08a; }
.blitter-palette-editor-status.error { border-color: var(--error); color: #ff9d9d; }

.blitter-palette-editor-actions .blitter-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

body.blitter-palette-editor-open { overflow: hidden; }

@media (max-width: 760px) {
  .blitter-palette-context-close,
  .blitter-palette-editor-cancel { margin-left: 0; }
  .blitter-palette-editor-modal { padding: 8px; }
  .blitter-palette-editor-previews { grid-template-columns: 1fr; }
  .blitter-palette-editor-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blitter-palette-editor-native-label,
  .blitter-palette-editor-octal-label { grid-column: 1 / -1; }
}

/* M28: Adobe Photoshop Color Table (.act) ---------------------------------- */
.blitter-palette-toolbar .blitter-palette-file-label {
  min-width: min(100%, 280px);
}

.blitter-palette-toolbar .blitter-palette-act-export-format {
  display: grid;
  gap: 3px;
  min-width: min(100%, 224px);
}

.blitter-palette-toolbar .blitter-palette-act-export-format select {
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
  background: #101010;
  color: var(--fg);
  font: 12px var(--mono);
}

/* M29 — the Video Modes tab is again the primary control surface for
   register 177230, layer pages and 177250…177262 scrolling. */
.video-pages-fieldset {
  margin-top: 10px;
}

.video-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.video-page-grid label {
  margin: 0;
  min-width: 0;
  font-size: 11px;
  color: var(--fg-soft);
}

.video-page-grid label > span:first-child {
  display: block;
  min-height: 28px;
}

.video-page-grid input[type="text"] {
  margin-top: 4px;
  text-align: center;
}

.video-page-base {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--fg-soft);
}

.video-page-base output {
  color: var(--accent);
  font-family: var(--mono);
}

.video-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.video-page-actions .small-note {
  margin: 0;
  flex: 1 1 220px;
}

#videoScrollFieldset {
  margin-top: 10px;
}

#videoScrollFieldset .scroll-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.blitter-scroll-location {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px dashed #343434;
  border-radius: 6px;
}

@media (max-width: 980px) {
  .video-page-grid {
    grid-template-columns: 1fr;
  }

  .video-page-grid label > span:first-child {
    min-height: 0;
  }
}


/* M30: product-facing UI cleanup and deterministic panel lifecycle -------- */
#bltProjectPanel .blitter-project-fieldset {
  display: grid;
  gap: 10px;
  align-content: start;
}

#bltProjectPanel .blitter-project-meta {
  margin-top: 0;
}

#bltProjectPanel .blitter-project-toolbar {
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) max-content max-content;
  align-items: end;
  gap: 8px;
  margin: 0;
}

#bltProjectPanel .blitter-project-toolbar > .blitter-btn {
  min-height: 33px;
  white-space: nowrap;
}

#bltProjectPanel .blitter-project-file-label {
  min-width: 0;
}

#bltProjectPanel .blitter-project-status {
  margin: 0;
}

.blitter-memory-map-panel[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  #bltProjectPanel .blitter-project-toolbar {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  #bltProjectPanel .blitter-project-file-label {
    grid-column: 1 / -1;
  }
}