/* ============================================================
   Dev panel (#devScreen, ui/dev/*) — "Forged Lantern". Scoped to #devScreen so the
   shared .devSubTabBtn / .devTabs / .devField classes keep their look on every other
   screen. Layout: a sticky action bar (menu toggle, title, Save, status, version, the
   secondary actions), a grouped section menu on the left (#devTabs, hideable; a drawer
   on phones) and #devTabContent on the right. No editor markup is rewritten: every
   field, button and id the editors (ui/dev/*.js) and the tests use is unchanged; this
   file only restyles the shared building blocks (.devField/.devRow/.devCard/.devList*
   /.devStatusTag/.levelTable/.devTagPicker/.hint...). See docs/subsystems/dev-ui.md.
   Cursors: never a bare value (CLAUDE.md §4). No backdrop-filter on scrolling content.
   ============================================================ */

/* ---------- action bar ---------- */
#devScreen .devBar{
  position: sticky; top: calc(76px / var(--ui-zoom, 1)); z-index: 20; display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 22px; border: 1px solid var(--c-line);
  background-image: var(--grain); background-color: hsl(var(--h) 16% 7% / .985); box-shadow: var(--sh-1);
}
#devScreen .devBar h1{ margin: 0; flex: 0 1 auto; font-size: 1.5rem; }
#devScreen .devBar h1 span:last-child{ font-size: .85rem; }
#devScreen .devBar button{ width: auto; flex: none; min-height: 40px; padding: 0 16px; font-size: .85rem; }
#devScreen .devSaveStatus{ font: 600 .8rem var(--f-body); color: var(--accent-hi); }
#devScreen #devVersionDisplay{ padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-dim); font-family: ui-monospace, Menlo, monospace; }
#devScreen #devSaveBtn{ background: var(--accent); border-color: var(--accent-hi); color: var(--accent-ink, #10140f); }
#devScreen #devSaveBtn:hover{ background: var(--accent-hi); }
#devScreen .devActs{ margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#devScreen #devResetDesignDataBtn{ border-color: var(--c-danger); color: var(--c-danger); background: transparent; }
#devScreen #devToggleSelectionBtn.active{ border-color: var(--accent-hi); color: var(--accent-hi); }
#devScreen .devMoreBtn, #devScreen .devSectionBtn, #devScreen .devDock, #devScreen .devScrim{ display: none; }
#devScreen .devUnsavedBanner{
  margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--accent); background: hsl(var(--h) 40% 40% / .16);
  color: var(--c-text); font: 500 .88rem/1.45 var(--f-body); cursor: var(--cur-click, pointer);
}

/* ---------- shell: section menu + content ---------- */
#devScreen .devShell{ display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
#devScreen .devShell.collapsed{ grid-template-columns: minmax(0, 1fr); }
#devScreen .devShell.collapsed .devNav{ display: none; }
#devScreen .devMain{ min-width: 0; }
#devScreen .devNav{
  position: sticky; top: calc(150px / var(--ui-zoom, 1)); max-height: calc((100vh - 170px) / var(--ui-zoom, 1)); overflow: auto; padding: 8px;
  border-radius: 22px; border: 1px solid var(--c-line); background-image: var(--grain); background-color: hsl(var(--h) 16% 8% / .96);
  display: flex; flex-direction: column; gap: 0; margin: 0; border-bottom: 1px solid var(--c-line);
}
#devScreen .devNavGroup{ display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
#devScreen .devNavGroup + .devNavGroup{ border-top: 1px solid var(--c-line); }
#devScreen .devNavGroup h3{ margin: 0; padding: 6px 12px; font: 600 .68rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .devNav .devTabBtn{
  width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; box-shadow: none;
  text-align: left; justify-content: flex-start; font: 500 .92rem var(--f-body); color: var(--c-dim);
}
#devScreen .devNav .devTabBtn:hover{ background: hsl(var(--h) 24% 96% / .06); color: var(--c-text); }
#devScreen .devNav .devTabBtn.active{ background: hsl(var(--h) 30% 92% / .1); color: var(--accent-hi); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 70% / .28); }

/* ---------- sub-tab rows inside the editors (.devTabs with .devSubTabBtn / .devTabBtn) ---------- */
#devTabContent .devTabs, #devTabContent .devSubNav{
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin: 0 0 14px; border-radius: 999px; border: 1px solid var(--c-line);
  background-image: var(--grain); background-color: hsl(var(--h) 16% 8% / .96); box-shadow: var(--sh-1);
}
#devTabContent .devTabs .devTabBtn, #devTabContent .devTabs .devSubTabBtn, #devTabContent .devSubNav .devTabBtn{
  width: auto; flex: none; min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: none; box-shadow: none;
  font: 600 .88rem var(--f-body); color: var(--c-dim);
}
#devTabContent .devTabs .active, #devTabContent .devSubNav .active{ background: hsl(var(--h) 30% 92% / .1); color: var(--accent-hi); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 70% / .3); }
#devTabContent .devTabs button:hover, #devTabContent .devSubNav button:hover{ color: var(--c-text); }

