/* THE ARENA BUILDER + SAVED ARENAS — LAYOUT ONLY (pikeme-c3, 2026-10-11; spec
   docs/superpowers/specs/2026-10-11-arena-builder-3d-design.md). The LOOK is the hub's: under ?hub=2 the roots wear
   .h2-skin, so .slab / .candy / .ot / .ptabs / .back come from hub-pages.css (design owner pikeme-b3). This file only
   places things, and its only colours are the Saltiz tokens (var(--ink) …) plus the world's surface colours, which
   client.js copies onto the root as --w-* from field-surface.js (the game's data, not a UI palette).
   Selectors carry #id:not(#h2-a):not(#h2-b) so they outrank hub-pages.css's root rules (2 ids) and style.css.
   EVERY CONTROL IN THE SAFE AREA: the roots pad by env(safe-area-inset-*) on all four sides. */

/* ════ the builder ════════════════════════════════════════════════════════════════════════════════════════════ */
#builder.bx:not(#h2-a):not(#h2-b) {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  direction: rtl;
}
#builder.bx.hidden:not(#h2-a):not(#h2-b) { display: none; }
#builder.bx:not(#h2-a):not(#h2-b) .sticker { width: 28px; height: 28px; flex: none; }

/* top bar: back · name+capacity · world · … · arenas · save · PLAY */
#builder.bx:not(#h2-a):not(#h2-b) .bx-top { flex: none; height: 52px; display: flex; align-items: center; gap: 8px; min-width: 0; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-back { flex: none; height: 46px; padding: 0 12px 0 14px; font-size: 16px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-name { flex: 0 1 auto; min-width: 70px; max-width: 30vw; height: 46px; padding: 2px 12px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 0; overflow: hidden; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-name b { max-width: 100%; font-size: 16px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#builder.bx:not(#h2-a):not(#h2-b) .bcap { padding: 0; background: none; font: 700 11px/1.2 system-ui, 'Arial Hebrew', sans-serif; color: var(--inksoft); white-space: nowrap; }
#builder.bx:not(#h2-a):not(#h2-b) .bcap.cap-warn { color: var(--red2); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-world { flex: none; height: 46px; padding: 0 12px 0 8px; display: flex; align-items: center; gap: 6px; font-size: 15px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-world .sticker { width: 32px; height: 32px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-sp { flex: 1; min-width: 0; }
#builder.bx:not(#h2-a):not(#h2-b) :is(.bx-lib, .bx-save) { flex: none; height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 4px; font-size: 15px; border-radius: 14px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-play { flex: none; height: 48px; min-width: 104px; padding: 0 18px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-play b { font-size: 26px; --o: 2px; }

/* body: tools (RTL start) · stage · actions */
#builder.bx:not(#h2-a):not(#h2-b) .bx-body { flex: 1; min-height: 0; display: flex; gap: 8px; direction: rtl; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-tools { flex: none; width: 128px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 84px);
  gap: 4px; align-content: center; overflow: hidden; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-acts { flex: none; width: 74px; padding: 5px; display: grid; grid-auto-rows: minmax(0, 80px); gap: 4px; align-content: center; overflow: hidden; }
#builder.bx:not(#h2-a):not(#h2-b) :is(.bx-tool, .bx-act) { min-height: 0; min-width: 0; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border-radius: 12px; border: 2.5px solid transparent; background: none; color: var(--ink); font: 700 11px/1.1 system-ui, 'Arial Hebrew', sans-serif; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-tool:active, #builder.bx:not(#h2-a):not(#h2-b) .bx-act:active { transform: scale(.94); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-tool.active { background: var(--y); border-color: var(--ink); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-tool[data-tool="eraser"].active { background: var(--red); color: var(--card); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-act:disabled { opacity: .35; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-act.on { background: var(--warm); border-color: var(--ink); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-ti { width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-ti img { width: 40px; height: 40px; object-fit: contain; margin: -3px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-ti .sticker { width: 30px; height: 30px; }
#builder.bx:not(#h2-a):not(#h2-b) :is(.bx-tool, .bx-act) b { white-space: nowrap; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-legacy { display: none; }

/* the stage: the 3D canvas or the map, plus its overlays */
#builder.bx:not(#h2-a):not(#h2-b) .bx-stage { flex: 1; min-width: 0; min-height: 0; position: relative; padding: 0; border-radius: 18px; border: 3px solid var(--ink);
  background: var(--w-apron, var(--band)); overflow: hidden; direction: ltr; }
