/* mobile-workspaces.css — phone/tablet rules for this area of the Ninjora Editor. Loaded after mobile.css; see that file for the conventions (body.nj-mobile, breakpoints, tokens). */

/* ─────────────────────────────────────────────────────────────────────────────
   Covers four canvas/workspace editors:
     1. Missions: the Story tree (#mission-tree) and the full-screen mission
        workspace (#mission-workspace, .mw, z-index 3100).
     2. Jutsu: the full-screen workspace (.jw, z-index 3000).
     3. Particles: #particles-editor (.particle-editor-fullscreen).
     4. Props: #section-props (tabs, 3D preview + form, Building pane) and the
        prop browser dock the map editor opens.
   Desktop (≥960px) is untouched: every rule is under body.nj-mobile or a
   (pointer: coarse) query. Elements that scroll by design (the tree stage, the
   flow strips, the 3D canvases) are the only places wider than the viewport.
   ───────────────────────────────────────────────────────────────────────────── */

/* Markup that the scripts add for phones only; hidden everywhere else. */
.mt-hint-touch { display: none; }
.mw-mobile-bar { display: none; }
.jw-panebar { display: none; }
.jw-top-overflow { display: none !important; }
.particle-sheet-handle { display: none; }
.props-pane-bar { display: none; }
.layer-vis-wrap { display: contents; }
.bld-hint-touch { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   1. MISSIONS — Story tree
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile .mt-head { padding: 14px 12px 10px; }
  body.nj-mobile .mt-tools { flex-wrap: wrap; }
  body.nj-mobile .mt-tools input { flex: 1 1 180px; min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .mt-tools > button { min-height: var(--nj-tap); }
  /* Stats, "connections to review" and the zoom controls share one wrapping row. */
  body.nj-mobile .mt-bar { flex-wrap: wrap; gap: 8px 12px; padding: 0 12px 10px; }
  body.nj-mobile .mt-bar > div { gap: 6px; }
  body.nj-mobile .mt-bar button { min-width: var(--nj-tap); min-height: var(--nj-tap); padding: 4px 10px !important; font-size: 13px; justify-content: center; }
  body.nj-mobile .mt-bar > button { min-height: var(--nj-tap); }
  /* The stage pans by one finger and zooms by pinch (mission-tree.js); only the
     viewport refuses browser gestures, not the page around it. */
  body.nj-mobile .mt-viewport { touch-action: none; overscroll-behavior: contain; }
  body.nj-mobile #mission-tree .mt-card { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  body.nj-mobile .mt-issues { left: 12px; right: 12px; top: auto; bottom: 56px; max-width: none; max-height: 50%; }
  body.nj-mobile .mt-issues button { min-height: var(--nj-tap); }
  body.nj-mobile .mt-menu { width: min(320px, calc(100vw - 16px)); }
  body.nj-mobile .mt-menu button { min-height: var(--nj-tap); }
  body.nj-mobile .mt-empty { left: 12px; right: 12px; padding: 20px 10px; }
  body.nj-mobile .mt-footer { padding: 8px 12px calc(8px + var(--nj-safe-bottom)); }
  body.nj-mobile .mt-footer .mt-hint-mouse { display: none; }
  body.nj-mobile .mt-footer .mt-hint-touch { display: inline; }
}

/* Narrow phones: a hard break after Save, so undo and redo stay together on the second row. */
@media (max-width: 599px) {
  body.nj-mobile #mission-workspace .mw-top::after { content: ''; order: 4; flex: 0 0 100%; height: 0; }
}
/* Landscape phones: the stage needs the height, so the heading and the legend give way. */
@media (max-width: 959px) and (max-height: 500px) {
  body.nj-mobile #mission-workspace .mw-caption { display: none; }
  body.nj-mobile .mt-head { padding: 4px 8px; flex-wrap: nowrap; }
  body.nj-mobile .mt-head > div:first-child { display: none; }
  body.nj-mobile .mt-bar { padding: 0 8px 4px; flex-wrap: nowrap; }
  body.nj-mobile .mt-footer { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1b. MISSIONS — the workspace overlay (#mission-workspace)
   The overlay covers the shell by design; "← Missions" in its own bar is the
   way back. On tablets the floating panels keep their desktop places with a
   wrapping top bar; on phones the panels stack in one column.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #mission-workspace .mw-top { flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 0; }
  body.nj-mobile #mission-workspace .mw-top .group { flex-wrap: wrap; gap: 6px; }
  body.nj-mobile #mission-workspace .mw-top button { min-height: var(--nj-tap); padding: 6px 10px; }
  body.nj-mobile #mission-workspace .mw-status { display: inline; }
  body.nj-mobile #mission-workspace .mw-popover { max-height: 70vh; max-height: 70dvh; max-width: calc(100vw - 16px); }
  body.nj-mobile #mission-workspace .mw-popover > button { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-modal { position: fixed; }
  body.nj-mobile #mission-workspace .mw-new { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  body.nj-mobile #mission-workspace .mw-new footer { flex-wrap: wrap; }
  body.nj-mobile #mission-workspace .mw-new footer button { min-height: var(--nj-tap); flex: 1 1 auto; }
  body.nj-mobile #mission-workspace .mw-picker-option { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-picker-control { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-picker-toggle { min-width: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-issue button, body.nj-mobile #mission-workspace .mw-row button { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace summary { padding: 15px 0; }
  body.nj-mobile #mission-workspace .mw-boundary { display: none; }
  body.nj-mobile #mission-workspace input:not([type=checkbox]):not([type=color]):not([type=range]), body.nj-mobile #mission-workspace select, body.nj-mobile #mission-workspace textarea { font-size: 16px; }
  body.nj-mobile #mission-workspace input:not([type=checkbox]):not([type=color]):not([type=range]), body.nj-mobile #mission-workspace select { min-height: var(--nj-tap); }
}
@media (max-width: 959px) {
  /* The overlay becomes a column: bar, pane tabs, then one pane (the steps or the
     conversation chart / the selected card's settings). [hidden] still hides it. */
  body.nj-mobile #mission-workspace:not([hidden]) {
    display: flex;
    flex-direction: column;
    padding: var(--nj-safe-top) var(--nj-safe-right) var(--nj-safe-bottom) var(--nj-safe-left);
  }
  body.nj-mobile #mission-workspace .mw-top { position: static; inset: auto; flex: none; margin: 6px 6px 0; }
  /* Row one: back, the mission, its state, Save. Row two: everything else. */
  body.nj-mobile #mission-workspace .mw-top { justify-content: flex-start; gap: 4px; padding: 4px; }
  body.nj-mobile #mission-workspace .mw-top .group { display: contents; }
  body.nj-mobile #mission-workspace .mw-top button { order: 5; min-width: var(--nj-tap); padding: 4px 6px; }
  body.nj-mobile #mission-workspace .mw-top .group:first-child > button:first-child { order: 1; }
  body.nj-mobile #mission-workspace .mw-top button.mw-title { order: 2; flex: 1 1 96px; min-width: 0; max-width: none; text-align: left; }
  body.nj-mobile #mission-workspace .mw-status { order: 3; align-self: center; font-size: 11px; }
  body.nj-mobile #mission-workspace .mw-top button.primary { order: 4; min-width: 60px; font-weight: 600; justify-content: center; text-align: center; }

  body.nj-mobile #mission-workspace .mw-mobile-bar {
    display: flex; gap: 6px; flex: none; margin: 6px 6px 0; padding: 4px; border-radius: 10px;
    background: #0d1017ed; border: 1px solid var(--line);
  }
  body.nj-mobile #mission-workspace .mw-mobile-bar button { flex: 1; min-height: var(--nj-tap); justify-content: center; border-color: transparent; background: transparent; }
  body.nj-mobile #mission-workspace .mw-mobile-bar button[aria-pressed="true"] { background: #8d7a4e18; border-color: #8d7a4e88; color: #f1ead8; }

  body.nj-mobile #mission-workspace .mw-caption { position: static; inset: auto; max-width: none; margin: 6px 6px 0; flex: none; }
  body.nj-mobile #mission-workspace .mw-caption b, body.nj-mobile #mission-workspace .mw-caption > span { white-space: normal; }
  body.nj-mobile #mission-workspace .mw-caption > button { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-empty { position: static; inset: auto; margin: 40px 16px; }
  body.nj-mobile #mission-workspace .mw-empty button { min-height: var(--nj-tap); margin: 4px; }

  /* The flow strip fills its pane and scrolls by touch (charts no longer shrink
     below 62%: mission-workspace.js). */
  body.nj-mobile #mission-workspace .mw-flow {
    position: relative; inset: auto; flex: 1 1 auto; height: auto; min-height: 150px; width: auto; margin: 6px;
    overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: 10px; background: var(--nj-surface-sunken, #0d1017);
  }
  body.nj-mobile #mission-workspace.mw-writing .mw-flow { display: none; }
  body.nj-mobile #mission-workspace .mw-flow-inner { padding: 72px 20px 66px; }
  body.nj-mobile #mission-workspace .mw-chip { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace button.mw-node-add { margin: -10px; }
  body.nj-mobile #mission-workspace .mw-wire-handle { r: 14px; fill-opacity: .4; }
  body.nj-mobile #mission-workspace .mw-wire-hit { stroke-width: 44; }
  body.nj-mobile #mission-workspace .mw-add { min-width: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace button.mw-node-add { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-wire-handle, body.nj-mobile #mission-workspace .mw-wire-hit { touch-action: none; }

  body.nj-mobile #mission-workspace .mw-inspector,
  body.nj-mobile #mission-workspace.mw-writing .mw-inspector {
    position: static; inset: auto; left: auto !important; right: auto !important; top: auto; bottom: auto;
    flex: 1 1 auto; min-height: 0; width: auto; max-height: none; margin: 6px; padding: 12px;
    overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body.nj-mobile #mission-workspace .mw-head button { min-width: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-field input, body.nj-mobile #mission-workspace .mw-field select { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-field textarea { font-size: 16px; }

  /* Writing a conversation: the chart or the line's settings, one at a time (tabs above). */
  body.nj-mobile #mission-workspace .mw-dialogue {
    position: static; inset: auto; flex: 1 1 auto; min-height: 0; margin: 6px; padding: 10px;
  }
  body.nj-mobile #mission-workspace .mw-dialogue-canvas { overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior: contain; }
  body.nj-mobile #mission-workspace .mw-dialogue > .breadcrumbs .mw-field { margin-bottom: 8px; }
  body.nj-mobile #mission-workspace[data-mw-pane="inspector"] .mw-dialogue,
  body.nj-mobile #mission-workspace[data-mw-pane="inspector"] .mw-flow,
  body.nj-mobile #mission-workspace[data-mw-pane="inspector"] .mw-caption,
  body.nj-mobile #mission-workspace:not([data-mw-pane="inspector"]) .mw-inspector { display: none; }
  body.nj-mobile #mission-workspace .mw-connection-hint { left: 12px; right: 12px; top: auto; bottom: 12px; }

  body.nj-mobile #mission-workspace .mw-preview { position: static; inset: auto; width: auto; max-height: 45%; margin: 6px; flex: none; }
  body.nj-mobile #mission-workspace .mw-preview > button { min-height: var(--nj-tap); }
  body.nj-mobile #mission-workspace .mw-footer { display: none; }
  body.nj-mobile #mission-workspace .mw-saving { position: fixed; }
  body.nj-mobile #mission-workspace .mw-new.mw-behavior-form { width: calc(100vw - 16px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. JUTSU — the workspace overlay (.jw)
   The overlay covers the shell by design; "Editor" (back) and Save stay in
   its one-row top bar, everything else folds into a "⋯" menu
   (jutsu-workspace.js, collapseTop). On phones the strip and the inspector are
   panes switched by a bottom bar.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile .jw-top {
    left: 6px; right: 6px; top: calc(6px + var(--nj-safe-top)); height: auto; min-height: 52px;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 4px;
  }
  body.nj-mobile .jw-top .grp { gap: 4px; flex: none; }
  body.nj-mobile .jw-top .grp:first-child { flex: 1 1 auto; min-width: 0; }
  body.nj-mobile .jw-top .sep { display: none; }
  body.nj-mobile .jw-top .jw-chip { display: none; }
  body.nj-mobile .jw-top .jw-name { flex: 1 1 auto; min-width: 0; min-height: var(--nj-tap); }
  body.nj-mobile .jw-top .jw-name .nm { font-size: 15px; }
  body.nj-mobile .jw-top .jw-crumb { max-width: 120px; }
  body.nj-mobile .jw-top .jw-crumb-hint { display: none; }
  body.nj-mobile .jw-back { min-width: var(--nj-tap); min-height: var(--nj-tap); justify-content: center; padding: 4px 8px !important; }
  body.nj-mobile .jw-top button { min-height: var(--nj-tap); }
  body.nj-mobile .jw button.icon, body.nj-mobile .jw-top .play { width: var(--nj-tap); height: var(--nj-tap); }
  body.nj-mobile .jw button.jw-authoring-trigger { width: var(--nj-tap); height: var(--nj-tap); }
  body.nj-mobile .jw-save { min-width: 64px; justify-content: center; }
  body.nj-mobile .jw-top-more { width: var(--nj-tap); height: var(--nj-tap); padding: 0; justify-content: center; font-size: 22px; line-height: 1; }
  /* The "⋯" menu: the top bar's remaining buttons, one per row. */
  body.nj-mobile .jw-menu.jw-top-menu { min-width: 240px; max-width: calc(100vw - 20px); }
  body.nj-mobile .jw .jw-top-menu button { display: flex; width: 100%; height: auto; min-height: var(--nj-tap); margin: 2px 0; padding: 6px 10px; gap: 10px; align-items: center; justify-content: flex-start; text-align: left; white-space: normal; box-shadow: none; }
  body.nj-mobile .jw .jw-top-menu button.icon::after { content: attr(title); font-size: 13px; }
  body.nj-mobile .jw .jw-top-menu button.jw-authoring-trigger .label { display: inline; }
  body.nj-mobile .jw .jw-top-menu button.jw-speed::before { content: 'Speed'; color: var(--dim); }

  body.nj-mobile .jw-hint { left: 8px; right: 8px; transform: none; white-space: normal; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; }
  body.nj-mobile .jw-hint button { min-height: var(--nj-tap); }
  body.nj-mobile .jw-live { max-width: calc(100vw - 16px); white-space: normal; flex-wrap: wrap; justify-content: center; }
  body.nj-mobile .jw-logbox { max-width: calc(100vw - 28px); top: 110px; }
  body.nj-mobile .jw-strip-tools { top: -50px; gap: 4px; }
  body.nj-mobile .jw-strip-tools button { justify-content: center; }
  body.nj-mobile .jw-flow { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }

  /* Popovers and dialogs never wider than the screen. */
  body.nj-mobile .jw-pop { max-width: calc(100vw - 16px); }
  body.nj-mobile .jw-dialog { width: calc(100vw - 16px); padding: 16px 14px 12px; }
  body.nj-mobile .jw-dialog .two { grid-template-columns: 1fr; }
  body.nj-mobile .jw-dialog .tpls { grid-template-columns: 1fr 1fr; }
  body.nj-mobile .jw-dialog .btns button { min-height: var(--nj-tap); }
  body.nj-mobile .jw-palette { width: calc(100vw - 16px); }
  body.nj-mobile .jw-palette .opts { grid-template-columns: 1fr; }
  body.nj-mobile .jw-palette .opt { min-height: var(--nj-tap); }
  body.nj-mobile .jw-picker, body.nj-mobile .jw-problems, body.nj-mobile .jw-fxlib, body.nj-mobile .jw-options,
  body.nj-mobile .jw-tour-box, body.nj-mobile .jw-authoring-preview, body.nj-mobile .jw-convert, body.nj-mobile .jw-upload { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  body.nj-mobile .jw-quick { width: calc(100vw - 16px); left: 8px !important; }
  body.nj-mobile .jw-dialog.jw-learn { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  body.nj-mobile .jw-item { min-height: var(--nj-tap); }
  body.nj-mobile .jw-menu button { min-height: var(--nj-tap); }
  body.nj-mobile .jw-classic { inset: 70px 6px 6px; }
  body.nj-mobile .jw-classic-bar { left: 6px; right: 6px; height: auto; flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
  body.nj-mobile .jw-classic-bar button { min-height: var(--nj-tap); }
}
@media (max-width: 959px) {
  /* (landscape phones too) Bottom pane bar: Arena · Flow · Inspector (jutsu-workspace.js sets data-jw-pane). */
  body.nj-mobile .jw-panebar {
    display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; gap: 4px;
    padding: 4px 6px calc(4px + var(--nj-safe-bottom)); background: var(--nj-surface-bar, rgba(9, 12, 19, .94)); border-top: 1px solid var(--line);
  }
  body.nj-mobile .jw-panebar button { flex: 1; justify-content: center; min-height: var(--nj-tap); border-color: transparent; background: transparent; color: var(--dim); }
  body.nj-mobile .jw-panebar button.on { background: var(--el-soft); border-color: var(--el); color: #f1ead8; }
  body.nj-mobile .jw-panebar button:disabled { opacity: .45; }
  body.nj-mobile .jw.jw-play .jw-panebar { display: none; }

  body.nj-mobile .jw-strip { left: 6px; right: 6px; bottom: calc(58px + var(--nj-safe-bottom)); max-height: min(50vh, 420px); max-height: min(50dvh, 420px); }
  body.nj-mobile .jw.jw-play .jw-strip { bottom: 6px; }
  body.nj-mobile .jw-inspector {
    left: 6px !important; right: 6px; top: auto !important; bottom: calc(58px + var(--nj-safe-bottom)) !important;
    width: auto; transition: none;
    max-height: calc(100vh - 136px - var(--nj-safe-bottom) - var(--nj-safe-top)) !important;
    max-height: calc(100dvh - 136px - var(--nj-safe-bottom) - var(--nj-safe-top)) !important;
  }
  body.nj-mobile .jw-insp-head { cursor: default; min-height: var(--nj-tap); }
  body.nj-mobile .jw-insp { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.nj-mobile .jw[data-jw-pane="arena"] .jw-strip, body.nj-mobile .jw[data-jw-pane="arena"] .jw-inspector { display: none !important; }
  body.nj-mobile .jw[data-jw-pane="flow"] .jw-inspector { display: none !important; }
  body.nj-mobile .jw[data-jw-pane="inspector"] .jw-strip { display: none !important; }
  body.nj-mobile .jw-insp .grp.acts button, body.nj-mobile .jw-branches button { min-height: var(--nj-tap); }
  body.nj-mobile .jw-f .ctl > input[type=number], body.nj-mobile .jw-val input[type=number] { width: 84px; }
  body.nj-mobile .jw input[type=checkbox] { width: 22px; height: 22px; }
  body.nj-mobile .jw input[type=color] { width: 44px; height: 36px; }
}
/* The strip on the phone/tablet shell: FL_TOUCH (jutsu-workspace.js) gives slim rows 44px and the
   gaps between cards 52px, so every control below has a real 44px box. Only a selected card shows its
   "⋯" and ✎, as they would otherwise cover the title of every card; holding any card opens the menu. */
@media (max-width: 959px) {
  body.nj-mobile .jw-flow { -webkit-touch-callout: none; }
  body.nj-mobile .jw input:not([type=checkbox]):not([type=color]):not([type=range]), body.nj-mobile .jw select { min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .jw textarea { font-size: 16px; }
  body.nj-mobile .jw input[type=checkbox] { width: 22px; height: 22px; }
  body.nj-mobile .jw-options label.chk, body.nj-mobile .jw-chk, body.nj-mobile .jw-bool { min-height: var(--nj-tap); }
  body.nj-mobile .jw summary { min-height: var(--nj-tap); display: flex; align-items: center; }
  body.nj-mobile .jw .fl-card:not(.sel) .fl-more { display: none; }
  body.nj-mobile .jw .fl-card.sel .fl-more { display: flex; width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); right: 0; top: 0; background: transparent; }
  body.nj-mobile .jw .fl-card:not(.sel) .fl-fxedit { display: none; }
  body.nj-mobile .jw .fl-card.sel .fl-fxedit { opacity: 1; display: flex; align-items: center; justify-content: center; width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); right: var(--nj-tap); top: 0; border: 0; background: transparent; }
  body.nj-mobile .jw .fl-card.has-hear { padding-left: 54px; }
  body.nj-mobile .jw .fl-card .fl-hear { left: 8px; top: 0; transform: none; width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile .jw .fl-card .fl-hear:not(.on) { background: transparent; }
  body.nj-mobile .jw .fl-add, body.nj-mobile .jw .fl-add.slim { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); margin-top: 0; }
  body.nj-mobile .jw .fl-add.slim svg { width: 16px; height: 16px; }
  body.nj-mobile .jw .fl-phase { height: var(--nj-tap); min-height: var(--nj-tap); margin-top: 0; border-radius: 22px !important; }
  /* the "+" between two cards: placed for a 14px box, so a 44px one is pulled back 15px to stay centred; a small disc shows inside */
  body.nj-mobile .jw .fl-ins { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); margin: -15px 0 0 -15px; opacity: 1; background: transparent !important; border: 0 !important; z-index: 1; }
  body.nj-mobile .jw .fl-ins::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #0d1017; border: 1px solid var(--line2); }
  body.nj-mobile .jw .fl-ins svg { position: relative; }
  body.nj-mobile .jw .fl-ins:hover { transform: none; }
  body.nj-mobile .jw .fl-grip { width: var(--nj-tap); }
  body.nj-mobile .jw .fl-label.slim, body.nj-mobile .jw .fl-dest.slim { height: var(--nj-tap); }
  body.nj-mobile .jw .fl-label .x { display: inline-flex; align-items: center; justify-content: center; width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile .jw .fl-link { height: var(--nj-tap); line-height: 42px; margin-top: 0; }
  body.nj-mobile .jw .fl-link.tall { margin-top: 0; }
  body.nj-mobile .jw-strip-tools button { min-height: var(--nj-tap); min-width: var(--nj-tap); }
  body.nj-mobile .jw-top-more { position: relative; }
  body.nj-mobile .jw-top-more.attn::after { content: ''; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
  body.nj-mobile .jw button.jw-x { min-width: var(--nj-tap); min-height: var(--nj-tap); justify-content: center; }
  body.nj-mobile .jw .jw-iconcell { width: 56px; height: 56px; }
  /* the "?" keeps its size in the row, with a finger-sized box around it */
  body.nj-mobile .jw-q { position: relative; width: 20px; height: 20px; min-height: 0; font-size: 11px; }
  body.nj-mobile .jw-q::after { content: ''; position: absolute; inset: -12px; }
  body.nj-mobile .jw-panebar { font-size: 13px; }
  /* What the overlays cover cannot be reached, so it is taken out of the tab order as well. */
  body.nj-mobile:has(#jw-root:not([style*="display: none"])) .nj-topbar,
  body.nj-mobile:has(#mission-workspace:not([hidden])) .nj-topbar { visibility: hidden; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. PARTICLES (#particles-editor)
   Toolbar in normal flow and wrapping, stats under it, the controls panel a
   bottom sheet with a handle (particle-editor.js toggles .sheet-collapsed),
   the layer list a horizontal strip above the sheet.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile .particle-editor-fullscreen { display: flex; flex-direction: column; --nj-sheet-h: min(46vh, 420px); --nj-sheet-h: min(46dvh, 420px); }
  body.nj-mobile #particle-preview-canvas { touch-action: none; }
  body.nj-mobile .particle-toolbar { position: relative; top: auto; left: auto; right: auto; flex: none; padding: 6px 8px 0; gap: 6px; z-index: 100; }
  body.nj-mobile .toolbar-left { flex: 1 1 100%; }
  body.nj-mobile .toolbar-left .effect-name-input { width: 100%; min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .toolbar-center, body.nj-mobile .toolbar-right { flex-wrap: wrap; gap: 6px; }
  body.nj-mobile .toolbar-btn { min-width: var(--nj-tap); min-height: var(--nj-tap); padding: 8px 10px; }
  body.nj-mobile .toolbar-btn .tb-label { display: none; }
  body.nj-mobile .toolbar-divider { display: none; }
  body.nj-mobile .system-selector { min-height: var(--nj-tap); min-width: 0; flex: 1 1 110px; font-size: 16px; }
  body.nj-mobile .preview-stats-overlay { position: relative; top: auto; left: auto; align-self: flex-start; margin: 4px 8px 0; flex: none; z-index: 100; }

  body.nj-mobile .particle-controls-panel {
    top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: var(--nj-sheet-h);
    padding: 8px 10px calc(10px + var(--nj-safe-bottom));
    background: var(--nj-surface-sheet, rgba(8, 8, 26, .94)); border-top: 1px solid var(--nj-line, rgba(255, 255, 255, .12)); border-radius: 14px 14px 0 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transition: transform .2s ease, visibility 0s;
  }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-controls-panel { transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  body.nj-mobile .particle-sheet-handle {
    display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--nj-sheet-h); z-index: 101;
    min-height: var(--nj-tap); min-width: 150px; align-items: center; justify-content: center; gap: 6px;
    background: var(--nj-surface-sheet, rgba(8, 8, 26, .94)); color: var(--nj-text, #f1ead8); font-size: 13px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .15); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0 14px;
  }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-sheet-handle { bottom: var(--nj-safe-bottom); }
  body.nj-mobile .particle-sheet-handle .when-open { display: inline; }
  body.nj-mobile .particle-sheet-handle .when-closed { display: none; }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-sheet-handle .when-open { display: none; }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-sheet-handle .when-closed { display: inline; }

  body.nj-mobile .particle-layer-bar { left: 8px; right: 8px; bottom: calc(var(--nj-sheet-h) + 50px); min-width: 0; }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-layer-bar { bottom: calc(50px + var(--nj-safe-bottom)); }
  body.nj-mobile .layer-list-compact { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  body.nj-mobile .layer-list-compact::-webkit-scrollbar { display: none; }
  body.nj-mobile .layer-row { flex: none; min-height: var(--nj-tap); padding: 2px 10px 2px 2px; background: var(--nj-surface-chip, rgba(0, 0, 0, .65)); }
  body.nj-mobile .layer-row-name { max-width: 120px; font-size: 13px; }
  body.nj-mobile .layer-row-delete { opacity: 1; padding: 0 8px; font-size: 18px; line-height: 1; min-width: var(--nj-tap); min-height: var(--nj-tap); display: inline-flex; align-items: center; justify-content: center; color: var(--nj-text-dim, #9b9788); }
  body.nj-mobile .layer-add-btn { flex: none; min-height: var(--nj-tap); margin-top: 0; font-size: 13px; padding: 4px 12px; color: var(--nj-text-dim, #d9d3c4); background: var(--nj-surface-chip, rgba(0, 0, 0, .55)); }

  body.nj-mobile .particle-controls-panel .empty-state { padding: 20px; }
  body.nj-mobile #wizard-modal-overlay { align-items: stretch; }
  body.nj-mobile .wizard-modal { width: 100%; }
  body.nj-mobile .wizard-content { padding: 16px 14px calc(16px + var(--nj-safe-bottom)); max-height: none; height: 100%; border-radius: 0; }
  body.nj-mobile .wizard-header h2 { font-size: 22px; }
  body.nj-mobile .wizard-categories { grid-template-columns: 1fr; gap: 12px; }
  body.nj-mobile .wizard-preset-btn { min-height: var(--nj-tap); font-size: 14px; }
  body.nj-mobile .wizard-footer { flex-wrap: wrap; position: sticky; bottom: 0; background: #1a1e28; }
  body.nj-mobile .wizard-footer button { min-height: var(--nj-tap); flex: 1 1 auto; }
}
/* Landscape phones: the sheet becomes a drawer down the right edge; the toolbar stays clear of it. */
@media (max-width: 959px) and (max-height: 500px) {
  body.nj-mobile .particle-editor-fullscreen { --nj-drawer-w: min(340px, 45vw); }
  body.nj-mobile .particle-controls-panel { top: 0; left: auto; bottom: 0; width: var(--nj-drawer-w); height: auto; border-top: 0; border-left: 1px solid var(--nj-line, rgba(255, 255, 255, .12)); border-radius: 14px 0 0 14px; }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-controls-panel { transform: translateX(100%); }
  body.nj-mobile .particle-toolbar { padding-right: calc(var(--nj-drawer-w) + 8px); }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-toolbar { padding-right: 8px; }
  body.nj-mobile .toolbar-left { flex: 0 1 140px; }
  body.nj-mobile .preview-stats-overlay { display: none; }
  body.nj-mobile .particle-sheet-handle, body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-sheet-handle { left: auto; transform: none; bottom: 8px; min-width: 0; border: 1px solid var(--nj-line, rgba(255, 255, 255, .15)); border-radius: 10px; }
  body.nj-mobile .particle-sheet-handle { right: calc(var(--nj-drawer-w) + 8px); }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-sheet-handle { right: 8px; }
  body.nj-mobile .particle-layer-bar, body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-layer-bar { bottom: 8px; }
  body.nj-mobile .particle-layer-bar { right: calc(var(--nj-drawer-w) + 150px); }
  body.nj-mobile .particle-editor-fullscreen.sheet-collapsed .particle-layer-bar { right: 150px; }
}
@media (pointer: coarse) {
  /* Sliders: a 44px row with a 24px thumb on a thin track. */
  .particle-controls-panel .slider-row { min-height: var(--nj-tap); margin-bottom: 2px; }
  .particle-controls-panel .slider-row label { min-width: 72px; font-size: 13px; }
  .particle-controls-panel .slider-row input[type="range"] { height: var(--nj-tap); background: transparent; margin: 0; }
  .particle-controls-panel .slider-row input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
  .particle-controls-panel .slider-row input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
  .particle-controls-panel .slider-row input[type="range"]::-moz-range-track { height: 4px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
  .particle-controls-panel .slider-row input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #8d7a4e; border: 0; border-radius: 50%; }
  .particle-controls-panel .slider-value { font-size: 12px; }
  .particle-controls-panel .color-pick input[type="color"] { width: 56px; height: var(--nj-tap); }
  .particle-controls-panel .direction-btns button, .particle-controls-panel .blend-btns button { min-height: var(--nj-tap); font-size: 12px; }
  .particle-controls-panel .texture-quick-picks img { width: 44px; height: 44px; }
  .particle-controls-panel .current-texture { width: 44px; height: 44px; }
  .particle-controls-panel .advanced-section summary { min-height: var(--nj-tap); display: flex; align-items: center; }
  .particle-controls-panel .control-group input[type="number"], .particle-controls-panel .control-group select { min-height: var(--nj-tap); font-size: 16px; }
  .particle-controls-panel button.btn-sm { min-height: var(--nj-tap); min-width: var(--nj-tap); }
  .particle-controls-panel input[type="checkbox"] { width: 22px; height: 22px; }
  .particle-controls-panel label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; min-height: var(--nj-tap); }
  .layer-vis-wrap { display: inline-flex; align-items: center; justify-content: center; width: var(--nj-tap); height: var(--nj-tap); flex: none; cursor: pointer; }
  .layer-vis-wrap .layer-visibility { width: 22px; height: 22px; margin: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. PROPS (#section-props) and the prop browser dock
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #section-props .wv-tabbar { height: auto; min-height: var(--nj-tap-lg); padding: 0 8px; }
  body.nj-mobile #section-props .wv-tabs { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.nj-mobile #section-props .wv-tabs::-webkit-scrollbar { display: none; }
  body.nj-mobile #section-props .wv-tab { flex: none; height: auto; min-height: var(--nj-tap-lg); padding: 0 14px; white-space: nowrap; font-size: 14px; }
  body.nj-mobile #section-props .wv-breadcrumb { display: none; }
  body.nj-mobile .props-editor-layout { max-height: none; }
  body.nj-mobile .prop-properties-panel input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), body.nj-mobile .prop-properties-panel select { min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .prop-preview-panel .preview-canvas-container canvas { touch-action: none; }
  body.nj-mobile .preview-controls button { min-width: var(--nj-tap); min-height: var(--nj-tap); }
  body.nj-mobile .preview-header { flex-wrap: wrap; gap: 8px; }
  /* Building: the role summary above the category tree instead of beside it. */
  body.nj-mobile #props-building-pane { flex-direction: column; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.nj-mobile .bld-sidebar { width: 100%; flex: none; overflow: visible; border-right: 0; border-bottom: 1px solid #38352f; }
  body.nj-mobile .bld-main { flex: none; overflow: visible; }
  body.nj-mobile .bld-tree { overflow: visible; flex: none; }
  body.nj-mobile .bld-hint-mouse { display: none; }
  body.nj-mobile .bld-hint-touch { display: inline; }
  body.nj-mobile .bld-save { min-height: var(--nj-tap-lg); }
  body.nj-mobile .bld-input { min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .bld-tree-add { margin-left: auto; }
  body.nj-mobile .bld-toolbar { flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px; }
  body.nj-mobile .bld-tree { padding: 10px 8px; }
  body.nj-mobile .bld-tree-head { flex-wrap: wrap; min-height: var(--nj-tap); padding: 8px 10px; }
  body.nj-mobile .bld-tree-hint-inline { flex: 1 1 100%; order: 9; margin-left: 0; white-space: normal; }
  body.nj-mobile .bld-row { flex-wrap: wrap; }
  body.nj-mobile .bld-cost-item { min-width: 120px; }
  body.nj-mobile .bld-picker { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  body.nj-mobile .bld-picker-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 10px; }
  body.nj-mobile .bld-picker-search { min-height: var(--nj-tap); font-size: 16px; }
  /* The prop browser dock (map editor): taller, with a wrapping toolbar. */
  body.nj-mobile #prop-browser-dock { height: 45vh; height: 45dvh; }
  body.nj-mobile .pb-toolbar { gap: 6px; padding: 6px 8px; }
  body.nj-mobile .pb-search { flex: 1 1 100%; max-width: none; min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .pb-set input[type=number], body.nj-mobile .pb-set select { min-height: 40px; font-size: 16px; }
}
@media (max-width: 767px) {
  /* Properties (with the prop selector) and the 3D preview are switched by a
     bar at the top (props-editor.js, switchPropsPane). */
  body.nj-mobile .props-editor-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  body.nj-mobile .props-pane-bar {
    display: flex; gap: 6px; padding: 6px 8px; background: #0d1017; border-bottom: 1px solid #38352f;
  }
  body.nj-mobile .props-pane-bar button {
    flex: 1; min-height: var(--nj-tap); justify-content: center; border-radius: 8px;
    background: transparent; border: 1px solid #38352f; color: #e2d3a6; font-size: 14px;
  }
  body.nj-mobile .props-pane-bar button[aria-selected="true"] { background: var(--nj-accent-soft, rgba(52, 152, 219, .16)); border-color: var(--nj-accent, #8d7a4e); color: var(--nj-text, #f1ead8); }
  body.nj-mobile .props-editor-layout[data-pane="form"] .prop-preview-panel { display: none; }
  body.nj-mobile .props-editor-layout[data-pane="preview"] .prop-properties-panel { display: none; }
  body.nj-mobile .prop-preview-panel { border-right: 0; min-height: 0; min-width: 0; }
  body.nj-mobile .prop-properties-panel { max-height: none; min-height: 0; min-width: 0; padding-bottom: calc(24px + var(--nj-safe-bottom)); }
  body.nj-mobile .prop-properties-panel .form-row { display: flex; flex-wrap: wrap; gap: 8px; }
  body.nj-mobile .prop-properties-panel .form-row > button { flex: 1 1 140px !important; margin-left: 0 !important; min-height: var(--nj-tap); }
  body.nj-mobile .bld-legend { display: none; }
}
@media (pointer: coarse) {
  .bld-tree-add, .bld-row-remove, .bld-picker-x { width: var(--nj-tap); height: var(--nj-tap); min-height: var(--nj-tap); }
  .bld-row-change { min-height: var(--nj-tap); }
  .prop-properties-panel button.btn-sm { min-width: var(--nj-tap); min-height: var(--nj-tap); }
  .prop-properties-panel h2.section-title { min-height: var(--nj-tap); }
  .bld-tree-head { min-height: var(--nj-tap); }
  .bld-ctx-item { min-height: var(--nj-tap); }
  .bld-cost-amt, .bld-cost-item { min-height: var(--nj-tap); }
  .bld-tree-body > .bld-row { min-height: var(--nj-tap); }
  #prop-browser-dock .pb-close { width: var(--nj-tap); height: var(--nj-tap); }
  #prop-browser-dock .pb-tab { min-height: var(--nj-tap); }
  #prop-browser-dock .pb-star, #prop-browser-dock .pb-rotate { opacity: 1; width: 30px; height: 30px; }
  #prop-browser-dock .pb-rotate { right: 38px; }
  #prop-browser-dock .pb-set-check { min-height: var(--nj-tap); }
  #prop-browser-dock .pb-set-check input { width: 22px; height: 22px; }
  #prop-browser-dock .pb-resize-top { height: 16px; }
}