/* ---------- fields ---------- */
#devScreen .devField{ margin: 0 0 14px; min-width: 0; }
#devScreen .devField > label{ display: block; margin: 0 0 6px; font: 600 .7rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .devField input[type="text"], #devScreen .devField input[type="number"], #devScreen .devField input:not([type]),
#devScreen .devField textarea, #devScreen .devField select, #devScreen select, #devScreen .devFilterRow input, #devScreen .devPickFilters input{
  width: 100%; min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%));
  color: var(--c-text); font: 500 .95rem var(--f-body); box-sizing: border-box;
}
#devScreen .devField textarea{ padding: 10px 12px; min-height: 84px; line-height: 1.5; resize: vertical; }
#devScreen select{
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: var(--cur-click, pointer);
  background-image: linear-gradient(45deg, transparent 50%, var(--c-dim) 50%), linear-gradient(135deg, var(--c-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat;
}
#devScreen input:hover, #devScreen select:hover, #devScreen textarea:hover{ border-color: hsl(var(--h) 30% 40%); }
#devScreen input:focus, #devScreen select:focus, #devScreen textarea:focus{ outline: none; border-color: var(--accent-hi); box-shadow: 0 0 0 3px hsl(var(--h) 60% 60% / .22); }
#devScreen input[type="checkbox"], #devScreen input[type="radio"]{ accent-color: var(--accent); width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
#devScreen .devRow{ display: flex; flex-wrap: wrap; gap: 0 16px; }
#devScreen .devRow > .devField{ flex: 1 1 180px; min-width: 140px; }
#devScreen .devFilterRow{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
#devScreen .devFilterRow select, #devScreen .devFilterRow input{ flex: 1 1 150px; min-width: 0; }
#devScreen .hint{ border: 0; padding: 0; color: var(--c-dim); font: 400 .85rem/1.5 var(--f-body); }
#devScreen code{ font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: var(--accent-hi); }

/* ---------- buttons inside the editors ---------- */
#devTabContent button{ width: auto; flex: none; min-height: 40px; padding: 0 16px; font-size: .85rem; }
#devTabContent button.delBtn, #devTabContent button.danger{ min-height: 36px; }
#devTabContent button[style*="width:100%"]{ width: 100%; }

/* ---------- cards ---------- */
#devScreen .devCard, #devTabContent .panel{
  margin: 0 0 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--c-line);
  background-image: var(--grain), var(--glass-bg); background-color: var(--glass-fill); box-shadow: var(--sh-1);
}
#devScreen .devCardHead{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
#devScreen .devCardHead h3, #devTabContent .panel > h2{ margin: 0; font: 600 1.1rem var(--f-display); color: var(--c-text); }
#devTabContent .panel > h2{ font-size: 1.3rem; margin-bottom: 8px; }
#devScreen .devNotice{ margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--c-line); color: var(--c-dim); font-size: .85rem; }
#devScreen .devNotice.ok{ color: var(--accent-hi); border-color: var(--accent); }
#devScreen .statusRejectMsg{ margin-top: 6px; color: var(--c-danger, #e0624e); font-size: .8rem; }

/* ---------- lists ---------- */
#devScreen .devList{ display: flex; flex-direction: column; gap: 6px; max-height: none; overflow: visible; padding: 0; margin: 0 0 14px; }
#devScreen .devListItem{
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--c-line);
  background-image: var(--grain); background-color: hsl(var(--h) 16% 8% / .82); text-align: left; font: 500 .95rem var(--f-body); color: var(--c-text);
  cursor: var(--cur-click, pointer);
}
#devScreen .devListItem:hover{ border-color: var(--accent); background-color: hsl(var(--h) 22% 11% / .9); }
#devScreen .devListItem.active{ border-color: var(--accent-hi); background-color: hsl(var(--h) 30% 92% / .08); }
/* grid-template: a definite cell, so a unit portrait (.pfFrame, size-contained: it has no size of its own) fills it instead of collapsing to 0 wide. */
#devScreen .devListItem .dl-icon{ flex: none; display: grid; grid-template: 100% / 100%; place-items: center; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: var(--c-surface, hsl(var(--h) 16% 11%)); }
#devScreen .devListItem .dl-name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--c-text); }
#devScreen .devListItem .dl-sub{ display: block; font: 500 .78rem var(--f-body); color: var(--c-dim); white-space: normal; }
#devScreen .devListItem .dl-tags{ display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
#devScreen .devStatusTag, #devScreen .dl-tag{
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid currentColor;
  font: 600 .66rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: transparent;
}
#devScreen .devStatusTag.live{ color: hsl(145 52% 58%); }
#devScreen .devStatusTag.onwork{ color: hsl(38 80% 62%); }
#devScreen .devStatusTag.toadd{ color: hsl(8 72% 64%); }
#devScreen .devStatusTag.reworkinprocess{ color: hsl(275 60% 74%); }
#devScreen .devStatusTag.reworkdone{ color: hsl(205 70% 68%); }
#devScreen .devStatusTag.removefromlive{ color: var(--c-dim); text-decoration: line-through; }

/* ---------- pickers, tables ---------- */
#devScreen .devTagPicker{ display: flex; flex-wrap: wrap; gap: 8px; }
#devScreen .devTagPicker.collapsed{ display: none; }
#devScreen .devTagPicker label{
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-line);
  background: hsl(var(--h) 16% 8% / .8); color: var(--c-text); font: 500 .85rem var(--f-body); text-transform: none; letter-spacing: 0; cursor: var(--cur-click, pointer);
}
#devScreen .devPassiveCatHeader{ cursor: var(--cur-click, pointer); }
#devScreen .levelTableScroll{ border: 1px solid var(--c-line); border-radius: 14px; padding: 6px 8px; background: hsl(var(--h) 16% 7% / .6); }
#devScreen .levelTable{ font-size: .8rem; }
#devScreen .levelTable th{ color: var(--c-dim); font: 600 .7rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; }
#devScreen .levelTable td.rowLabel{ color: var(--c-text); font: 500 .85rem var(--f-body); padding-right: 12px; }
#devScreen .levelTable input{ min-height: 32px; width: 64px; padding: 0 6px; text-align: center; border-radius: 9px; font-size: .85rem; }
#devScreen table{ border-collapse: collapse; }

