/* STREETMADE M3.48.135P5P90 — native phone editor/layout compatibility; P90 five-jump platform navigation is handled in the main game runtime.
   Phones keep a native viewport; editor chrome reflows instead of shrinking a tablet UI. */

/* ---------- shared phone editor behavior ---------- */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) {
  --sm-phone-bar: 42px;
  --sm-phone-gap: 4px;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) button,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) summary,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) select{
  touch-action:manipulation;
}

/* ---------- Asset Workshop ---------- */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header.assetCommandHeader{
  height:44px!important;
  min-height:44px!important;
  padding:4px 5px!important;
  gap:4px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderBrand{
  flex:0 0 auto!important;
  min-width:0!important;
  gap:0!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderBrand b{display:none!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderBrand a{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:36px!important;height:34px!important;overflow:hidden!important;
  font-size:0!important;border:1px solid #30445f;border-radius:8px;background:#1b2a40;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderBrand a::before{content:'←';font-size:20px!important;line-height:1}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderMenus{
  display:flex!important;flex:1 1 auto!important;min-width:0!important;gap:3px!important;
  overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized .assetHeaderMenus::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetToolMenu{flex:0 0 auto!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetToolMenu>summary,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetHeaderFullscreen,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetHeaderExport{
  height:34px!important;min-height:34px!important;padding:4px 7px!important;font-size:10px!important;border-radius:8px!important;flex:0 0 auto!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetHeaderExport{font-size:0!important;width:36px!important;padding:0!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetHeaderExport::before{content:'⇩';font-size:18px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header #status{display:none!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized main{height:calc(100dvh - 44px)!important}

/* Direct object actions are one swipeable row, never two giant rows. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetToolsOrganized .stageTools{
  left:48px!important;right:5px!important;top:5px!important;height:38px!important;max-height:38px!important;
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:3px!important;
  padding:3px!important;overflow-x:auto!important;overflow-y:hidden!important;
  background:rgba(12,22,36,.88)!important;border:1px solid rgba(120,170,225,.24)!important;border-radius:8px!important;
  scrollbar-width:none!important;-webkit-overflow-scrolling:touch;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetToolsOrganized .stageTools::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetToolsOrganized .stageTools>button{
  flex:0 0 auto!important;height:30px!important;min-height:30px!important;min-width:auto!important;padding:3px 7px!important;font-size:10px!important;white-space:nowrap!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetToolsOrganized .assetQuickRail{
  top:49px!important;left:4px!important;width:40px!important;max-height:calc(100% - 158px)!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetToolsOrganized .assetQuickSwatches{max-height:calc(100dvh - 330px)!important}

/* P5P18/P5P21 put Shapes inside assetReferencePanel. Old phone tray CSS was
   still translating that panel offscreen; make the shelf genuinely permanent. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized.assetShapesDocked .assetReferencePanel{
  display:block!important;position:absolute!important;
  left:48px!important;right:44px!important;bottom:5px!important;top:auto!important;
  width:auto!important;height:104px!important;max-height:104px!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  transform:none!important;transition:none!important;pointer-events:auto!important;
  z-index:68!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized.assetShapesDocked .assetReferencePanel>.assetQuickShapePalette{
  display:flex!important;position:static!important;width:100%!important;height:100%!important;max-height:100%!important;
  flex-direction:column!important;overflow:hidden!important;pointer-events:auto!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetShapeStyleRow{
  flex:0 0 33px!important;min-height:33px!important;padding:3px 4px!important;gap:3px!important;overflow-x:auto!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetShapeStyleRow button{
  min-width:58px!important;height:27px!important;min-height:27px!important;padding:2px 6px!important;font-size:9px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetShapeDockRing{
  flex:0 0 145px!important;height:27px!important;min-height:27px!important;padding:2px 5px!important;font-size:9px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetShapeDockRing input{width:67px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetQuickShapeGrid{
  flex:1 1 auto!important;min-height:0!important;padding:3px 4px 4px!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetQuickShapeGrid button{
  flex:0 0 52px!important;width:52px!important;min-width:52px!important;height:58px!important;min-height:58px!important;padding:2px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetQuickShapeGrid button .shapePreviewCanvas{width:38px!important;height:30px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetShapesDocked .assetQuickShapeGrid button small{font-size:8px!important}

/* Keep side library a drawer; it should not steal canvas width on phones. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized main>aside{
  top:0!important;width:min(330px,88vw)!important;max-width:88vw!important;z-index:90!important;
}

/* ---------- Character Workshop ---------- */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTopbar{
  flex:0 0 44px!important;height:44px!important;min-height:44px!important;
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:4px!important;padding:4px 5px!important;overflow:visible!important;
}
/* The page bar already says Character Workshop. Keep only the Home button here. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTitleGroup{
  flex:0 0 36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;overflow:visible!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTitleGroup>div{display:none!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTitleGroup #cwHome{
  width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTopActions{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;flex:1 1 auto!important;min-width:0!important;
  gap:3px!important;overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwTopActions::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwCommandMenu{flex:0 0 auto!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwCommandMenu>summary,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderFullscreen,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderExportAll,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderClose{
  height:34px!important;min-height:34px!important;padding:0 7px!important;font-size:10px!important;white-space:nowrap!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderExportAll{font-size:0!important;width:34px!important;padding:0!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderExportAll::before{content:'⇩';font-size:17px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwHeaderClose{width:34px!important;padding:0!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwCommandMenuPanel{
  position:fixed!important;left:5px!important;right:5px!important;top:calc(42px + 44px + 4px)!important;
  width:auto!important;max-width:none!important;max-height:62dvh!important;z-index:250!important;
}

:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwWorkspaceTabs{
  flex:0 0 40px!important;height:40px!important;min-height:40px!important;padding:3px 5px!important;gap:3px!important;
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwWorkspaceTabs::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwWorkspaceTabs>button,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwPhonePanelToggles button{
  flex:0 0 auto!important;min-width:76px!important;height:32px!important;min-height:32px!important;padding:3px 8px!important;font-size:10px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwPhonePanelToggles{margin-left:0!important;gap:3px!important}

/* Create actions: one horizontal rail instead of wrapping over the artwork. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout:not(.animateMode) .cwCreateActionBar{
  flex:0 0 42px!important;height:42px!important;min-height:42px!important;
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:3px!important;padding:3px 5px!important;
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwCreateActionBar::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwCreateActionBar button{
  flex:0 0 auto!important;height:34px!important;min-height:34px!important;padding:0 8px!important;font-size:10px!important;white-space:nowrap!important;
}

/* Create Shapes shelf: compact enough to show the complete controls and one
   full row of shape buttons on a portrait phone. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout:not(.animateMode) .cwStageWrap{
  padding-bottom:104px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapePalette{
  left:46px!important;right:44px!important;bottom:4px!important;height:98px!important;max-height:98px!important;
  padding:4px!important;z-index:74!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapePalette .cwShapeStyleRow{
  flex:0 0 31px!important;min-height:31px!important;display:flex!important;flex-wrap:nowrap!important;gap:3px!important;padding:0 0 3px!important;overflow-x:auto!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapePalette .cwShapeStyleRow button{
  flex:0 0 58px!important;min-width:58px!important;height:28px!important;min-height:28px!important;padding:0 5px!important;font-size:9px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwShapeDockRing{
  flex:0 0 142px!important;min-width:142px!important;height:28px!important;min-height:28px!important;padding:0 5px!important;font-size:9px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwShapeDockRing input{width:64px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapeGrid{
  flex:1 1 auto!important;min-height:0!important;padding:3px 0 0!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapeGrid>button{
  flex:0 0 52px!important;width:52px!important;min-width:52px!important;height:55px!important;min-height:55px!important;padding:2px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapeGrid>button .shapePreviewCanvas{width:38px!important;height:30px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapeGrid>button span{font-size:18px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.cwCreateParityLayout .cwQuickShapeGrid>button small{font-size:7px!important;max-width:48px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwQuickRail{
  top:5px!important;left:4px!important;width:38px!important;max-height:calc(100% - 108px)!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwQuickSwatches{max-height:calc(100dvh - 410px)!important}

/* Animate mode: keep stage commands in a single swipeable strip and make the
   Frames sheet a controlled bottom drawer instead of a nearly full-screen card. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwStageTools{
  left:4px!important;right:4px!important;top:4px!important;bottom:auto!important;height:40px!important;max-height:40px!important;
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:3px!important;padding:3px!important;
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwStageTools button,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwStageTools select{
  flex:0 0 auto!important;height:32px!important;min-height:32px!important;min-width:auto!important;padding:2px 7px!important;font-size:10px!important;white-space:nowrap!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwTimeline{
  left:5px!important;right:5px!important;bottom:5px!important;max-height:min(42dvh,330px)!important;padding:6px!important;border-radius:10px!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwTimelineRow{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:3px!important;scrollbar-width:none!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwFrameStrip button{min-width:38px!important;flex-basis:38px!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwBoneEdit{
  grid-template-columns:140px 150px 150px 150px auto auto auto!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:end!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop.animateMode .cwBoneEdit label{min-width:0!important}

/* Character inspector stays a proper overlay drawer and never reserves canvas width. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) .characterWorkshop .cwInspector{
  width:min(310px,88vw)!important;max-width:88vw!important;z-index:110!important;
}

/* ---------- Map Editor ---------- */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.lb-page-map #lbPageActions{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;touch-action:pan-x!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.lb-page-map #lbPageActions::-webkit-scrollbar{display:none}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.lb-page-map #lbPageActions>*{flex:0 0 auto!important}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.lb-page-map #editorPanel.editorDocked:not(.editorCollapsed){
  height:min(34dvh,330px)!important;max-height:38dvh!important;
}

/* Notes remains available but does not reserve a giant dead zone. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) #lbGlobalNotesToggle{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
}


/* STREETMADE M3.48.135P5P44 — Asset Workshop phone dropdown + drawer visibility fix.
   The header menu rail must scroll sideways, but its dropdown panels must escape
   that rail instead of being vertically clipped by it. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header .assetHeaderToolMenu>.assetToolMenuPanel{
  position:fixed!important;
  left:5px!important;
  right:5px!important;
  top:48px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  max-height:min(62dvh,520px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  z-index:300!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header #assetReferenceMenu>.assetToolMenuPanel,
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized header #assetSaveMenu>.assetToolMenuPanel{
  left:5px!important;right:5px!important;top:48px!important;width:auto!important;max-width:none!important;
}

/* main>aside is position:fixed. P5P39 accidentally pinned it to viewport top:0,
   placing the first drawer-tab row behind the 44px command header. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized main>aside{
  top:44px!important;
  bottom:0!important;
  height:auto!important;
}
/* Five tabs fit cleanly in one row on the phone drawer, so none are hidden above
   Asset / Library and no second-row tab strip is needed. */
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized main>aside .tabs.five{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:3px!important;
  padding:4px!important;
  min-height:38px!important;
  background:var(--panel)!important;
}
:is(html.lbCompactEditor,html[data-lb-display-profile="phone"]) body.assetHeaderOrganized main>aside .tabs.five>button{
  min-width:0!important;
  min-height:30px!important;
  height:30px!important;
  padding:3px 2px!important;
  font-size:9px!important;
  white-space:nowrap!important;
}