/* mobile-boards.css — phone/tablet rules for the "board" screens of the Ninjora Editor:
   Wiki, Requests / Ideas, Assets, Settings + admin tools, Hand anchors, Progression, Game
   settings and the dashboard cards beyond the shell. Loaded after mobile.css; see that file
   for the conventions (body.nj-mobile below 960px, (max-width: 767px) for phones,
   (pointer: coarse) for touch, --nj-tap / --nj-tap-lg / --nj-safe-* tokens).
   Desktop (≥960px) is untouched: everything here is behind body.nj-mobile or a media query,
   except a handful of hooks that are display:none until the mobile class turns them on. */

/* ── Hooks that exist in the DOM at every width but only show on phones/tablets ── */
.wk-pages-btn { display: none; }
.wk-navbackdrop { display: none; }
.wk-nav-close { display: none; }
.ha-touch { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   WIKI — the 248px page tree becomes a drawer behind a "Pages" button
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile .wk-shell { flex-direction: column; position: relative; }

  /* Page tree as an off-canvas drawer (same look as the app drawer, under it in z). */
  body.nj-mobile .wk-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 320px);
    max-width: 100%;
    flex: none;
    z-index: 10500;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
    border-right: 1px solid #38352f;
    box-shadow: none;
    padding-top: var(--nj-safe-top);
    padding-left: var(--nj-safe-left);
    padding-bottom: var(--nj-safe-bottom);
  }
  body.nj-mobile #section-wiki.wk-nav-open .wk-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  @media (prefers-reduced-motion: reduce) {
    body.nj-mobile .wk-sidebar { transition: none; }
  }
  body.nj-mobile .wk-navbackdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10400;
    background: rgba(2, 6, 23, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    touch-action: none;
  }
  body.nj-mobile #section-wiki.wk-nav-open .wk-navbackdrop { opacity: 1; pointer-events: auto; }

  body.nj-mobile .wk-searchwrap { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
  body.nj-mobile .wk-searchwrap .wk-search { flex: 1 1 auto; width: auto; min-width: 0; }
  body.nj-mobile .wk-nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--nj-tap);
    height: var(--nj-tap);
    padding: 0;
    font-size: 22px;
    line-height: 1;
  }
  body.nj-mobile .wk-search { min-height: var(--nj-tap); font-size: 16px; padding: 10px 12px; }
  body.nj-mobile .wk-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.nj-mobile .wk-navitem {
    min-height: var(--nj-tap);
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 15px;
  }
  body.nj-mobile .wk-navitem:active { background: #1a1e28; }
  body.nj-mobile .wk-legend { padding-bottom: calc(12px + var(--nj-safe-bottom)); }

  /* Article column takes the whole width. */
  body.nj-mobile .wk-main { width: 100%; flex: 1 1 auto; min-height: 0; }
  body.nj-mobile .wk-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    padding-right: calc(12px + var(--nj-safe-right));
    padding-left: calc(12px + var(--nj-safe-left));
  }
  body.nj-mobile .wk-pages-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--nj-tap);
    padding: 0 14px;
    font-size: 14px;
    order: 0;
  }
  body.nj-mobile .wk-pages-btn[aria-expanded="true"] { background: #8d7a4e; border-color: #8d7a4e; color: #f1ead8; }
  body.nj-mobile .wk-toolbar-left { flex: 1 1 140px; min-width: 0; order: 2; font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
  body.nj-mobile .wk-toolbar-right { order: 1; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  body.nj-mobile .wk-btn { min-height: var(--nj-tap); padding: 8px 14px; font-size: 13px; }
  body.nj-mobile .wk-btn:active:not(:disabled) { background: #1a1e28; border-color: #8d7a4e; }

  body.nj-mobile .wk-article {
    padding: 16px 16px calc(96px + var(--nj-safe-bottom));
    padding-right: calc(16px + var(--nj-safe-right));
    padding-left: calc(16px + var(--nj-safe-left));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.nj-mobile .wk-main h1 { font-size: 24px; overflow-wrap: anywhere; }
  body.nj-mobile .wk-main h2 { font-size: 19px; overflow-wrap: anywhere; }
  body.nj-mobile .wk-main h3 { font-size: 16px; overflow-wrap: anywhere; }
  body.nj-mobile .wk-main p, body.nj-mobile .wk-main li, body.nj-mobile .wk-main td { overflow-wrap: anywhere; }
  body.nj-mobile .wk-main img, body.nj-mobile .wk-main svg, body.nj-mobile .wk-main video { max-width: 100%; height: auto; }
  body.nj-mobile .wk-main pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.nj-mobile .wk-main code { overflow-wrap: anywhere; }
  body.nj-mobile .wk-hero { gap: 12px; padding: 12px; flex-wrap: wrap; }
  body.nj-mobile .wk-formula { max-width: 100%; overflow-x: auto; }
  body.nj-mobile .wk-body, body.nj-mobile .wk-editor { max-width: 100%; }
  /* Tables scroll inside their own box (the wrapper already has overflow-x:auto). */
  body.nj-mobile .wk-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  body.nj-mobile .wk-tablewrap .wk-table { min-width: max-content; }
  body.nj-mobile .wk-page-actions { flex-wrap: wrap; }

  /* Authoring form: Save / Cancel stay pinned at the top of the scrolling article. */
  body.nj-mobile .wk-editor-head {
    position: sticky;
    top: -16px;
    z-index: 3;
    margin: -16px -16px 16px;
    padding: 10px 16px;
    background: #1a1e28;
    flex-wrap: wrap;
    gap: 8px;
  }
  body.nj-mobile .wk-main .wk-editor-head h2 { margin: 0; padding: 0; border: 0; font-size: 17px; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
  body.nj-mobile .wk-editor-actions { flex-wrap: wrap; margin-left: auto; }
  body.nj-mobile .wk-editor-actions .wk-btn-primary { min-height: var(--nj-tap-lg); }
  body.nj-mobile .wk-field-row { gap: 10px; }
  body.nj-mobile .wk-field-row .wk-field { min-width: 140px; }
  body.nj-mobile .wk-field input[type="text"],
  body.nj-mobile .wk-field input[type="number"],
  body.nj-mobile .wk-field select { min-height: var(--nj-tap); }
  body.nj-mobile .wk-editor-foot { flex-wrap: wrap; }
  body.nj-mobile .wk-editor-foot .wk-btn-danger { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REQUESTS / IDEAS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #rq-root {
    padding: 12px 12px calc(96px + var(--nj-safe-bottom));
    padding-right: calc(12px + var(--nj-safe-right));
    padding-left: calc(12px + var(--nj-safe-left));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.nj-mobile .rq-board { max-width: 100%; }
  body.nj-mobile .rq-bar { gap: 10px; }

  /* Tabs: a horizontally scrollable strip of ≥44px tabs. */
  body.nj-mobile .rq-tabs {
    max-width: 100%;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  body.nj-mobile .rq-tabs::-webkit-scrollbar { display: none; }
  body.nj-mobile .rq-tab {
    flex: 1 0 auto;
    min-height: var(--nj-tap);
    padding: 8px 16px;
    font-size: 14px;
  }
  body.nj-mobile .rq-tab:active { background: #1a1e28; }

  /* Controls wrap onto their own line and share it. */
  body.nj-mobile .rq-bar-right { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  body.nj-mobile .rq-filter { flex: 1 1 120px; min-height: var(--nj-tap); padding: 8px 10px; font-size: 14px; }
  body.nj-mobile .rq-bar-right .wk-btn { flex: 1 1 auto; justify-content: center; }
  body.nj-mobile .rq-bar-right .wk-btn-primary { min-height: var(--nj-tap-lg); }

  /* Cards. */
  body.nj-mobile .rq-card { gap: 10px; padding: 10px 12px 12px 10px; }
  body.nj-mobile .rq-votes { flex: 0 0 var(--nj-tap); }
  body.nj-mobile .rq-vote {
    width: var(--nj-tap);
    min-height: var(--nj-tap);
    font-size: 15px;
    padding: 0;
  }
  body.nj-mobile .rq-vote:active { background: #1a1e28; }
  body.nj-mobile .rq-title {
    min-height: var(--nj-tap);
    display: flex;
    align-items: center;
    padding: 4px 0;
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  body.nj-mobile .rq-title:active { color: #f1ead8; }
  body.nj-mobile .rq-meta { gap: 6px 10px; }
  body.nj-mobile .rq-actions { flex-wrap: wrap; }
  body.nj-mobile .rq-actions .wk-btn { flex: 1 1 auto; }

  /* Triage bar: selects share a row, the note and Apply get their own. */
  body.nj-mobile .rq-statusbar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 10px; gap: 8px; }
  body.nj-mobile .rq-statusbar select { width: 100%; min-width: 0; min-height: var(--nj-tap); font-size: 14px; }
  body.nj-mobile .rq-statusbar input.rq-note { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: var(--nj-tap); font-size: 16px; box-sizing: border-box; }
  body.nj-mobile .rq-statusbar .wk-btn { grid-column: 1 / -1; }

  /* Thread. */
  body.nj-mobile .rq-comment-head { flex-wrap: wrap; }
  body.nj-mobile .rq-x {
    min-width: var(--nj-tap);
    min-height: var(--nj-tap);
    margin-left: auto;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.nj-mobile .rq-reply { flex-direction: column; align-items: stretch; }
  body.nj-mobile .rq-reply textarea { font-size: 16px; min-height: 72px; }

  /* Compose / inline edit. */
  body.nj-mobile .rq-compose { padding: 14px 12px 12px; }
  body.nj-mobile .rq-compose-foot { flex-wrap: wrap; }
  body.nj-mobile .rq-compose-foot .wk-btn { flex: 1 1 40%; min-height: var(--nj-tap-lg); }
}

/* Readable form text on phones for the wiki primitives the board reuses. */
@media (max-width: 767px) {
  body.nj-mobile .wk-field input[type="text"],
  body.nj-mobile .wk-field input[type="number"],
  body.nj-mobile .wk-field select,
  body.nj-mobile .wk-field textarea,
  body.nj-mobile .rq-filter,
  body.nj-mobile .rq-statusbar select,
  body.nj-mobile .rq-statusbar input.rq-note,
  body.nj-mobile .rq-reply textarea,
  body.nj-mobile .wk-search { font-size: 16px; }
  body.nj-mobile .wk-field textarea { line-height: 1.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSETS MANAGER (markup is inline-styled; the classes were added for these rules)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #section-assets { overflow: hidden; }
  body.nj-mobile #assets-manager { min-height: 0; }

  /* Tab strip scrolls sideways, never wraps or spills. */
  body.nj-mobile .assets-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  body.nj-mobile .assets-tabs::-webkit-scrollbar { display: none; }
  body.nj-mobile .assets-tab {
    flex: 1 0 auto;
    min-height: var(--nj-tap-lg);
    padding: 10px 18px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
  body.nj-mobile .assets-tab:active { filter: brightness(1.15); }

  /* Toolbars wrap; fixed-width search boxes become fluid. */
  body.nj-mobile .assets-toolbar { flex-wrap: wrap; padding: 8px 12px !important; gap: 8px !important; }
  body.nj-mobile .assets-toolbar > span { flex: 1 1 100%; }
  body.nj-mobile .assets-spacer { display: none; }
  body.nj-mobile #assets-dir-select { flex: 1 1 140px; min-width: 0; min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile #assets-search,
  body.nj-mobile #sounds-search,
  body.nj-mobile #music-search,
  body.nj-mobile #models-search {
    flex: 1 1 160px;
    width: auto !important;
    min-width: 0;
    min-height: var(--nj-tap);
    font-size: 16px !important;
    box-sizing: border-box;
  }
  body.nj-mobile .assets-upload-label {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--nj-tap);
    box-sizing: border-box;
  }
  body.nj-mobile .assets-upload-label:active { filter: brightness(1.15); }

  /* Sprite grid: smaller cells, still finger-sized. */
  body.nj-mobile #assets-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    grid-auto-rows: max-content;   /* else a definite-height grid squeezes hundreds of rows to 2px */
    gap: 8px !important;
    padding: 8px !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.nj-mobile #assets-grid > div:active { border-color: #8d7a4e !important; }

  /* Preview strip: image on top, actions full width. */
  body.nj-mobile #assets-preview { padding: 10px 12px calc(10px + var(--nj-safe-bottom)) !important; max-height: 50vh; overflow-y: auto; }
  body.nj-mobile .assets-preview-row { flex-wrap: wrap; }
  body.nj-mobile #assets-preview-img { max-width: 96px !important; max-height: 96px !important; }
  body.nj-mobile .assets-preview-actions { flex-wrap: wrap; }
  body.nj-mobile .assets-preview-actions button { flex: 1 1 auto; min-height: var(--nj-tap); font-size: 13px !important; }

  /* Models tab. */
  body.nj-mobile #models-panel { overflow-y: auto !important; }
  body.nj-mobile .models-form { padding: 12px !important; max-width: 100% !important; box-sizing: border-box; }
  body.nj-mobile .models-form select, body.nj-mobile .models-form input[type="text"] { min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile #model-file-label { min-height: var(--nj-tap-lg); display: flex !important; align-items: center; justify-content: center; }
  body.nj-mobile #model-upload-btn { min-height: var(--nj-tap-lg); }
  body.nj-mobile #model-magnet-row label { min-height: var(--nj-tap); }
  body.nj-mobile .models-list-wrap { padding: 0 12px calc(12px + var(--nj-safe-bottom)) !important; flex: none !important; overflow: visible !important; }
  body.nj-mobile .models-head { flex-wrap: wrap; }
  body.nj-mobile .models-head h4 { flex: 1 1 100%; }
  body.nj-mobile .model-item {
    display: inline-flex;
    align-items: center;
    min-height: var(--nj-tap);
    padding: 8px 12px !important;
    font-size: 13px !important;
    cursor: pointer !important;
  }
  body.nj-mobile .model-item:active { background: #1a1e28 !important; }
  body.nj-mobile #models-ctx-menu { min-width: 180px; padding: 6px 0; font-size: 14px; }
  body.nj-mobile .models-ctx-item { min-height: var(--nj-tap); display: flex; align-items: center; padding: 0 16px !important; }
  body.nj-mobile .models-ctx-item:active { background: #8d7a4e; }

  /* Sounds / music rows. */
  body.nj-mobile #sounds-list > div, body.nj-mobile #music-list > div { flex-wrap: wrap; padding: 8px 10px !important; }
  body.nj-mobile #sounds-list > div > div, body.nj-mobile #music-list > div > div { flex: 1 1 120px !important; }
  body.nj-mobile .audio-play-btn { width: var(--nj-tap) !important; height: var(--nj-tap) !important; font-size: 16px !important; }
  body.nj-mobile #sounds-list button:not(.audio-play-btn),
  body.nj-mobile #music-list button:not(.audio-play-btn) { min-height: var(--nj-tap); padding: 8px 14px !important; font-size: 13px !important; }
  body.nj-mobile #sounds-list, body.nj-mobile #music-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(12px + var(--nj-safe-bottom)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS (backup manager — index.html is read-only, so this is CSS only)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #section-settings > div { padding: 12px !important; padding-bottom: calc(80px + var(--nj-safe-bottom)) !important; max-width: 100% !important; }
  body.nj-mobile #section-settings > div > div { padding: 14px !important; }
  body.nj-mobile #section-settings > div > div > div:first-child { flex-wrap: wrap; gap: 10px; }
  body.nj-mobile #btn-create-backup { min-height: var(--nj-tap-lg); flex: 1 1 100%; font-size: 14px !important; }
  body.nj-mobile #backup-label { width: 100% !important; box-sizing: border-box; min-height: var(--nj-tap); font-size: 16px !important; padding: 10px 12px !important; }

  /* The backup table becomes a list of cards: name, then date · size, then the actions. */
  body.nj-mobile #section-settings table { display: block; }
  body.nj-mobile #section-settings thead { display: none; }
  body.nj-mobile #section-settings tbody { display: block; }
  body.nj-mobile #section-settings tbody tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 0; }
  body.nj-mobile #section-settings tbody td { display: block; padding: 0 !important; border: 0; }
  body.nj-mobile #section-settings tbody td[colspan] { flex: 1 1 100%; padding: 12px 0 !important; }
  body.nj-mobile #section-settings td.bk-name { flex: 1 1 100%; font-size: 12px !important; overflow-wrap: anywhere; color: #f1ead8 !important; }
  body.nj-mobile #section-settings td.bk-when, body.nj-mobile #section-settings td.bk-size { font-size: 12px; }
  body.nj-mobile #section-settings td.bk-actions { flex: 1 1 100%; display: flex; gap: 8px; margin-top: 6px; text-align: left !important; }
  body.nj-mobile #backup-list button { flex: 1 1 0; min-height: var(--nj-tap); font-size: 13px !important; margin: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME SETTINGS (hints — index.html + map-editor.js markup, so CSS only)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #section-game-settings > div { padding: 12px !important; padding-bottom: calc(80px + var(--nj-safe-bottom)) !important; max-width: 100% !important; }
  body.nj-mobile #section-game-settings > div > div { padding: 14px !important; }
  body.nj-mobile #section-game-settings div:has(> #hints-list) > div:first-child { flex-wrap: wrap; gap: 10px; }
  body.nj-mobile #section-game-settings div:has(> #hints-list) > div:first-child > button { flex: 1 1 100%; min-height: var(--nj-tap); }
  body.nj-mobile #section-game-settings div:has(> #hints-list) > div:last-child { flex-wrap: wrap; }
  body.nj-mobile #section-game-settings div:has(> #hints-list) > div:last-child > button { flex: 1 1 40%; min-height: var(--nj-tap-lg); }
  body.nj-mobile #hints-list .ed-input { min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile #hints-list textarea.ed-input { min-height: 64px; }
  body.nj-mobile #hints-list .ed-btn-ghost { min-width: var(--nj-tap); min-height: var(--nj-tap); font-size: 18px !important; }
  body.nj-mobile #hints-list label { min-height: var(--nj-tap); display: flex; align-items: center; gap: 8px; }
  body.nj-mobile #hints-list > div { gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAND ANCHORS — controls above a canvas that fits the screen; touch zoom + D-pad
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #hand-anchors-editor { padding: 12px !important; padding-bottom: calc(80px + var(--nj-safe-bottom)) !important; height: auto !important; min-height: 100%; box-sizing: border-box; }
  body.nj-mobile .ha-shell { flex-direction: column; gap: 14px; }
  body.nj-mobile .ha-controls { min-width: 0 !important; width: 100%; }
  body.nj-mobile .ha-anchor-row { flex-wrap: wrap; }
  body.nj-mobile .ha-anchor-row select { flex: 1 1 100% !important; min-height: var(--nj-tap); font-size: 16px; }
  body.nj-mobile .ha-anchor-row button { flex: 1 1 40%; min-height: var(--nj-tap); font-size: 13px !important; }
  body.nj-mobile #ha-sheet { min-height: var(--nj-tap); font-size: 16px; max-width: 100%; }
  body.nj-mobile #ha-actions, body.nj-mobile #ha-dirs, body.nj-mobile #ha-frames { flex-wrap: wrap; gap: 6px !important; }
  body.nj-mobile #ha-actions button, body.nj-mobile #ha-dirs button, body.nj-mobile #ha-frames button {
    min-width: var(--nj-tap) !important;
    min-height: var(--nj-tap);
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  body.nj-mobile .ha-tools button { min-height: var(--nj-tap); font-size: 13px !important; flex: 1 1 auto; }
  body.nj-mobile #ha-save { min-height: var(--nj-tap-lg); flex: 1 1 100%; font-size: 14px !important; }

  /* The 512px bitmap is scaled by CSS; clicks are mapped from the rendered size. */
  body.nj-mobile .ha-preview { order: -1; width: 100%; min-width: 0; }
  body.nj-mobile .ha-canvas-wrap {
    max-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #1a1e28;
    border-radius: 4px;
  }
  body.nj-mobile #ha-canvas {
    display: block;
    width: min(100%, 60vh);
    width: min(100%, 60dvh);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    touch-action: none;   /* a tap places the anchor; the page never scrolls under a finger on the canvas */
    box-sizing: border-box;
  }
  body.nj-mobile .ha-canvas-hint { font-size: 12px !important; }
  body.nj-mobile .ha-touch { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 20px; margin-top: 10px; }
  body.nj-mobile .ha-zoom { display: flex; gap: 6px; }
  body.nj-mobile .ha-zoom button { min-width: var(--nj-tap); min-height: var(--nj-tap); padding: 6px 14px; font-size: 13px; }
  body.nj-mobile .ha-zoom button.active { background: #8d7a4e; color: #f1ead8; }
  body.nj-mobile .ha-nudge {
    display: grid;
    grid-template-columns: repeat(3, var(--nj-tap-lg));
    grid-template-rows: repeat(3, var(--nj-tap-lg));
    gap: 4px;
    margin-left: auto;
  }
  body.nj-mobile .ha-nudge button { width: var(--nj-tap-lg); height: var(--nj-tap-lg); padding: 0; font-size: 16px; min-height: 0; }
  body.nj-mobile .ha-nudge-up { grid-column: 2; grid-row: 1; }
  body.nj-mobile .ha-nudge-left { grid-column: 1; grid-row: 2; }
  body.nj-mobile .ha-nudge-right { grid-column: 3; grid-row: 2; }
  body.nj-mobile .ha-nudge-down { grid-column: 2; grid-row: 3; }
  body.nj-mobile .ha-nudge button:active, body.nj-mobile .ha-zoom button:active { filter: brightness(0.9); }
}
/* Landscape phones: canvas beside the controls so both stay on screen. */
@media (max-width: 959px) and (max-height: 500px) and (orientation: landscape) {
  body.nj-mobile .ha-shell { flex-direction: row; flex-wrap: nowrap !important; align-items: flex-start; }
  body.nj-mobile .ha-preview { flex: 0 0 46%; width: 46%; }
  body.nj-mobile .ha-controls { flex: 1 1 0; width: auto; }
  body.nj-mobile #ha-canvas { width: min(100%, 75vh); width: min(100%, 75dvh); }
  body.nj-mobile .ha-canvas-wrap { max-height: 80vh; max-height: 80dvh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESSION — the two columns stack; the level table scrolls in its own box
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  body.nj-mobile #section-progression { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.nj-mobile #progression-editor { height: auto !important; min-height: 100%; }
  body.nj-mobile .prog-shell { flex-direction: column; height: auto !important; gap: 12px !important; padding: 12px; padding-bottom: calc(80px + var(--nj-safe-bottom)); box-sizing: border-box; }
  body.nj-mobile .prog-pane { flex: none !important; overflow: visible !important; padding: 12px !important; min-width: 0; }
  body.nj-mobile .prog-pane-edit { background: #1a1e28; border-radius: 8px; }
  body.nj-mobile .prog-head { flex-wrap: wrap; gap: 10px; }
  body.nj-mobile .prog-head h2 { font-size: 18px; }
  body.nj-mobile .prog-head-actions { flex: 1 1 100%; flex-wrap: wrap; }
  body.nj-mobile .prog-head-actions button { flex: 1 1 40%; min-height: var(--nj-tap); }
  body.nj-mobile .prog-phase { padding: 12px !important; }
  body.nj-mobile .prog-phase-head { gap: 8px; }
  body.nj-mobile .prog-phase-head input { flex: 1 1 auto; width: auto !important; min-width: 0; min-height: var(--nj-tap); }
  body.nj-mobile .prog-phase-head button { min-height: var(--nj-tap); min-width: 72px; flex: none; }
  body.nj-mobile .prog-phase-grid { gap: 8px !important; }
  body.nj-mobile .prog-phase-grid input { min-height: var(--nj-tap); font-size: 16px; box-sizing: border-box; min-width: 0; }
  body.nj-mobile .prog-phase-meta { flex-wrap: wrap; gap: 6px 14px !important; }
  body.nj-mobile .prog-pane-edit > .btn-success { min-height: var(--nj-tap-lg); }
  body.nj-mobile .prog-table-wrap { overflow: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.nj-mobile .prog-table-wrap table { min-width: max-content; }
  body.nj-mobile .prog-table-wrap th, body.nj-mobile .prog-table-wrap td { white-space: nowrap; }
}
@media (max-width: 420px) {
  /* Three number fields no longer fit side by side; Hours drops to its own row. */
  body.nj-mobile .prog-phase-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD CARDS beyond the shell: admin events, lists, Tony panel,
   permissions, activity feed, maintenance + survey modals
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 959px) {
  /* Admin events list rows: title on its own line, controls finger-sized. */
  body.nj-mobile .ae-row { flex-wrap: wrap; gap: 6px 8px; padding: 10px !important; min-height: var(--nj-tap); }
  body.nj-mobile .ae-row:active { background: #1a1e28 !important; }
  body.nj-mobile .ae-title { flex: 1 1 100% !important; white-space: normal !important; overflow: visible !important; line-height: 1.45; }
  body.nj-mobile .ae-survey-badge { display: inline-flex; align-items: center; min-height: var(--nj-tap); padding: 0 6px; }
  body.nj-mobile .ae-when { flex: 1 1 auto; }
  body.nj-mobile .ae-row button { min-height: var(--nj-tap); padding: 6px 12px !important; font-size: 12px !important; }
  body.nj-mobile .ae-row .ae-x { min-width: var(--nj-tap); font-size: 16px !important; }

  /* Admin event editor: one column, 16px fields, sticky Save/Cancel. */
  body.nj-mobile .ae-grid { grid-template-columns: 1fr !important; }
  body.nj-mobile .ae-grid > div { grid-column: 1 / -1 !important; }
  body.nj-mobile .ae-close { min-width: var(--nj-tap); min-height: var(--nj-tap); font-size: 18px !important; }
  body.nj-mobile #admin-event-editor input:not([type="checkbox"]),
  body.nj-mobile #admin-event-editor select,
  body.nj-mobile #admin-event-editor textarea { min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile #admin-event-editor input[type="datetime-local"] { -webkit-appearance: none; appearance: none; }
  body.nj-mobile #admin-event-editor label:has(> input[type="checkbox"]) { min-height: var(--nj-tap); }
  body.nj-mobile #admin-event-editor button { min-height: var(--nj-tap); min-width: var(--nj-tap); }
  body.nj-mobile #admin-event-editor [style*="display:flex"] { flex-wrap: wrap; }
  body.nj-mobile #admin-event-editor label[style*="display:flex"] { flex-wrap: nowrap; }
  body.nj-mobile #admin-event-editor label > span { flex: 1 1 auto; min-width: 0; }
  body.nj-mobile .ae-foot {
    position: sticky;
    bottom: calc(-1 * var(--nj-safe-bottom));
    z-index: 4;
    margin: 0 -14px -14px;
    padding: 10px 14px calc(10px + var(--nj-safe-bottom));
    background: #1a1e28;
    border-top: 1px solid #38352f;
  }
  body.nj-mobile .ae-foot button { flex: 1 1 40%; min-height: var(--nj-tap-lg); font-size: 13px !important; }

  /* Online / login / devs-in-the-editor lists. */
  body.nj-mobile #online-players-list > div { flex-wrap: wrap; min-height: var(--nj-tap); }
  body.nj-mobile #online-players-list button { min-height: var(--nj-tap); min-width: 72px; padding: 6px 12px !important; font-size: 12px !important; }
  body.nj-mobile #login-history-list > div { flex-wrap: wrap; padding: 8px !important; }
  body.nj-mobile #presence-oversight > div { flex-wrap: wrap; padding: 8px !important; }
  body.nj-mobile #online-players-list, body.nj-mobile #login-history-list, body.nj-mobile #presence-oversight { max-height: none !important; }

  /* Activity feed: the collapsible group headers. */
  body.nj-mobile #activity-feed-section [onclick] { min-height: var(--nj-tap); flex-wrap: wrap; }
  body.nj-mobile #activity-feed-section [onclick]:active { background: #1a1e28; }

  /* Tony panel: the 40×22 switch keeps its look but its label grows to a 44px hit area. */
  body.nj-mobile label:has(> #rank-hide-admins) { position: relative; }
  body.nj-mobile label:has(> #rank-hide-admins)::after { content: ''; position: absolute; inset: -11px -8px; }
  body.nj-mobile #wipe-preview { overflow-wrap: anywhere; }

  /* Permissions admin (owner only): roster above the editor, finger-sized toggles. */
  body.nj-mobile .perm-layout { grid-template-columns: 1fr !important; }
  body.nj-mobile .perm-roster-row { min-height: var(--nj-tap); padding: 8px 10px !important; }
  body.nj-mobile .perm-roster-row:active { background: #1a1e28 !important; }
  body.nj-mobile #perm-new-username { min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile #perm-add-btn { min-height: var(--nj-tap); min-width: 64px; }
  body.nj-mobile #perm-suggest-list > div { min-height: var(--nj-tap); display: flex; align-items: center; font-size: 13px !important; }
  body.nj-mobile .perm-editor-head { flex-wrap: wrap; }
  body.nj-mobile .perm-editor-head > div:last-child { flex: 1 1 100%; margin-left: 0 !important; flex-wrap: wrap; }
  body.nj-mobile .perm-editor-head button { min-height: var(--nj-tap); flex: 1 1 auto; }
  body.nj-mobile .perm-editor-grid { grid-template-columns: 1fr !important; }
  body.nj-mobile .perm-access-toggle button { min-width: var(--nj-tap); min-height: var(--nj-tap); font-size: 11px !important; }
  body.nj-mobile #permissions-admin-panel button { min-height: var(--nj-tap); }
  body.nj-mobile #perm-note { min-height: var(--nj-tap); font-size: 16px !important; }
  body.nj-mobile .perm-foot { flex-wrap: wrap; }
  body.nj-mobile .perm-foot button { flex: 1 1 40%; min-height: var(--nj-tap-lg); }
  body.nj-mobile .perm-foot #perm-status { flex: 1 1 100%; }

}

/* Modals from the dashboard (maintenance reason, survey results): bottom sheets on phones. */
@media (max-width: 767px) {
  body.nj-mobile #maint-reason-modal { place-items: end center; }
  body.nj-mobile .maint-panel {
    width: 100vw !important;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0 !important;
    padding-bottom: var(--nj-safe-bottom);
  }
  body.nj-mobile #maint-reason-input { font-size: 16px !important; min-height: 88px; }
  body.nj-mobile .maint-foot { position: sticky; bottom: 0; background: #1a1e28; flex-wrap: wrap; }
  body.nj-mobile .maint-foot button { flex: 1 1 40%; min-height: var(--nj-tap-lg); font-size: 13px !important; }

  body.nj-mobile #survey-results-modal { place-items: stretch; }
  body.nj-mobile .sv-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: var(--nj-safe-top);
    padding-bottom: var(--nj-safe-bottom);
  }
  body.nj-mobile .sv-head { flex-wrap: wrap; gap: 8px; }
  body.nj-mobile .sv-head button { min-height: var(--nj-tap); }
  body.nj-mobile .sv-close { min-width: var(--nj-tap); font-size: 20px !important; }
  body.nj-mobile .sv-bar { flex-wrap: wrap; }
  body.nj-mobile .sv-bar button { min-height: var(--nj-tap); flex: 1 1 auto; }
  body.nj-mobile #survey-results-search { flex: 1 1 100%; width: auto !important; margin-left: 0 !important; min-height: var(--nj-tap); font-size: 16px !important; }
}

/* Widened buttons keep their label in the middle: the base button style is left-aligned flex. */
@media (max-width: 959px) {
  body.nj-mobile .rq-vote,
  body.nj-mobile .rq-actions .wk-btn,
  body.nj-mobile .rq-statusbar .wk-btn,
  body.nj-mobile .rq-compose-foot .wk-btn,
  body.nj-mobile .rq-bar-right .wk-btn,
  body.nj-mobile .rq-reply .wk-btn,
  body.nj-mobile .ha-anchor-row button,
  body.nj-mobile .ha-tools button,
  body.nj-mobile .ha-zoom button,
  body.nj-mobile .ha-nudge button,
  body.nj-mobile #ha-actions button,
  body.nj-mobile #ha-dirs button,
  body.nj-mobile #ha-frames button,
  body.nj-mobile #btn-create-backup,
  body.nj-mobile #backup-list button,
  body.nj-mobile #model-upload-btn,
  body.nj-mobile .assets-preview-actions button,
  body.nj-mobile #sounds-list button,
  body.nj-mobile #music-list button,
  body.nj-mobile .ae-foot button,
  body.nj-mobile .ae-row button,
  body.nj-mobile #admin-event-editor button,
  body.nj-mobile #online-players-list button,
  body.nj-mobile .maint-foot button,
  body.nj-mobile .prog-head-actions button,
  body.nj-mobile .prog-pane-edit > .btn-success,
  body.nj-mobile .prog-phase-head button,
  body.nj-mobile .perm-foot button,
  body.nj-mobile .perm-editor-head button,
  body.nj-mobile .perm-access-toggle button,
  body.nj-mobile #perm-add-btn,
  body.nj-mobile #section-game-settings button { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
}