/* ---------- Units editor: collapsible sections, grids, slots ---------- */
#devScreen .devSec{
  margin: 0 0 14px; border-radius: 20px; border: 1px solid var(--c-line);
  background-image: var(--grain), var(--glass-bg); background-color: var(--glass-fill); box-shadow: var(--sh-1);
}
#devScreen .devSecHead{
  display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border: 0; background: transparent; text-align: left;
  color: var(--c-text); cursor: var(--cur-click, pointer); border-radius: 20px;
}
#devScreen .devSecHead h3{ margin: 0; font: 600 1.1rem var(--f-display); color: var(--c-text); }
#devScreen .devSecHead:hover h3{ color: var(--accent-hi); }
#devScreen .devSecCaret{ display: inline-block; font-size: .8rem; color: var(--c-dim); transition: transform .15s; }
#devScreen .devSec.closed .devSecCaret{ transform: rotate(-90deg); }
#devScreen .devSecNote{ margin-left: auto; font: 500 .74rem var(--f-body); color: var(--c-dim); text-align: right; }
#devScreen .devSecBody{ padding: 0 18px 16px; }
#devScreen .devSec.closed > .devSecBody{ display: none; }
#devScreen .devSpacer{ flex: 1 1 auto; }
#devScreen .devHintLine{ border: none; padding: 0; margin: 8px 0 6px; font-size: .74rem; }
#devScreen .devSubHead{ margin: 16px 0 4px; font: 600 .95rem var(--f-body); color: var(--accent-hi); }
#devScreen .devSubHead:first-child{ margin-top: 2px; }

#devScreen .devGrid{ display: grid; gap: 12px 14px; align-items: start; }
#devScreen .devGrid .devField{ min-width: 0; max-width: none; margin: 0; }
#devScreen .devIdentGrid{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
#devScreen .devIdentGrid .gIcon{ grid-column: span 1; }
#devScreen .devIdentGrid .gName{ grid-column: span 5; }
#devScreen .devIdentGrid .gType, #devScreen .devIdentGrid .gStatus{ grid-column: span 3; }
#devScreen .devIdentGrid > .devField:not(.gIcon):not(.gName):not(.gType):not(.gStatus):not(.gClasses){ grid-column: span 3; }
#devScreen .devIdentGrid .gClasses{ grid-column: 1 / -1; }
#devScreen .devTextGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
#devScreen .devTextGrid textarea{ min-height: 150px; }
#devScreen .devCombatGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
#devScreen select.stSel{ font-weight: 600; border-color: currentColor; }
#devScreen select.stSel.live{ color: hsl(145 52% 58%); }
#devScreen select.stSel.onwork{ color: hsl(38 80% 62%); }
#devScreen select.stSel.toadd{ color: hsl(8 72% 64%); }
#devScreen select.stSel.reworkinprocess{ color: hsl(275 60% 74%); }
#devScreen select.stSel.reworkdone{ color: hsl(205 70% 68%); }
#devScreen select.stSel.removefromlive{ color: var(--c-dim); }
#devScreen select.stSel option{ color: var(--c-text); }

#devScreen .devArtGrid{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
#devScreen .devArtFields{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 14px; max-width: 640px; }
#devScreen .devArtPreview{ display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
#devScreen .devPrevLabel{ border: none; padding: 0; font-size: .68rem; margin-bottom: 4px; }
/* Art crop editors (ui/dev/crop-editor.js): the whole picture, the frame shades the rest */
#devScreen .devCrop{ margin: 6px 0 4px; }
#devScreen .devCropStage{ position: relative; display: inline-block; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-line); user-select: none; }
#devScreen .devCrop-portrait .devCropStage{ width: 220px; }
#devScreen .devCrop-card .devCropStage{ width: 180px; }
#devScreen .devCropImg{ display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
#devScreen .devCropRect{ position: absolute; outline: 2000px solid rgba(0,0,0,.55); box-shadow: inset 0 0 0 2px #fff; cursor: var(--cur-grab, grab); touch-action: none; }
#devScreen .devCropRect:active{ cursor: var(--cur-grabbing, grabbing); }
#devScreen .devCropHandle{ position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); cursor: nwse-resize; touch-action: none; }
#devScreen .devCropBtns{ margin-top: 6px; line-height: normal; }
#devScreen .devPortraitBox{ width: 72px; height: 72px; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; }
#devScreen .devCardBox{ width: 120px; }
#devScreen .devPortraitBox .heroPortrait{ width: 96px; height: 96px; }
#devScreen .devPortraitBox{ width: 100px; height: 100px; }
/* the 3 shapes a portrait takes (hex token, round avatar, square tile with its badge and name — Home's
   roster tile, the same classes), so a face point is checked everywhere at once */
#devScreen .devSquareBox{ width: 130px; }
#devScreen .devSquareBox .rosterCard{ cursor: var(--cur-normal, default); }
#devScreen .devSquareBox .rosterCard:hover{ transform: none; }

#devScreen .devSlotGrid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#devScreen .devSlotGrid .devCard{ margin: 0; }
#devScreen .slotPick{ display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
#devScreen .slotPick .slotItemHost{ flex: 1 1 200px; min-width: 0; }
#devScreen .slotPick .slotItemHost .devField{ max-width: 320px !important; }

#devScreen .levelTable td.rowActs{ white-space: nowrap; padding-left: 10px; text-align: left; }
#devScreen .levelTable td.rowActs button{ min-height: 32px; min-width: 36px; padding: 0 8px; font-size: .9rem; margin-right: 4px; }
#devScreen .levelTable td.rowLabel{ white-space: normal; max-width: 200px; min-width: 110px; }
#devScreen .levelTable td.rowActs button:disabled{ opacity: .4; cursor: var(--cur-normal, default); }