#builder.bx.view-map:not(#h2-a):not(#h2-b) .bx-stage { overflow: auto; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-3d { position: absolute; inset: 0; touch-action: none; }
#builder.bx.view-map:not(#h2-a):not(#h2-b) .bx-3d { display: none; }
#builder.bx.view-3d:not(#h2-a):not(#h2-b) .builder-arena { visibility: hidden; }
#builder.bx.view-map:not(#h2-a):not(#h2-b) .bx-3donly { display: none; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-seg { position: absolute; top: 8px; left: 8px; z-index: 6; height: 40px; padding: 3px; display: flex; gap: 3px; border-radius: 13px; direction: rtl; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-seg button { height: 100%; padding: 0 10px 0 8px; display: flex; align-items: center; gap: 4px; border-radius: 10px; border: 2.5px solid transparent;
  font-size: 14px; color: var(--inksoft); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-seg button .sticker { width: 24px; height: 24px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-seg button.on { background: var(--red); border-color: var(--ink); color: var(--card); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-cam { position: absolute; left: 8px; bottom: 8px; z-index: 6; display: flex; gap: 6px; opacity: 1; flex-direction: row; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-cam button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 12px; font: 900 20px/1 system-ui, sans-serif; color: var(--ink); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-cam button .sticker { width: 26px; height: 26px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-toast { position: absolute; top: 8px; left: 50%; bottom: auto; transform: translateX(-50%); z-index: 7; max-width: 70%; padding: 5px 14px;
  border-radius: 12px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-toast:empty { display: none; }

/* the MAP: the pitch in its world's colours, sticker-voiced props (the DOM editor's .bel elements) */
#builder.bx:not(#h2-a):not(#h2-b) .builder-arena { background: none; box-shadow: none; border-radius: 0; height: calc(100% * var(--bz, 1)); max-width: calc(100% * var(--bz, 1)); }
#builder.bx:not(#h2-a):not(#h2-b) .builder-arena .builder-pitch { width: 96%; max-width: 96%; max-height: 94%; border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 0 4px 0 rgba(26, 18, 5, .25);
  background-color: var(--w-ground, var(--band));
  background-image: linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    repeating-linear-gradient(90deg, transparent 0 5%, var(--w-ground-hi, transparent) 5% 10%);
  background-size: 2.5% 4.5454%, 2.5% 4.5454%, 100% 100%; }
#builder.bx:not(#h2-a):not(#h2-b) :is(.bp-circle, .bp-box) { border-color: var(--w-mark, var(--card)); border-width: 2px; opacity: .9; }
#builder.bx:not(#h2-a):not(#h2-b) .bp-mid { background: var(--w-mark, var(--card)); opacity: .9; }
#builder.bx:not(#h2-a):not(#h2-b) .bp-goal { background-color: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }
#builder.bx:not(#h2-a):not(#h2-b) .bel.hard { background: var(--w-hard); border: 2px solid var(--ink); border-radius: 4px; }
#builder.bx:not(#h2-a):not(#h2-b) .bel.dry { background: repeating-linear-gradient(90deg, var(--w-dry) 0 9px, rgba(26, 18, 5, .35) 9px 10px), var(--w-dry); border: 2px solid var(--ink); border-radius: 4px; }
#builder.bx:not(#h2-a):not(#h2-b) .bel.bush { background: radial-gradient(circle at 35% 30%, var(--w-cover-hi), var(--w-cover) 70%); border: 2px solid var(--ink); border-radius: 12px; }
#builder.bx:not(#h2-a):not(#h2-b) .bel.crate { background: var(--w-crate); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .25); }
#builder.bx:not(#h2-a):not(#h2-b) .bel.crate::before, #builder.bx:not(#h2-a):not(#h2-b) .bel.crate::after { background: rgba(26, 18, 5, .45); }
#builder.bx:not(#h2-a):not(#h2-b) .bel.sel { outline: 3px solid var(--y); outline-offset: 2px; }
#builder.bx:not(#h2-a):not(#h2-b) .bel.spawn { width: 24px; height: 24px; border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--ink), 0 2px 4px rgba(26, 18, 5, .4);
  font: 900 12px/1 system-ui, sans-serif; }
#builder.bx:not(#h2-a):not(#h2-b) .bel.spawn::after { color: var(--card); }
#builder.bx:not(#h2-a):not(#h2-b) .bel.spawn.spawn-a { background: var(--tA); }
#builder.bx:not(#h2-a):not(#h2-b) .bel.spawn.spawn-b { background: var(--tB); }
/* corners: drawn so walls read as one run, but not selectable in the new game (no corner-style control here) */
#builder.bx:not(#h2-a):not(#h2-b) .bjoint { fill: var(--w-hard); stroke: var(--ink); pointer-events: none !important; }

/* symmetry popover + the settings sheet (inside the builder) */
#builder.bx:not(#h2-a):not(#h2-b) .bx-pop { position: absolute; z-index: 40; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-pop .bact { height: 42px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: 11px; background: var(--warm);
  border: 2.5px solid var(--ink); color: var(--ink); font: 700 14px system-ui, 'Arial Hebrew', sans-serif; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-glyph { font: 900 20px/1 system-ui, sans-serif; width: 22px; text-align: center; }

/* ════ sheets (builder settings, the world picker, confirm, an arena's ⋯ menu, the name input) ═══════════════ */
:is(#builder, #bx-worlds, #bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-scrim { position: absolute; inset: 0; background: var(--dim); }
:is(#bx-worlds, #bx-confirm, #bx-menu, #field-name-modal).bx-overlay:not(#h2-a):not(#h2-b) {
  position: fixed; inset: 0; z-index: 80; height: auto; background: none; display: flex; align-items: center; justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden; direction: rtl; }
:is(#bx-worlds, #bx-confirm, #bx-menu, #field-name-modal).bx-overlay.hidden:not(#h2-a):not(#h2-b) { display: none; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-sheet { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-sheet.hidden { display: none; }
:is(#builder, #bx-worlds, #bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-card { position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto;
  padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
:is(#bx-worlds):not(#h2-a):not(#h2-b) .bx-card.bx-wide { width: min(640px, 100%); }
:is(#builder, #bx-worlds, #bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-card-hd { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; height: auto; }
:is(#builder, #bx-worlds, #bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-card :is(h3, h2) { flex: 1; margin: 0; font-size: 22px; --o: 2px; color: var(--ink); text-shadow: none; }
:is(#builder, #bx-worlds, #bx-confirm, #bx-menu):not(#h2-a):not(#h2-b) .bx-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font: 900 16px system-ui, sans-serif; color: var(--ink); }
:is(#builder, #bx-confirm, #bx-menu):not(#h2-a):not(#h2-b) .bx-note { margin: 0; font: 600 13px/1.35 system-ui, 'Arial Hebrew', sans-serif; color: var(--inksoft); }
:is(#bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-card-acts { display: flex; gap: 10px; }
:is(#bx-confirm, #bx-menu, #field-name-modal):not(#h2-a):not(#h2-b) .bx-card-acts > button { flex: 1; height: 46px; font-size: 18px; border-radius: 14px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-row { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 12px; align-items: center; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-lbl { font: 800 15px system-ui, 'Arial Hebrew', sans-serif; color: var(--ink); }
#builder.bx:not(#h2-a):not(#h2-b) .bx-cycle { justify-self: start; height: 42px; padding: 0 16px; font-size: 17px; border-radius: 12px; }
#builder.bx:not(#h2-a):not(#h2-b) .bx-row .bx-note { grid-column: 1 / -1; }
#field-name-modal.bx-overlay:not(#h2-a):not(#h2-b) .bx-card { width: min(420px, 100%); height: auto; align-self: center; }
#field-name-modal.bx-overlay:not(#h2-a):not(#h2-b) .bx-input { height: 48px; padding: 0 14px; border-radius: 14px; border: 3px solid var(--ink); background: var(--card); color: var(--ink);
  font: 700 18px system-ui, 'Arial Hebrew', sans-serif; outline: none; width: 100%; }
#field-name-modal.bx-overlay:not(#h2-a):not(#h2-b) .bx-input:focus { box-shadow: 0 0 0 3px var(--y); }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-worlds-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-bottom: 6px; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard { min-width: 0; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 16px; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard .sticker { width: 52px; height: 52px; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard .bx-sw { width: 100%; height: 34px; border-radius: 10px; border: 2.5px solid var(--ink); overflow: hidden; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard .bx-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard b { font-size: 18px; color: var(--ink); text-shadow: none; }
#bx-worlds.bx-overlay:not(#h2-a):not(#h2-b) .bx-wcard.on { background: var(--y); }
#bx-menu.bx-overlay:not(#h2-a):not(#h2-b) .bx-menu-card { width: min(320px, 100%); }
#bx-menu.bx-overlay:not(#h2-a):not(#h2-b) .bx-menu-acts { display: flex; flex-direction: column; gap: 8px; }
#bx-menu.bx-overlay:not(#h2-a):not(#h2-b) .bx-menu-acts > button { height: 46px; font-size: 18px; border-radius: 14px; }
#bx-menu.bx-overlay:not(#h2-a):not(#h2-b) .bx-card h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════ the saved arenas shelf ═════════════════════════════════════════════════════════════════════════════════ */
#fields.bxf:not(#h2-a):not(#h2-b) {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  direction: rtl;
}
#fields.bxf.hidden:not(#h2-a):not(#h2-b) { display: none; }
#fields.bxf:not(#h2-a):not(#h2-b) .sticker { width: 28px; height: 28px; flex: none; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-hdr { flex: none; height: 54px; display: flex; align-items: center; gap: 12px; min-width: 0; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-hdr .back { flex: none; height: 46px; padding: 0 12px 0 14px; font-size: 16px; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-hdr h2 { margin: 0; font-size: 28px; --o: 2.2px; color: var(--ink); text-shadow: none; white-space: nowrap; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-tabs { flex: 0 1 320px; min-width: 0; height: 44px; margin: 0 auto 0 0; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-tabs button { white-space: nowrap; font-size: 15px; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-shelf { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 4px 12px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-shelf::-webkit-scrollbar { display: none; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-card { flex: none; width: clamp(196px, 29vw, 264px); max-height: 100%; padding: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; scroll-snap-align: start; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-thumb { position: relative; flex: 1 1 auto; min-height: 70px; max-height: 60%; aspect-ratio: 16 / 9; background: var(--band); border-bottom: 3px solid var(--ink); overflow: hidden; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-thumb > :is(img, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-world { position: absolute; top: 6px; right: 6px; height: 28px; padding: 0 10px 0 4px; display: flex; align-items: center; gap: 4px;
  border-radius: 14px; border: 2.5px solid var(--ink); background: var(--card); color: var(--ink); font: 800 13px system-ui, 'Arial Hebrew', sans-serif; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-world .sticker { width: 24px; height: 24px; margin: -3px 0; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-info { flex: none; padding: 6px 10px 2px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-info b { font-size: 17px; color: var(--ink); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-info small { font: 600 12px system-ui, 'Arial Hebrew', sans-serif; color: var(--inksoft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-acts { flex: none; display: flex; gap: 6px; padding: 6px 8px 10px; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-acts > button { height: 40px; border-radius: 12px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 4px; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-acts > [data-fact="play"] { flex: 1.3; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-acts > [data-fact="edit"] { flex: 1; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-acts > [data-fact="more"] { flex: none; width: 40px; font: 900 20px/1 system-ui, sans-serif; color: var(--ink); }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-new { align-items: center; justify-content: center; gap: 8px; text-align: center; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-new .bxf-plus { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; font: 900 48px/1 system-ui, sans-serif; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-new b { font-size: 22px; color: var(--ink); text-shadow: none; }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-new small { font: 600 13px system-ui, 'Arial Hebrew', sans-serif; color: var(--inksoft); }
#fields.bxf:not(#h2-a):not(#h2-b) .bxf-new[disabled] { opacity: .5; }

/* short / narrow phones: labels go, icons stay (every control keeps a ≥40 px target) */
@media (max-width: 760px) {
  #builder.bx:not(#h2-a):not(#h2-b) :is(.bx-lib) span { display: none; }
  #builder.bx:not(#h2-a):not(#h2-b) .bx-tools { width: 116px; }
  #builder.bx:not(#h2-a):not(#h2-b) .bx-acts { width: 66px; }
  #builder.bx:not(#h2-a):not(#h2-b) .bx-name { max-width: 24vw; }
  #fields.bxf:not(#h2-a):not(#h2-b) .bxf-hdr h2 { font-size: 22px; }
}
@media (max-height: 360px) {
  #builder.bx:not(#h2-a):not(#h2-b) :is(.bx-tool, .bx-act) b { display: none; }
  #builder.bx:not(#h2-a):not(#h2-b) .bx-top { height: 46px; }
  #builder.bx:not(#h2-a):not(#h2-b) :is(.bx-back, .bx-name, .bx-world) { height: 42px; }
}