/* ---------- phones: drawer menu, section button, actions fold, bottom Save dock ---------- */
@media (max-width: 900px){
  #devScreen .devBar{ position: static; border-radius: 18px; }
  #devScreen .devBar h1 span:last-child{ display: none; }
  #devScreen #devSaveBtn{ display: none; }
  #devScreen .devMoreBtn{ display: inline-flex; margin-left: auto; }
  #devScreen .devActs{ display: none; margin-left: 0; width: 100%; }
  #devScreen .devActs.open{ display: flex; }
  #devScreen .devActs button{ flex: 1 1 auto; }
  #devScreen .devShell, #devScreen .devShell.collapsed{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .devShell.collapsed .devNav{ display: flex; }
  #devScreen .devNav{
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; width: min(300px, 86vw); max-height: none; border-radius: 0 22px 22px 0;
    transform: translateX(-105%); transition: transform .22s; background-color: hsl(var(--h) 18% 8%);
  }
  #devScreen .devNav.open{ transform: none; }
  #devScreen .devScrim.open{ display: block; position: fixed; inset: 0; z-index: 80; background: hsl(var(--h) 25% 3% / .66); }
  #devScreen .devSectionBtn{ display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 0 0 12px; min-height: 46px; padding: 0 16px; }
  #devScreen .devDock{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: hsl(var(--h) 16% 8% / .98); border-top: 1px solid var(--c-line);
  }
  #devScreen .devDock button{ width: 100%; min-height: 46px; }
  #devScreen{ padding-bottom: 76px; }
  #devScreen .devRow > .devField{ flex-basis: 100%; }
  #devScreen .devIdentGrid{ grid-template-columns: 70px minmax(0, 1fr); }
  #devScreen .devIdentGrid .gName{ grid-column: 2; }
  #devScreen .devIdentGrid > .devField:not(.gIcon):not(.gName){ grid-column: 1 / -1; }
  #devScreen .devTextGrid, #devScreen .devCombatGrid{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .devArtGrid{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .devSecNote{ display: none; }
  #devScreen .devSecHead{ min-height: 52px; }
}
@media (prefers-reduced-motion: reduce){ #devScreen .devNav{ transition: none; } }
#devTabContent > h3, #devTabContent .devEdit > h3, #devTabContent h3:not(.devCardHead h3){ margin: 14px 0 8px; font: 600 1.1rem var(--f-display); color: var(--c-text); }
#devScreen .devGrid3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){ #devScreen .devGrid3{ grid-template-columns: minmax(0, 1fr); } }
#devScreen .devGrid4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
#devScreen .devIdentGrid.noType .gName{ grid-column: span 8; }
#devScreen .devRow2{ display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; margin-top: 10px; }
#devScreen .devRow2 > .devField{ margin: 0; flex: 0 1 auto; }
@media (max-width: 900px){
  #devScreen .devGrid4{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .devIdentGrid.noType .gName{ grid-column: 2; }
}
#devScreen .devUsedBy{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; }
#devScreen .devHeroChip{
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--c-line);
  background: hsl(var(--h) 16% 9% / .8); color: var(--c-text); font: 500 .85rem var(--f-body); cursor: var(--cur-click, pointer); touch-action: none;
  -webkit-user-select: none; user-select: none;
}
#devScreen .devHeroChip:hover, #devScreen .devHeroChip.held{ border-color: var(--accent); }
#devScreen .devHeroChipArt{ display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; font-size: 1rem; }
#devScreen .devHeroChipArt img{ width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
#devScreen .devArtStatus{ margin-top: 6px; font-size: .78rem; color: var(--c-dim); }
#devScreen .devArtStatus.ok{ color: hsl(145 52% 58%); }
#devScreen .devItemArtBox{ border: 1px dashed var(--c-line); border-radius: 14px; color: var(--c-dim); }
#devScreen .devOrderBtns{ display: flex; gap: 8px; }
#devScreen .devOrderBtns button{ min-height: 44px; min-width: 44px; padding: 0; font-size: 1.1rem; }
#devScreen .devOrderBtns button:disabled{ opacity: .4; cursor: var(--cur-normal, default); }
#devScreen .devUnitTop{ flex-wrap: wrap; gap: 10px 10px; }
@media (max-width: 900px){ #devScreen .devUnitTop .devSpacer{ flex-basis: 100%; height: 0; } }
/* Classification tab */
#devScreen .clGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
#devScreen .clGrid.one{ grid-template-columns: minmax(0, 1fr); }
#devScreen .clRow{ display: flex; align-items: center; gap: 8px; }
#devScreen .clRow input[type="text"]{ flex: 1 1 auto; min-width: 0; }
#devScreen .clRow .delBtn{ flex: none; min-width: 44px; }
#devScreen .clClassRow{ padding: 6px 10px; border-radius: 16px; border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .6); }
#devScreen .clClassRow input.clsIcon[type="text"]{ flex: 0 0 76px; text-align: center; }
#devScreen .clClassRow .devOrderBtns{ flex: none; }
#devScreen .clRaceHead{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#devScreen .clDmgGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
@media (max-width: 900px){ #devScreen .clRaceHead{ grid-template-columns: minmax(0, 1fr); } }
#devScreen .clUsed{ flex: none; min-width: 90px; text-align: right; color: var(--c-dim); font: 500 .8rem var(--f-body); }
#devScreen .clDelSpacer{ flex: none; min-width: 44px; }
/* Text entries in the Classification lists (classes, sub-classes, item classes): same comfortable height as the other fields */
#devScreen .clRow input[type="text"]{
  min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%));
  color: var(--c-text); font: 500 .95rem var(--f-body); box-sizing: border-box;
}
#devScreen .clRow input[type="text"]:disabled{ opacity: .6; }
/* Fields side by side line up on their inputs (a label that wraps to 2 lines no longer pushes its box down). */
#devScreen .devRow{ align-items: flex-end; }
#devScreen .devRow.devMechRow{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; align-items: end; }
#devScreen .devRow.devMechRow > .devField{ max-width: none !important; }
/* Classification rows on phones: the name gets its own full-width line, buttons and count wrap underneath. */
@media (max-width: 900px){
  #devScreen .clClassRow{ flex-wrap: wrap; row-gap: 8px; }
  #devScreen .clClassRow .clsName{ order: -1; flex: 1 1 100%; }
  #devScreen .clClassRow:has(.clsIcon) .clsName{ flex: 1 1 calc(100% - 92px); }
  #devScreen .clClassRow .clsIcon{ order: -2; flex: 0 0 76px; }
  #devScreen .clClassRow .clUsed{ margin-left: auto; min-width: 0; }
  #devScreen .clClassRow .delBtn{ margin-left: 0; }
  #devScreen .clGrid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px){
  #devScreen .clClassRow{ padding: 6px 8px; column-gap: 6px; }
  #devScreen .clClassRow .devOrderBtns{ gap: 6px; }
  #devScreen .clClassRow .devOrderBtns button{ min-width: 40px; min-height: 44px; }
  #devScreen .clClassRow .clUsed{ flex: 1 1 auto; text-align: right; font-size: .74rem; }
  #devScreen .clClassRow .delBtn{ min-width: 0; padding: 0 12px; }
  #devScreen .clClassRow .clDelSpacer{ display: none; }
}
/* Phones: win horizontal space — almost no outer gutter, tighter padding inside the containers. */
@media (max-width: 900px){
  #devScreen.wrap, #devScreen{ padding-left: 4px; padding-right: 4px; }
  #devScreen .devBar{ padding-left: 10px; padding-right: 10px; }
  #devScreen .devSec, #devScreen .devCard, #devTabContent .panel{ border-radius: 16px; }
  #devScreen .devSecHead{ padding: 0 12px; }
  #devScreen .devSecBody{ padding: 0 10px 12px; }
  #devScreen .devCard, #devTabContent .panel{ padding: 10px 10px; margin-bottom: 10px; }
  #devScreen .devSec .devCard{ padding: 10px 8px; }
  #devScreen .levelTableScroll{ padding: 4px 4px; }
  #devScreen .devNotice{ padding: 8px 10px; }
}
/* Phones: a list row takes two lines — icon, full name and status on the first, the tags on the second. */
@media (max-width: 900px){
  #devScreen .devListItem{ flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  #devScreen .devListItem .dl-name{ flex: 1 1 0; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  #devScreen .devListItem .dl-tags{ order: 5; flex: 1 1 100%; justify-content: flex-start; padding-left: 52px; }
}

/* Game Modes: the shared rule/map/escalation cards sit flat inside their section (the section title replaces the card heading where it would only repeat it). */
#devGameModeDetailView .devSecBody > .devCard, #devDungeonDetailView .devSecBody > .devCard, #devRoomDetailView .devSecBody > .devCard{ margin-top: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; }
#devGameModeDetailView .devSec[data-sec="rules"] .devCardHead,
#devGameModeDetailView .devSec[data-sec="maps"] .devCardHead,
#devDungeonDetailView .devSec[data-sec="rules"] .devCardHead,
#devRoomDetailView .devSec[data-sec="maps"] .devCardHead{ display: none; }
/* Raising summons: one card per entry, fields on a grid so it reads on phones too. */
#devScreen .gmEntry{ border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 14px; padding: 10px; margin-top: 10px; }
#devScreen .gmEntryHead{ display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
#devScreen .gmEntryHead .devField{ margin-bottom: 0; }
#devScreen .gmEntryHead .gmU{ flex: 0 1 280px; min-width: 150px; }
#devScreen .gmEntryHead .gmN{ flex: 0 1 90px; min-width: 70px; }
#devScreen .gmEntryHead .gmEntryRemove{ margin: 0 0 0 auto; }
#devScreen .gmEntryTitle{ font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#devScreen .gmEntryRemove{ flex: none; min-width: 44px; min-height: 44px; }
#devScreen .gmEntryGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px){
  #devScreen .gmEntryGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #devScreen .gmEntryHead .gmU{ flex: 1 1 calc(100% - 138px); min-width: 0; }
  #devScreen .gmEntryHead .gmN{ flex: 1 1 80px; min-width: 80px; order: 2; }
  #devScreen .gmEntryHead .gmEntryRemove{ order: 1; }
  #devScreen .gmEntryHead > span:not(.gmEntryPortrait){ order: 3; }
}
#devScreen .gmEntryPortrait{ flex: none; width: 64px; height: 64px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--line, rgba(255,255,255,.2)); background: rgba(0,0,0,.3); display: grid; place-items: center; font-size: 1.6rem; touch-action: manipulation; }
#devScreen .gmEntryPortrait img{ width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
#devScreen .devTagPicker .mapPeek{ flex: none; min-width: 44px; min-height: 44px; margin: -8px -10px -8px 4px; padding: 0 8px; background: none; border: 0; border-radius: 999px; font-size: 1rem; line-height: 1; touch-action: manipulation; cursor: var(--cur-click, pointer); }

/* PVE Rewards: hint text, sub-headings, 5-column XP curve grid, 2-up number pairs on phones. */
#devScreen .devSecHint{ margin: 0 0 12px; font-size: .78rem; line-height: 1.5; color: var(--c-dim, var(--parchment-dim)); }
#devScreen .xpDiffCard + .xpDiffCard{ margin-top: 14px; }
#devScreen .devGrid5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px){
  #devScreen .devGrid5, #devScreen .devGrid4.devGridPair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Number grids: fields whose labels wrap onto 2 lines keep their inputs on one common line. */
#devScreen .devGrid5, #devScreen .devGrid4.devGridPair{ align-items: end; }

/* PVP AI Teams: identity with portrait, roster slots, participation checkboxes. */
#devScreen .aitIdent{ display: flex; align-items: flex-end; gap: 14px; }
#devScreen .aitIdent .gmEntryPortrait{ width: 72px; height: 72px; }
#devScreen .aitIdentGrid{ flex: 1 1 auto; min-width: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
#devScreen .devCheck{ display: flex; align-items: center; gap: 10px; min-height: 44px; }
#devScreen .devCheck input{ width: 22px; height: 22px; flex: none; }
#devScreen .aitSlot{ display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }
#devScreen .aitSlot .aitSlotHero{ flex: 1 1 auto; min-width: 0; margin: 0; }
#devScreen .aitSlot .aitSlotLvl{ flex: 0 0 90px; margin: 0; }
@media (max-width: 900px){
  #devScreen .aitIdent{ flex-wrap: wrap; align-items: flex-start; }
  #devScreen .aitIdentGrid{ grid-template-columns: minmax(0, 1fr); flex: 1 1 180px; }
}
/* AI Teams round two: bigger list portraits, neutral portrait cards, participation on one line. */
#devAiTeamsList .devListItem{ min-height: 72px; }
#devScreen .devListItem .dl-icon.aitListPortrait{ width: 56px; height: 56px; flex: none; border-radius: 50%; }
#devScreen .aitListPortrait .heroPortrait, #devScreen .aitListPortrait img:not(.pfImg){ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; }
#devScreen .devPortraitGrid .collectionCard{ background: hsl(var(--h) 14% 9% / .85); border-color: hsl(var(--h) 18% 90% / .14); }
#devScreen .devPortraitGrid .collectionCard:hover{ border-color: var(--accent); }
#devScreen .aitPartRow{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 32px; }
#devScreen .aitPartMode{ flex: 0 1 260px; min-width: 200px; margin: 0; }
/* The global .heroPortrait gold ring is drawn OUTSIDE the image; inside these clipped round buttons/icons it was cut at the edge, so it only showed as a faint, image-dependent fringe on some portraits. They draw their own border instead, so every portrait looks the same. */
#devScreen .gmEntryPortrait .heroPortrait, #devScreen .aitListPortrait .heroPortrait{ box-shadow: none; border-radius: 0; }

/* Dungeons: ordered room rows and hero-level requirement rows. */
#devScreen .dzRoomRow .ghost{ min-width: 44px; min-height: 44px; padding: 0 10px; }
#devScreen .dzRoomRow .gmEntryPortrait{ width: 48px; height: 48px; }
#devScreen .dzLvlLabel{ display: flex; align-items: center; gap: 8px; font-size: .8rem; white-space: nowrap; }
#devScreen .dzLvlLabel input{ width: 72px; }
#devScreen .devSubLabel{ display: block; margin-bottom: 4px; font: 600 .75rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .gmEntryTitle small{ display: block; font-weight: 500; font-size: .72rem; color: var(--c-dim); }
#devScreen .dgAddUnit{ grid-column: span 2; }
@media (max-width: 900px){
  #devScreen .gmEntryHead .gmEntryTitle{ flex: 1 1 0; min-width: 0; }
}
#devScreen .dgEntry .gmEntryHead{ align-items: center; }
#devScreen .gmEntryGrid.dgEntryGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px){ #devScreen .gmEntryGrid.dgEntryGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pastilles (chips) and collapsible, filterable pickers. */
#devScreen .chip{ display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid hsl(var(--h) 18% 90% / .16); background: hsl(var(--h) 14% 12% / .9); color: var(--c-text); font: 600 .74rem var(--f-body); white-space: nowrap; }
#devScreen .chip.dim{ color: var(--c-dim); font-weight: 500; }
#devScreen .dgRoomChips{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
#devScreen .dgRoomListRow .dl-name{ flex: 0 1 auto; }
#devScreen .devIdentGrid.noIcon .gName{ grid-column: span 9; }
@media (max-width: 900px){ #devScreen .devIdentGrid.noIcon{ grid-template-columns: minmax(0, 1fr); } #devScreen .devIdentGrid.noIcon .gName{ grid-column: 1 / -1; } }
#devScreen .devPick{ border: 1px solid hsl(var(--h) 18% 90% / .12); border-radius: 14px; margin-top: 10px; background: hsl(var(--h) 14% 9% / .5); }
#devScreen .devPickHead{ display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; background: none; border: 0; color: var(--c-text); font: 600 .85rem var(--f-body); text-align: left; cursor: var(--cur-click, pointer); }
#devScreen .devPickCaret{ display: inline-block; transition: transform .15s; transform: rotate(-90deg); color: var(--c-dim); }
#devScreen .devPick.open .devPickCaret{ transform: none; }
#devScreen .devPickCount{ margin-left: auto; font-weight: 500; font-size: .75rem; color: var(--c-dim); }
#devScreen .devPickSummary{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
#devScreen .devPickSummary:empty{ display: none; }
#devScreen .devPick.open .devPickSummary{ display: none; }
#devScreen .devPickBody{ display: none; padding: 0 12px 12px; }
#devScreen .devPick.open .devPickBody{ display: block; }
#devScreen .devPickFilters{ display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
#devScreen .devPick .devTagPicker{ max-height: 360px; overflow-y: auto; padding: 2px; }
#devScreen .devPick .devTagPicker label[hidden]{ display: none; }
@media (max-width: 900px){ #devScreen .devPickFilters{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #devScreen .devPickSearch{ grid-column: 1 / -1; } }
/* Dungeon card image: the file field on the left, a larger preview on the right (stacked on phones). */
#devScreen .dzArtRow{ display: flex; gap: 18px; align-items: flex-start; }
#devScreen .dzArtField{ flex: 1 1 auto; min-width: 0; }
#devScreen .dzArtPreview{ flex: 0 0 240px; margin: 0; }
#devScreen .dzArtImg{ display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 14px; border: 1px solid hsl(var(--h) 18% 90% / .14); }
@media (max-width: 900px){ #devScreen .dzArtRow{ flex-direction: column; } #devScreen .dzArtPreview{ flex: none; width: 100%; } }

/* Maps / Interfaces / Pointers editors. */
#devScreen .devIdentGrid.noStatus .gName{ grid-column: span 11; }
@media (max-width: 900px){ #devScreen .devIdentGrid.noStatus .gName{ grid-column: 2; } }
#devMapDetailView .devUsedBy .chip small{ margin-left: 6px; color: var(--c-dim); font-weight: 500; }
#devScreen .ptrDetailStates{ max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#devScreen .ptrDetailStates figure{ padding: 12px 8px; border: 1px solid hsl(var(--h) 18% 90% / .12); border-radius: 14px; }
#devScreen .ptrDetailStates figcaption{ font: 600 .72rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .ptrDetailStates img{ width: 72px; height: 72px; }
#devScreen .ptrHot{ display: flex; gap: 8px; width: 100%; }
#devScreen .ptrHot label{ flex: 1 1 0; display: flex; align-items: center; gap: 6px; font: 600 .75rem var(--f-body); color: var(--c-dim); text-transform: none; letter-spacing: 0; }
#devScreen .ptrHot input{ width: 100%; min-width: 0; min-height: 40px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%)); color: var(--c-text); text-align: center; }
@media (max-width: 900px){ #devScreen .ptrDetailStates{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#devScreen .devField input[type="color"]{ width: 100%; min-height: 42px; padding: 4px; border-radius: 11px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%)); box-sizing: border-box; }

/* ============================================================
   Animations tab — the preview bench restyled with the design-system tokens
   (it is styled by legacy .aLab* rules in index.html; these win inside #devScreen).
   ============================================================ */
#devScreen .aLabNav{ gap: 8px; border-bottom: 0; padding-bottom: 0; }
#devScreen .aLabNavBtn{ min-height: 44px; padding: 0 18px; font: 600 .85rem var(--f-body); border-radius: 999px; border: 1px solid var(--c-line); background: transparent; color: var(--c-dim); }
#devScreen .aLabNavBtn:hover{ border-color: var(--accent); color: var(--c-text); }
#devScreen .aLabNavBtn[aria-selected="true"]{ background: hsl(var(--h) 40% 30% / .55); border-color: var(--accent-hi); color: var(--c-text); }
#devScreen .aLabPanel{ border: 1px solid hsl(var(--h) 18% 90% / .12); border-radius: 18px; background: hsl(var(--h) 14% 9% / .72); padding: 14px 16px; }
#devScreen .aLabBarPanel{ background: hsl(var(--h) 14% 9% / .96); border-radius: 18px; gap: 10px 18px; }
#devScreen .aLabPlay{ min-height: 44px; padding: 0 26px; border-radius: 999px; background: var(--accent); color: hsl(var(--h) 30% 8%); font: 700 .9rem var(--f-body); }
#devScreen .aLabPlay:hover{ background: var(--accent-hi); }
#devScreen .aLabSeg{ border-radius: 999px; border-color: var(--c-line); }
#devScreen .aLabSeg button{ min-height: 44px; padding: 0 14px; font: 600 .8rem var(--f-body); color: var(--c-dim); }
#devScreen .aLabSeg button[aria-pressed="true"]{ background: hsl(var(--h) 40% 30% / .55); color: var(--c-text); }
#devScreen .aLabToggle{ min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-line); font: 600 .8rem var(--f-body); color: var(--c-dim); background: transparent; }
#devScreen .aLabToggle[aria-pressed="true"]{ border-color: var(--accent-hi); color: var(--c-text); background: hsl(var(--h) 40% 30% / .4); }
#devScreen .aLabGroup > span, #devScreen .aLabField > span, #devScreen .aLabGroupTitle{ font: 600 .7rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .aLabChips{ gap: 8px; }
#devScreen .aLabChipBtn{ min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--c-line); background: hsl(var(--h) 14% 12% / .8); color: var(--c-text); font: 500 .85rem var(--f-body); }
#devScreen .aLabChipBtn small{ font-size: .62rem; color: var(--c-dim); }
#devScreen .aLabChipBtn:hover{ border-color: var(--accent); }
#devScreen .aLabChipBtn[aria-pressed="true"]{ border-color: var(--accent-hi); background: hsl(var(--h) 40% 30% / .5); color: var(--c-text); font-weight: 600; }
#devScreen .aLabLibItem{ min-height: 48px; border-radius: 12px; border: 1px solid var(--c-line); background: hsl(var(--h) 14% 12% / .8); color: var(--c-text); }
#devScreen .aLabLibItem small{ color: var(--c-dim); }
#devScreen .aLabLibItem:hover{ border-color: var(--accent); }
#devScreen .aLabLibItem[aria-pressed="true"]{ border-color: var(--accent-hi); background: hsl(var(--h) 40% 30% / .5); color: var(--c-text); }
#devScreen .aLabField select, #devScreen .aLabRow select{ min-height: 42px; padding: 0 34px 0 12px; border-radius: 11px; border: 1px solid var(--c-line); background-color: var(--c-surface, hsl(var(--h) 16% 11%)); color: var(--c-text); font: 500 .9rem var(--f-body); }
#devScreen .aLabField input[type="search"], #devScreen .aLabHsCard input[type="number"], #devScreen .aLabForm input[type="number"], #devScreen .aLabPaceRow input[type="number"]{ min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%)); color: var(--c-text); font: 500 .9rem var(--f-body); box-sizing: border-box; width: 100%; }
#devScreen .aLabPaceRow input[type="number"]{ width: 96px; text-align: right; color: var(--accent-hi); }
#devScreen .aLabCheck{ min-height: 44px; font: 500 .9rem var(--f-body); }
#devScreen .aLabCheck input{ width: 22px; height: 22px; }
#devScreen .aLabStage{ border-radius: 18px; border: 1px solid hsl(var(--h) 18% 90% / .14); }
#devScreen .aLabHint, #devScreen .aLabHsHint{ font: 400 .78rem/1.5 var(--f-body); color: var(--c-dim); }
#devScreen .aLabPaceRow{ border-top: 1px solid hsl(var(--h) 18% 90% / .1); }
#devScreen .aLabPaceName b{ color: var(--c-text); font: 600 .88rem var(--f-body); }
#devScreen .aLabPaceName small{ color: var(--c-dim); }
#devScreen .aLabPaceEx li{ border-radius: 10px; background: hsl(var(--h) 14% 12% / .8); }
#devScreen .aLabPaceEx li b, #devScreen .aLabPaceCard code{ color: var(--accent-hi); }
#devScreen .aLabPaceEx li i{ background: hsl(var(--h) 50% 50% / .18); }
#devScreen .aLabPace{ max-width: none; display: block; }
#devScreen .aLabLib{ border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
#devScreen .aLabPick .devSec, #devScreen #aLabPick .devSec{ margin-top: 12px; }
#devScreen .aLab .devSec .aLabForm{ margin-top: 4px; }
@media (max-width: 900px){
  #devScreen .aLabBarPanel{ position: static; }
  #devScreen .aLabLibList{ max-height: 300px; }
}

/* Searchable dropdown for the Animations bench's long pick lists (ui/dev/combo.js). */
#devScreen .aLabCombo{ position: relative; flex: 1 1 280px; min-width: 0; max-width: 520px; }
#devScreen .aLabComboLabel{ display: block; margin-bottom: 6px; font: 600 .7rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .aLabComboBtn{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%)); color: var(--c-text); font: 600 .95rem var(--f-body); text-align: left; cursor: var(--cur-click, pointer); }
#devScreen .aLabComboBtn[aria-expanded="true"]{ border-color: var(--accent-hi); box-shadow: 0 0 0 3px hsl(var(--h) 60% 60% / .22); }
#devScreen .aLabComboCur small, #devScreen .aLabComboItem small{ margin-left: 8px; font: 500 .62rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
#devScreen .aLabComboCaret{ color: var(--c-dim); }
#devScreen .aLabComboPanel{ position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); padding: 10px; border-radius: 14px; border: 1px solid hsl(var(--h) 18% 90% / .18); background: hsl(var(--h) 16% 8% / .98); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
#devScreen .aLabComboPanel[hidden]{ display: none; }
#devScreen .aLabComboFilters{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
#devScreen .aLabComboFilters input[type="search"]{ min-height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--c-line); background: var(--c-surface, hsl(var(--h) 16% 11%)); color: var(--c-text); font: 500 .9rem var(--f-body); box-sizing: border-box; width: 100%; }
#devScreen .aLabComboList{ display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
#devScreen .aLabComboItem{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--c-text); font: 500 .9rem var(--f-body); text-align: left; cursor: var(--cur-click, pointer); }
#devScreen .aLabComboItem[hidden]{ display: none; }
#devScreen .aLabComboItem:hover{ background: hsl(var(--h) 30% 30% / .3); }
#devScreen .aLabComboItem[aria-selected="true"]{ border-color: var(--accent-hi); background: hsl(var(--h) 40% 30% / .5); font-weight: 600; }
#devScreen .aLabComboNone{ margin: 8px 4px; font: 400 .8rem var(--f-body); color: var(--c-dim); }
#devScreen .aLabGroup select{ min-height: 44px; min-width: 150px; }

/* Audio tab: sound-row filter, master bar inside a section, music leveling table as cards on phones. */
#devScreen .sfxFilterRow{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin: 0 0 12px; }
#devScreen .sfxRow[hidden]{ display: none; }
#devScreen .sfxMasterBar{ border: 0; padding: 0; background: none; display: grid; grid-template-columns: 1fr 80px; gap: 6px 14px; align-items: center; }
#devScreen .sfxMasterBar .devSecHint{ grid-column: 1 / -1; margin: 0; }
#devScreen .mlPanel{ border: 0; padding: 0; margin: 0; background: none; }
#devScreen .audioFileRow{ display: flex; gap: 14px; align-items: flex-end; }
#devScreen .audioFileRow .devField{ flex: 1 1 auto; min-width: 0; margin: 0; }
#devScreen .audioFileRow #mkPreview .devAudioPreviewBtn{ min-width: 48px; min-height: 48px; }
@media (max-width: 900px){
  #devScreen .sfxFilterRow{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .sfxCell[data-label]::before{ content: attr(data-label); flex: none; width: 56px; font: 600 .68rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
  #devScreen .mlTable thead{ display: none; }
  #devScreen .mlTable, #devScreen .mlTable tbody, #devScreen .mlTable tr, #devScreen .mlTable td{ display: block; width: 100%; box-sizing: border-box; }
  #devScreen .mlTable tr{ border: 1px solid hsl(var(--h) 18% 90% / .12); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
  #devScreen .mlTable td{ border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: right; }
  #devScreen .mlTable td[data-label]::before{ content: attr(data-label); font: 600 .68rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); text-align: left; }
  #devScreen .mlTable .mlName{ font-weight: 600; justify-content: flex-start; text-align: left; }
}

/* Site Text: one section per text; status select coloured; about points as rows with a 44px remove button. */
#devScreen .devField.siteStatus{ margin: 0; }
#devScreen .sitePointRow{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
#devScreen .sitePointRow b{ flex: none; min-width: 1.6em; padding-top: 10px; color: var(--c-dim); }
#devScreen .sitePointRow textarea{ flex: 1 1 auto; min-width: 0; }
#devScreen .sitePointRow .ghost{ flex: none; min-width: 44px; min-height: 44px; }
#devScreen .loreFilterRow{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
#devScreen .loreItem[hidden]{ display: none; }
@media (max-width: 900px){ #devScreen .loreFilterRow{ grid-template-columns: minmax(0, 1fr); } }

/* Coordinates Calculator: board on the left, the selected tile on the right (stacked on phones). */
#devScreen .coordsLayout{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
#devScreen .coordsLayout .devSec{ margin: 0; }
#devScreen .coordsLayout .devSec[data-sec="result"]{ position: sticky; top: 12px; }
#devScreen .coordsVals input{ font: 700 1.6rem var(--f-display); text-align: center; min-height: 56px; }
#devScreen .coordsCopy{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
#devScreen .coordsCopy .ghost{ min-height: 44px; flex: 1 1 120px; }
@media (max-width: 900px){
  #devScreen .coordsLayout{ grid-template-columns: minmax(0, 1fr); }
  #devScreen .coordsLayout .devSec[data-sec="result"]{ position: static; }
}

/* Game Modes > Board: the layout editor (ui/dev/board-layout-editor.js). */
#devScreen .bleWrap{ display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
#devScreen .bldTile{ padding: 0; border: 0; min-height: 0; border-radius: 0; cursor: var(--cur-click, pointer); }
#devScreen .bldTile:hover{ filter: brightness(1.35); }
#devScreen .bleSide{ flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Board editor: one HP field per team-1 tower; tower tiles show their HP */
#devScreen .bleTowerHp{ display: flex; flex-wrap: wrap; gap: 8px 14px; }
#devScreen .bleTowerHp label{ display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--c-dim); text-transform: none; letter-spacing: 0; white-space: nowrap; }
#devScreen .bleTowerHp input.bleTowerHpIn{ width: 80px; flex: none; min-height: 34px; text-align: center; }
#devScreen .bleSide #gmTowerHp{ width: 120px; }
#devScreen .bldHp{ font: 700 .72rem var(--f-body); color: var(--c-text); text-shadow: 0 1px 2px #000; }